.language-switch-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--theme-popup-bg, #fff) 18%, rgba(15, 23, 42, 0.55));
  backdrop-filter: blur(5px);
}

.language-switch-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(22rem, 100%);
  padding: 2rem 2.25rem;
  border-radius: 1rem;
  background: var(--theme-popup-bg, #fff);
  color: var(--theme-popup-heading-color, #111827);
  border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.language-switch-overlay__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 3px solid color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 25%, transparent);
  border-top-color: var(--theme-button-bg, var(--primary-color));
  animation: language-switch-spin 0.7s linear infinite;
}

.language-switch-overlay__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--theme-muted, #6B7280);
}

@keyframes language-switch-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .language-switch-overlay__spinner {
    animation: none;
    border-top-color: var(--theme-button-bg, var(--primary-color));
  }
}
.dual-label {
  line-height: 1.25;
}

.dual-label--inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35em;
  max-width: 100%;
}

/* Full-width right-aligned table headers (invoice numeric cols) */
.dual-label.invoice-html__num-label {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: flex-end;
  text-align: right;
}

.dual-label--truncate {
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.dual-label--truncate .dual-label__primary,
.dual-label--truncate .dual-label__pair {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dual-label__primary {
  font-family: var(--font-body-latin, inherit);
  color: inherit;
}

.dual-label__pair {
  color: inherit;
  font-weight: 500;
  font-size: 0.92em;
  max-width: 100%;
}

.dual-label__secondary {
  font-family: var(--font-body-arabic, 'Segoe UI', Tahoma, Arial, sans-serif);
  font-weight: 600;
  color: inherit;
  unicode-bidi: isolate;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang='ar'] .dual-label__primary {
  font-family: var(--font-body-arabic, 'Segoe UI', Tahoma, Arial, sans-serif);
}
.language-switch {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: 999px;
  background: var(--theme-surface, #F9FAFB);
  border: 1px solid var(--theme-border, #E5E7EB);
  gap: 2px;
}

.language-switch__opt {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  min-width: 2.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--theme-muted, #6B7280);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.language-switch__opt:hover {
  color: var(--theme-label, #374151);
  background: color-mix(in srgb, var(--theme-popup-bg, #fff) 70%, transparent);
}

.language-switch__opt:focus-visible {
  outline: 2px solid var(--theme-button-bg);
  outline-offset: 2px;
  z-index: 1;
}

.language-switch__opt--active {
  color: var(--theme-button-text, #fff);
  background: var(--theme-button-bg);
}

.language-switch--header {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: 28px;
  padding: 2px;
  gap: 0;
  border: 1px solid var(--theme-border, #E5E7EB);
  border-radius: 9999px;
  background: transparent;
  min-width: 7.5rem;
}
@media (max-width: 480px) {
  .language-switch--header {
    min-width: 5.5rem;
    height: 26px;
  }
  .language-switch--header .language-switch__indicator {
    height: 22px;
  }
  .language-switch--header .language-switch__opt {
    height: 22px;
    font-size: 0.62rem;
    padding-inline: 0.2rem;
  }
}

.language-switch--header .language-switch__indicator {
  position: absolute;
  top: 2px;
  inset-inline-start: calc(2px + (100% - 4px) / 3 * var(--active-index, 0));
  width: calc((100% - 4px) / 3);
  height: 24px;
  border-radius: 9999px;
  background: var(--theme-button-bg);
  pointer-events: none;
  z-index: 0;
  transition: inset-inline-start 0.15s ease;
}

.language-switch--header .language-switch__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--theme-muted, #6B7280);
  background: transparent;
}

.language-switch--header .language-switch__opt:hover {
  color: var(--theme-label, #374151);
  background: transparent;
}

.language-switch--header .language-switch__opt--active {
  color: var(--theme-button-text, #fff);
  background: transparent;
}

.language-switch--settings {
  padding: 4px;
  gap: 4px;
}

.language-switch--settings .language-switch__opt {
  min-width: 3.25rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .language-switch--header .language-switch__indicator {
    transition: none;
  }
}
.help-support {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.help-support__trigger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--theme-button-bg, var(--primary-color));
  color: var(--theme-button-text, #fff);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 35%, transparent);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.help-support__trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 45%, transparent);
}

.help-support__trigger:focus-visible {
  outline: 2px solid var(--theme-button-bg, var(--primary-color));
  outline-offset: 2px;
}

.help-support__trigger--open {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 22%, transparent),
    0 4px 12px color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 40%, transparent);
}

.help-support__panel {
  position: fixed;
  z-index: 9999;
  width: min(22.5rem, calc(100vw - 1rem));
  max-height: min(32rem, calc(100vh - 5rem));
  display: flex;
  flex-direction: column;
  background: var(--theme-popup-bg, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 1rem;
  box-shadow:
    0 18px 40px color-mix(in srgb, #0f032d 18%, transparent),
    0 0 0 1px color-mix(in srgb, #0f032d 4%, transparent);
  overflow: hidden;
  color: var(--theme-body, #1f2937);
}

.help-support__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
}

.help-support__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--theme-heading, #111827);
}

.help-support__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--theme-muted, #6b7280);
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.help-support__close:hover {
  background: color-mix(in srgb, var(--theme-muted, #6b7280) 10%, transparent);
  color: var(--theme-heading, #111827);
}

.help-support__search-wrap {
  position: relative;
  padding: 0.35rem 1rem 0.75rem;
}

.help-support__search-icon {
  position: absolute;
  inset-inline-start: 1.7rem;
  top: 50%;
  transform: translateY(-55%);
  width: 1rem;
  height: 1rem;
  color: var(--theme-muted, #9ca3af);
  pointer-events: none;
}

.help-support__search {
  width: 100%;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 999px;
  background: var(--theme-surface, #f9fafb);
  padding-block: 0.65rem;
  padding-inline: 2.4rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--theme-label, #374151);
}

.help-support__search::-moz-placeholder {
  color: var(--theme-muted, #9ca3af);
}

.help-support__search::placeholder {
  color: var(--theme-muted, #9ca3af);
}

.help-support__search:focus {
  outline: none;
  border-color: var(--theme-button-bg, var(--primary-color));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 18%, transparent);
  background: #fff;
}

.help-support__lang {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 1rem 0.85rem;
  padding: 3px;
  border-radius: 999px;
  background: var(--theme-surface, #f3f4f6);
  border: 1px solid var(--theme-border, #e5e7eb);
  gap: 2px;
}

.help-support__lang-opt {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-muted, #6b7280);
  background: transparent;
  cursor: pointer;
}

.help-support__lang-opt:hover {
  color: var(--theme-heading, #111827);
}

.help-support__lang-opt.is-active {
  background: var(--theme-button-bg, var(--primary-color));
  color: var(--theme-button-text, #fff);
}

.help-support__topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.5rem;
  padding: 0 0.65rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.help-support__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--theme-muted, #6b7280);
}

.help-support__topic {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.45rem;
  border-radius: 0.65rem;
  text-align: start;
  cursor: pointer;
  color: var(--theme-heading, #111827);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  min-width: 0;
}

.help-support__topic:hover {
  background: color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 8%, transparent);
}

.help-support__topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 12%, #fff);
  color: var(--theme-button-bg, var(--primary-color));
}

.help-support__topic-label {
  min-width: 0;
  line-height: 1.25;
}

.help-support__footer {
  border-top: 1px solid var(--theme-border, #e5e7eb);
  padding: 0.35rem 0.5rem;
}

.help-support__footer-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.65rem;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--theme-button-bg, var(--primary-color));
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
}

.help-support__footer-link:hover {
  background: color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 8%, transparent);
}
/* Shared empty-state chrome for lists, tables, and panels. */

.app-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  min-height: 16rem;
  box-sizing: border-box;
}

.app-empty-state--panel {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  min-height: unset;
  padding: 2.5rem 2rem;
  border: 1px dashed var(--theme-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--theme-surface) 60%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-heading) 4%, transparent);
}

.app-empty-state--embedded {
  min-height: min(22rem, 50vh);
  padding-block: 3rem;
}

.app-empty-state--sm {
  min-height: unset;
  padding: 1.25rem 1rem;
  gap: 0.5rem;
}

.app-empty-state__icon {
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--primary-color);
  background: var(--theme-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-border) 80%, transparent);
}

.app-empty-state--filtered .app-empty-state__icon {
  color: var(--theme-muted);
}

.app-empty-state--error .app-empty-state__icon {
  color: var(--theme-danger);
  background: color-mix(in srgb, var(--theme-danger) 8%, var(--theme-surface));
}

.app-empty-state--sm .app-empty-state__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.app-empty-state__glyph {
  width: 2rem;
  height: 2rem;
}

.app-empty-state--sm .app-empty-state__glyph {
  width: 1.25rem;
  height: 1.25rem;
}

.app-empty-state__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--theme-heading);
  line-height: 1.35;
}

.app-empty-state--sm .app-empty-state__title {
  font-size: 0.9375rem;
}

.app-empty-state__description {
  margin: 0;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--theme-muted);
}

.app-empty-state__action {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

td.app-empty-state-cell {
  height: 100%;
  padding: 0;
  vertical-align: middle;
  background: var(--app-table-body-bg, var(--theme-menu-bg));
}

.app-table-shell:has(.app-empty-state) table.app-table {
  height: 100%;
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}/* ==========================================================================
   Dashboard
   One neutral canvas, one widget frame, one elevation. Brand colour is kept for the slim header
   and for small accents.

   PDF capture: everything inside #dashboard-plane-capture is rendered by html-to-image, which
   cannot paint color-mix(). Rules that can match inside the capture area therefore use plain
   var() tokens only. color-mix() is used here only for the header, the toolbar, the picker and
   edit-mode affordances, none of which are captured.
   ========================================================================== */

.dash-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

/* ---- Slim brand header ------------------------------------------------------------------ */
.dash-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.6rem 0.75rem 0.6rem 0.9rem;
  border-radius: 0.75rem;
  background-color: var(--primary-color);
  color: var(--theme-button-text);
}
.dash-brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--theme-button-text) 16%, transparent);
}
.dash-brand__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;
}
.dash-brand__meta {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--theme-button-text) 82%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-brand__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.dash-brand__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--theme-button-text) 30%, transparent);
  background: color-mix(in srgb, var(--theme-button-text) 12%, transparent);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--animation-ease, ease), transform 120ms var(--animation-ease, ease);
}
.dash-brand__btn--icon {
  min-width: 2.5rem;
  padding: 0;
}
.dash-brand__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--theme-button-text) 22%, transparent);
}
.dash-brand__btn:active:not(:disabled) {
  transform: scale(0.97);
}
.dash-brand__btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.dash-brand__btn:focus-visible {
  outline: 2px solid var(--theme-button-text);
  outline-offset: 2px;
}

/* ---- Toolbar ---------------------------------------------------------------------------- */
.dash-toolbar.app-page-header-bar {
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: var(--theme-menu-bg);
}
.dash-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.dash-toolbar__group--end {
  justify-content: flex-end;
  margin-inline-start: auto;
}
.dash-field {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
.dash-field__icon {
  position: absolute;
  inset-inline-start: 0.65rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateY(-50%);
  color: var(--theme-muted);
  pointer-events: none;
  z-index: 1;
}
.dash-field__select {
  min-width: 11.5rem;
}
.dash-field__select--preset {
  min-width: 14rem;
}
.dash-date-range {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.dash-date-input {
  min-height: 2.5rem;
  padding: 0.25rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  font-size: 0.75rem;
  color: var(--theme-label);
}
.dash-date-input:focus,
.dash-date-input:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
.dash-date-input--warn {
  border-color: var(--theme-warning);
}

.dash-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-label);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms var(--animation-ease, ease), border-color 160ms var(--animation-ease, ease),
    color 160ms var(--animation-ease, ease), transform 120ms var(--animation-ease, ease);
}
.dash-tool-btn:hover:not(:disabled) {
  background: var(--theme-surface);
  border-color: color-mix(in srgb, var(--primary-color) 40%, var(--theme-border));
  color: var(--theme-general-heading);
}
.dash-tool-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.dash-tool-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.dash-tool-btn--danger {
  color: var(--theme-error);
}
.dash-tool-btn--danger:hover:not(:disabled) {
  border-color: var(--theme-error);
  color: var(--theme-error);
  background: color-mix(in srgb, var(--theme-error) 8%, var(--theme-menu-bg));
}
.dash-tool-btn--primary {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--theme-button-text);
  font-weight: 600;
}
.dash-tool-btn--primary:hover:not(:disabled) {
  /* --primary-hover is not set by the theme, so darken the live brand colour instead. */
  background: color-mix(in srgb, var(--primary-color) 88%, #000);
  border-color: color-mix(in srgb, var(--primary-color) 88%, #000);
  color: var(--theme-button-text);
}
.dash-tool-btn--check {
  cursor: default;
}
.dash-tool-btn:focus-visible,
.dash-tool-btn--check:focus-within,
.dash-lock-switch__opt:focus-visible,
.dash-frame__btn:focus-visible,
.dash-btn-quiet:focus-visible,
.dash-picker__add:focus-visible,
.dash-picker__input:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Segmented view / edit switch */
.dash-lock-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 0.6rem;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
}
.dash-lock-switch__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-muted);
  cursor: pointer;
  transition: background-color 160ms var(--animation-ease, ease), color 160ms var(--animation-ease, ease),
    box-shadow 160ms var(--animation-ease, ease);
}
.dash-lock-switch__opt:hover {
  color: var(--theme-general-heading);
}
.dash-lock-switch__opt--active {
  background: var(--theme-menu-bg);
  color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
}

.dash-unsaved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--theme-warning);
  background: color-mix(in srgb, var(--theme-warning) 10%, var(--theme-menu-bg));
  font-size: 0.75rem;
  color: var(--theme-general-heading);
}

/* ---- Workspace: canvas + picker --------------------------------------------------------- */
.dash-workspace {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.dash-canvas {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0.75rem;
}
.dash-capture {
  min-height: 12rem;
}
/* Captured for PDF: give the image a little breathing room, plain tokens only. */
.dash-capture--exporting {
  padding: 1rem;
  background: var(--theme-surface);
}

/* react-grid-layout positions from the left edge; keep LTR even when html[dir=rtl]. */
.dashboard-plane-inner {
  direction: ltr;
  min-width: 0;
}
.dash-tile {
  min-width: 0;
}
.dashboard-plane-inner .react-grid-item.react-grid-placeholder {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border: 2px dashed color-mix(in srgb, var(--primary-color) 50%, transparent);
  border-radius: 0.75rem;
  opacity: 1;
}
.dashboard-plane-inner .react-grid-item.react-draggable-dragging .dash-frame,
.dashboard-plane-inner .react-grid-item.resizing .dash-frame {
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  border-color: var(--primary-color);
}
/* Resize corner: visible affordance only while arranging. */
.dashboard-plane-inner .react-resizable-handle {
  opacity: 0;
}
.dashboard-plane--arranging .react-resizable-handle {
  opacity: 0.55;
  transition: opacity 160ms var(--animation-ease, ease);
}
.dashboard-plane--arranging .react-grid-item:hover .react-resizable-handle {
  opacity: 1;
}

.dash-note {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--theme-border);
  font-size: 0.75rem;
  color: var(--theme-muted);
  direction: inherit;
}

.dash-empty.app-empty-state {
  min-height: 22rem;
  justify-content: center;
}

/* ---- Widget frame ----------------------------------------------------------------------- */
.dash-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  container-type: inline-size;
  transition: box-shadow 200ms var(--animation-ease, ease), border-color 200ms var(--animation-ease, ease);
}
.dash-frame:hover {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.07);
}
.dash-frame--editing {
  border-style: dashed;
}
.dash-frame--editing:hover,
.dash-frame--editing:focus-within {
  border-color: var(--primary-color);
}
.dash-frame__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-shrink: 0;
  padding: 0.7rem 0.85rem 0;
}
.dash-frame__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  height: 100%;
  padding: 0 0.85rem;
}
.dash-frame__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
}
.dash-frame__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--theme-general-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-frame__title--small {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--theme-muted);
}
.dash-frame__trail {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.dash-frame__pulse {
  width: 0.4rem;
  height: 0.4rem;
  margin-inline-end: 0.25rem;
  border-radius: 9999px;
  background: var(--primary-color);
}
.dash-frame__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 0.5rem 0.85rem 0.8rem;
}
.dash-frame__body--flush {
  padding: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
}
.dash-frame__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  color: var(--theme-muted);
  cursor: pointer;
  transition: background-color 150ms var(--animation-ease, ease), color 150ms var(--animation-ease, ease),
    transform 120ms var(--animation-ease, ease);
}
.dash-frame__btn:hover {
  background: var(--theme-surface);
  color: var(--primary-color);
}
.dash-frame__btn:active {
  transform: scale(0.92);
}
.dash-frame__btn--danger:hover {
  color: var(--theme-danger);
}
.dash-frame__btn--handle {
  margin-inline-start: -0.35rem;
  cursor: grab;
}
.dash-frame__btn--handle:active {
  cursor: grabbing;
}

.dash-btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.75rem;
  padding: 0 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-label);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--animation-ease, ease), transform 120ms var(--animation-ease, ease);
}
.dash-btn-quiet:hover {
  background: var(--theme-surface);
}
.dash-btn-quiet:active {
  transform: scale(0.96);
}

/* Loading placeholder */
.dash-skel {
  display: block;
  border-radius: 0.3rem;
  background: var(--theme-border);
}

/* Empty / error message inside a frame */
.dash-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 100%;
  min-height: 5rem;
  padding: 0.5rem;
  text-align: center;
}

/* KPI */
.dash-kpi {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  height: 100%;
  min-width: 0;
}
.dash-kpi__value {
  font-size: clamp(1.05rem, calc(var(--kpi-fit, 9) * 1cqi), 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--theme-general-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-kpi__value--compact {
  font-size: clamp(0.8rem, calc(var(--kpi-fit, 9) * 0.62cqi), 1.25rem);
}
.dash-kpi__delta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* Short word under the value: "Payable", or a hint that the card's accounts are not set up. */
.dash-kpi__note {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--theme-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-kpi__note--inline {
  margin-inline-start: 0.4rem;
}
.dash-kpi__note--warn {
  color: var(--chart-caution);
}

/* ---- Hover insight ----------------------------------------------------------------------
   Brief card and detailed panel for KPI cards. Both are portaled to document.body, outside the
   PDF capture area, and are not rendered at all during export or in edit mode. Plain tokens only. */
.dash-insight-anchor {
  border-radius: 0.75rem;
}
.dash-insight-anchor:focus {
  outline: none;
}
.dash-insight-anchor:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.dash-insight {
  position: fixed;
  z-index: 9000;
  box-sizing: border-box;
  border-radius: 0.6rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-general-heading);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08), 0 14px 32px rgba(15, 23, 42, 0.14);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: start;
  animation: dash-insight-in 120ms ease-out;
}
.dash-insight--brief {
  width: min(16.25rem, calc(100vw - 1rem));
  padding: 0.6rem 0.75rem 0.7rem;
  overflow: hidden;
  pointer-events: none;
}
.dash-insight--panel {
  display: flex;
  flex-direction: column;
  width: min(26.25rem, calc(100vw - 1rem));
  max-height: min(36rem, calc(100vh - 1rem));
  overflow: hidden;
}
.dash-insight--panel:focus {
  outline: none;
}
.dash-insight--panel:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
.dash-insight__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.65rem 0.5rem 0.55rem 0.85rem;
  border-bottom: 1px solid var(--theme-border);
}
[dir='rtl'] .dash-insight__head {
  padding: 0.65rem 0.85rem 0.55rem 0.5rem;
}
.dash-insight__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.7rem 0.85rem 0.8rem;
}
.dash-insight__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--theme-general-heading);
}
.dash-insight__period,
.dash-insight__muted,
.dash-insight__hint {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--theme-muted);
}
.dash-insight--brief .dash-insight__period {
  margin-top: 0.4rem;
}
.dash-insight__hint {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--theme-border);
}
.dash-insight__warn,
.dash-insight__error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chart-caution);
}
.dash-insight__error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--theme-error);
}
.dash-insight__warn svg,
.dash-insight__error svg {
  margin-top: 0.1rem;
}
.dash-insight__lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.4rem 0 0;
}
.dash-insight__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}
.dash-insight__line dt {
  min-width: 0;
  color: var(--theme-label);
}
.dash-insight__line dd {
  margin: 0;
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.dash-insight__line--excluded dt,
.dash-insight__line--excluded dd {
  color: var(--theme-muted);
  font-weight: 500;
}
.dash-insight__tag {
  display: inline-block;
  margin-inline-start: 0.35rem;
  padding: 0 0.3rem;
  border-radius: 0.25rem;
  border: 1px solid var(--theme-border);
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--theme-muted);
  white-space: nowrap;
}
/* Fills from the brief card appearing to the panel opening, so the user sees more is coming. */
.dash-insight__progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: dash-insight-fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
[dir='rtl'] .dash-insight__progress {
  transform-origin: right center;
}
.dash-insight__state {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.dash-insight__compare {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.dash-insight__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.dash-insight__figure--small {
  justify-content: flex-end;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dash-insight__section {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--theme-border);
}
.dash-insight__heading {
  margin: 0 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--theme-muted);
}
.dash-insight__chart {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.dash-insight__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  color: var(--theme-label);
}
.dash-insight__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.dash-insight__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.15rem;
}
.dash-insight__table {
  width: 100%;
  margin-top: 0.4rem;
  border-collapse: collapse;
  font-size: 0.6875rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.dash-insight__table th,
.dash-insight__table td {
  padding: 0.22rem 0;
  font-weight: 500;
  white-space: nowrap;
}
.dash-insight__table th + th,
.dash-insight__table th + td,
.dash-insight__table td + td {
  padding-inline-start: 0.6rem;
}
.dash-insight__table thead th {
  font-weight: 600;
  color: var(--theme-muted);
  border-bottom: 1px solid var(--theme-border);
}
.dash-insight__table tbody th {
  color: var(--theme-label);
}
.dash-insight__table tbody tr + tr > * {
  border-top: 1px solid var(--theme-border);
}
.dash-insight__top {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-insight__top li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  min-height: 1.6rem;
}
.dash-insight__amount {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.dash-insight__link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0.2rem;
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.dash-insight__link:hover {
  text-decoration: underline;
}
.dash-insight__link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.dash-insight__link--report {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}
[dir='rtl'] .dash-insight__arrow {
  transform: scaleX(-1);
}
.dash-insight__notes {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--theme-muted);
}
.dash-insight__notes li + li {
  margin-top: 0.3rem;
}
.dash-insight__footer {
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--theme-border);
}
.dash-insight--still,
.dash-insight--still * {
  animation: none !important;
}
@keyframes dash-insight-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dash-insight-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Table */
.dash-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid var(--theme-border);
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--theme-general-heading);
}
.dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-border);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--theme-muted);
}
.dash-table tbody tr + tr td {
  border-top: 1px solid var(--theme-border);
}
.dash-table tbody tr {
  transition: background-color 120ms var(--animation-ease, ease);
}
.dash-table tbody tr:hover {
  background: var(--theme-surface);
}
.dash-table__row--link {
  cursor: pointer;
}
.dash-table__caption {
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-top: 1px solid var(--theme-border);
  font-size: 0.6875rem;
  color: var(--theme-muted);
}

/* Page-level skeleton while presets load */
.dash-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}
.dash-skeleton-grid__tile {
  grid-column: span 12;
  height: 11.5rem;
}
.dash-skeleton-grid__tile--kpi { grid-column: span 6; }
.dash-skeleton-grid__tile--wide,
.dash-skeleton-grid__tile--half { height: 18rem; }
@media (min-width: 900px) {
  .dash-skeleton-grid__tile--kpi { grid-column: span 3; }
  .dash-skeleton-grid__tile--half { grid-column: span 6; }
}

/* ---- Widget picker ---------------------------------------------------------------------- */
.dash-picker {
  position: sticky;
  top: 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 0 0 20rem;
  width: 20rem;
  max-height: calc(100vh - var(--header-height, 64px) - 2rem);
  border-radius: 0.75rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.dash-picker__backdrop {
  display: none;
}
.dash-picker__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.75rem 0.6rem 0.85rem;
  border-bottom: 1px solid var(--theme-border);
}
.dash-picker__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
}
.dash-picker__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0.75rem 0;
  padding: 0 0.65rem;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
}
.dash-picker__search:focus-within {
  border-color: var(--primary-color);
}
.dash-picker__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--theme-general-heading);
}
.dash-picker__input:focus {
  outline: none;
}
.dash-picker__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.dash-picker__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-muted);
}
.dash-picker__count {
  padding: 0 0.35rem;
  border-radius: 9999px;
  background: var(--theme-surface);
  font-size: 0.625rem;
  letter-spacing: 0;
}
.dash-picker__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem 0.55rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  cursor: grab;
  transition: border-color 150ms var(--animation-ease, ease), background-color 150ms var(--animation-ease, ease);
}
.dash-picker__item:hover {
  background: var(--theme-surface);
  border-color: color-mix(in srgb, var(--primary-color) 40%, var(--theme-border));
}
.dash-picker__item:active {
  cursor: grabbing;
}
.dash-picker__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color 150ms var(--animation-ease, ease), color 150ms var(--animation-ease, ease),
    transform 120ms var(--animation-ease, ease);
}
.dash-picker__add:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--theme-button-text);
}
.dash-picker__add:active {
  transform: scale(0.92);
}

/* Below a very wide screen the picker floats over the edge of the canvas instead of taking
   width from it, so the 12-column grid stays usable while widgets are being added. */
@media (max-width: 1535px) {
  .dash-picker {
    position: fixed;
    top: calc(var(--header-height, 64px) + 0.75rem);
    bottom: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 60;
    flex: none;
    width: 20rem;
    max-height: none;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22);
  }
}
/* Tablet and below: a full-height drawer with a backdrop. */
@media (max-width: 1023px) {
  .dash-picker {
    inset-block: 0;
    inset-inline-end: 0;
    width: min(22rem, 92vw);
    border-radius: 0;
    border-block: 0;
    border-inline-end: 0;
  }
  .dash-picker__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: var(--theme-modal-overlay);
    cursor: default;
  }
}
/* Phone: bottom sheet. */
@media (max-width: 639px) {
  .dash-picker {
    inset-block: auto 0;
    inset-inline: 0;
    width: 100%;
    max-height: 78vh;
    border-radius: 1rem 1rem 0 0;
    border: 0;
    border-top: 1px solid var(--theme-border);
  }
  .dash-brand__btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .dash-brand__btn {
    min-width: 2.5rem;
    padding: 0;
  }
  .dash-toolbar__group--end {
    margin-inline-start: 0;
    justify-content: flex-start;
  }
  .dash-field,
  .dash-field__select,
  .dash-field__select--preset {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .dash-toolbar__group {
    flex: 1 1 100%;
  }
  .dash-date-range {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .dash-date-range > span[aria-hidden] {
    display: none;
  }
  .dash-date-range > *,
  .dash-date-range .dash-date-input {
    width: 100%;
    min-width: 0;
  }
}

/* Touch: every control reaches 44px. */
@media (pointer: coarse) {
  .dash-frame__btn,
  .dash-picker__add {
    width: 2.75rem;
    height: 2.75rem;
  }
  .dash-lock-switch__opt,
  .dash-tool-btn,
  .dash-brand__btn {
    min-height: 2.75rem;
  }
  .dash-btn-quiet {
    min-height: 2.75rem;
    padding: 0 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-frame,
  .dash-frame__btn,
  .dash-tool-btn,
  .dash-brand__btn,
  .dash-lock-switch__opt,
  .dash-picker__item,
  .dash-picker__add,
  .dash-btn-quiet,
  .dash-table tbody tr,
  .dashboard-plane-inner .react-grid-item,
  .dashboard-plane-inner .react-grid-placeholder,
  .dashboard-plane-inner .react-resizable-handle {
    transition: none !important;
  }
  .dash-skel,
  .dash-frame__pulse,
  .dash-insight,
  .dash-insight__progress {
    animation: none !important;
  }
  .dash-brand__btn:active,
  .dash-tool-btn:active,
  .dash-frame__btn:active,
  .dash-picker__add:active,
  .dash-btn-quiet:active {
    transform: none;
  }
}
/**
 * Invoice Create/View chrome — ported from
 * HTML Template/Invoice.html (extracted: Rules/_invoice_template_extracted.html).
 *
 * Plan exceptions:
 * - Fonts inherit Settings → Appearance (no Manrope / IBM Plex Mono).
 * - Accents use --primary-color / theme mixes only (no hardcoded brand purple or lilac).
 * - View controls stay white (not gray).
 */

.invoice-html {
  --inv-page: color-mix(in srgb, var(--theme-heading, #111827) 3.5%, var(--theme-general-bg, #f9fafb));
  --inv-ink: var(--theme-heading, #111827);
  --inv-muted: var(--theme-muted, #6b7280);
  --inv-label: var(--theme-label, #374151);
  --inv-border: var(--theme-border, #e5e7eb);
  --inv-border-soft: color-mix(in srgb, var(--theme-border, #e5e7eb) 65%, #fff);
  --inv-line: color-mix(in srgb, var(--theme-border, #e5e7eb) 45%, #fff);
  --inv-fill: color-mix(in srgb, var(--theme-surface, #f9fafb) 55%, #fff);
  --inv-placeholder: color-mix(in srgb, var(--theme-muted, #6b7280) 72%, #fff);
  --inv-primary: var(--primary-color, var(--theme-button-bg));
  --inv-primary-soft: color-mix(in srgb, var(--inv-primary) 10%, #fff);
  --inv-primary-wash: color-mix(in srgb, var(--inv-primary) 6%, #fff);
  --inv-primary-border: color-mix(in srgb, var(--inv-primary) 28%, var(--inv-border));
  --inv-chip-bg: color-mix(in srgb, var(--inv-primary) 6%, var(--inv-fill));
  --inv-chip-fg: color-mix(in srgb, var(--inv-ink) 72%, var(--inv-muted));
  --inv-error: var(--theme-danger, #dc2626);
  --inv-error-badge: color-mix(in srgb, var(--theme-danger, #dc2626) 88%, #000);
  font-family: var(--theme-font-family, inherit);
  color: var(--inv-ink);
  -webkit-font-smoothing: antialiased;
  background: var(--inv-page);
}

.invoice-html,
.invoice-html * {
  box-sizing: border-box;
}

.invoice-html ::-moz-placeholder {
  color: var(--inv-placeholder);
}

.invoice-html ::placeholder {
  color: var(--inv-placeholder);
}

/* —— Sticky bar —— */
.invoice-html > header,
.invoice-html .invoice-html__sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  padding: 12px 16px;
  background: var(--inv-page);
  border-bottom: 1px solid var(--inv-border);
}

.invoice-html__accent {
  width: 3px;
  align-self: stretch;
  background: var(--inv-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.invoice-html__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.invoice-html__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  color: color-mix(in srgb, var(--inv-primary) 12%, #fff);
  background: var(--inv-ink);
  border-radius: 10px;
}

.invoice-html__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--inv-primary) 55%, #fff);
  flex-shrink: 0;
}

/*
 * View mode: the pill carries the real document status (see utils/documentStatus).
 * Tone comes from the semantic theme tokens; the label always states the status in words,
 * so colour is never the only signal. Neutral keeps the default ink pill.
 */
.invoice-html__status--success { --inv-status-tone: var(--theme-success, #16a34a); }
.invoice-html__status--warning { --inv-status-tone: var(--theme-warning, #d97706); }
.invoice-html__status--error { --inv-status-tone: var(--theme-danger, #dc2626); }
.invoice-html__status--info { --inv-status-tone: var(--inv-primary); }
.invoice-html__status--muted { --inv-status-tone: var(--theme-muted, #6b7280); }

.invoice-html__status--success,
.invoice-html__status--warning,
.invoice-html__status--error,
.invoice-html__status--info,
.invoice-html__status--muted {
  color: color-mix(in srgb, var(--inv-status-tone) 62%, #000);
  background: color-mix(in srgb, var(--inv-status-tone) 14%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-status-tone) 30%, #fff);
}

.invoice-html__status--success .invoice-html__status-dot,
.invoice-html__status--warning .invoice-html__status-dot,
.invoice-html__status--error .invoice-html__status-dot,
.invoice-html__status--info .invoice-html__status-dot,
.invoice-html__status--muted .invoice-html__status-dot {
  background: var(--inv-status-tone);
}

.invoice-html__doc-num {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  white-space: nowrap;
  color: var(--inv-ink);
}

.invoice-html__btn,
.invoice-html button.invoice-html__btn {
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--inv-chip-fg);
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.invoice-html__btn-ghost {
  height: 30px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--inv-chip-fg);
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 9px;
}

.invoice-html__btn-save-new {
  height: 30px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--inv-primary);
  background: color-mix(in srgb, var(--inv-primary) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--inv-primary) 22%, #fff);
  border-radius: 9px;
}

.invoice-html__btn-primary {
  height: 30px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-button-text, #fff);
  background: var(--inv-primary);
  border: none;
  border-radius: 9px;
}

.invoice-html__btn-primary:disabled,
.invoice-html__btn-save-new:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* View action pills: hide icon chrome, keep spinner */
.invoice-html > header .btn-app svg:not(.spinner-on-primary),
.invoice-html > header button svg:not(.spinner-on-primary) {
  display: none;
}

.invoice-html > header .btn-app {
  gap: 6px;
}

/* —— Page canvas —— */
.invoice-html .invoice-html__page {
  background: var(--inv-page) !important;
}

.invoice-html .invoice-html__scroll {
  /* No Create bottom dock — only modest end padding so the journal card clears the viewport */
  padding-bottom: 24px;
}

/* —— 12-col grid (HTML always uses 12 columns) —— */
.invoice-html .invoice-html__grid,
.invoice-html #sec-header {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 4px 16px 12px !important;
}

.invoice-html__span-8 { grid-column: span 8; min-width: 0; }
.invoice-html__span-6 { grid-column: span 6; min-width: 0; }
.invoice-html__span-4 { grid-column: span 4; min-width: 0; }
.invoice-html__span-3 { grid-column: span 3; min-width: 0; }
.invoice-html__span-2 { grid-column: span 2; min-width: 0; }
.invoice-html__span-9 { grid-column: span 9; min-width: 0; }
.invoice-html__span-12 { grid-column: span 12; min-width: 0; }

@media (max-width: 1100px) {
  .invoice-html .invoice-html__grid,
  .invoice-html #sec-header {
    grid-template-columns: 1fr !important;
  }
  .invoice-html__span-8,
  .invoice-html__span-6,
  .invoice-html__span-4,
  .invoice-html__span-3,
  .invoice-html__span-2,
  .invoice-html__span-9,
  .invoice-html__span-12,
  .invoice-html__side {
    grid-column: span 1;
  }
}

.invoice-html__card {
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 14px;
  padding: 13px 15px;
  overflow: visible;
}

.invoice-html__card-flush {
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 14px;
  overflow: visible;
}

.invoice-html__card-tint {
  background: var(--inv-primary-wash);
  border: 1px solid var(--inv-primary-border);
  border-radius: 14px;
  padding: 13px 15px;
  overflow: visible;
  color: var(--inv-ink);
}

.invoice-html__side {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.invoice-html__section {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.invoice-html__section-primary {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--inv-primary);
}

/*
 * Field labels above controls: always the same block-level flex box so adjacent
 * columns (e.g. Custom number · Operating location) share one baseline.
 * Scoped under `.invoice-html` so it beats stray `block` / `inline-flex` utilities.
 * Checkbox-row labels that must sit beside a control use `!inline-flex` + fixed height.
 */
.invoice-html .invoice-html__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 1.25em;
  color: var(--inv-label);
  margin-bottom: 3px;
}

.invoice-html__card-tint .invoice-html__label {
  color: var(--inv-muted);
}

/* —— Native-looking controls (30px / #FAFAFC) —— */
.invoice-html__control,
.invoice-html input.invoice-html__control,
.invoice-html textarea.invoice-html__control {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  font-size: 12px;
  font-family: inherit;
  color: var(--inv-ink);
  background: var(--inv-fill);
  border: 1px solid var(--inv-border-soft);
  border-radius: 8px;
}

.invoice-html__control:focus,
.invoice-html input.invoice-html__control:focus,
.invoice-html textarea.invoice-html__control:focus {
  outline: none;
  border-color: var(--inv-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 12%, transparent);
}

.invoice-html #invoice-customer [data-select-shell] {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  background: #fff !important;
}

.invoice-html #invoice-customer input,
.invoice-html #invoice-customer [role='combobox'] {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.invoice-html #invoice-receivable [data-select-shell] {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  background: #fff !important;
  border-color: var(--inv-primary-border) !important;
}

.invoice-html #invoice-receivable input,
.invoice-html #invoice-receivable [role='combobox'] {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--inv-ink);
}

/* Closed chip overlay: keep the real input text invisible (do not override text-transparent). */
.invoice-html [data-select-shell]:has([data-master-data-overlay]) input,
.invoice-html [data-select-shell]:has([data-master-data-overlay]) [role='combobox'],
.invoice-html [data-testid='sku-select-inline']:has([data-master-data-overlay]) input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.invoice-html__hint {
  font-size: 9.5px;
  color: var(--inv-muted);
  margin-top: 4px;
}

.invoice-html__period {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--inv-primary-border);
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--inv-chip-fg);
}

.invoice-html__period-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theme-success, #16a34a);
  flex-shrink: 0;
}

.invoice-html__doc-total {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--inv-primary);
  line-height: 1.2;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.invoice-html__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  color: var(--inv-label);
}

.invoice-html__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.invoice-html__credit {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--inv-border-soft);
}

.invoice-html__credit-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}

.invoice-html__credit-row span:first-child {
  color: var(--inv-label);
  white-space: nowrap;
}

.invoice-html__credit-row span:last-child {
  font-variant-numeric: tabular-nums;
}

.invoice-html__error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--inv-error);
}

.invoice-html__error-badge {
  width: 13px;
  height: 13px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--inv-error-badge);
  border-radius: 50%;
  line-height: 1;
}

.invoice-html__dashed {
  width: 100%;
  height: 30px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--inv-primary);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--inv-primary) 40%, #fff);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.invoice-html .invoice-html__card-tint .invoice-html__draw-wrap,
.invoice-html .invoice-html__draw-wrap {
  display: block;
  width: 100%;
}

.invoice-html .invoice-html__draw-wrap > button {
  width: 100%;
}

.invoice-html__add-line {
  width: 100%;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--inv-primary);
  background: var(--inv-primary-wash);
  border: 1px dashed color-mix(in srgb, var(--inv-primary) 35%, #fff);
  border-radius: 9px;
  cursor: pointer;
}

/* —— Search / listbox insides: look like HTML inputs —— */
.invoice-html [data-select-shell] {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 9px !important;
  overflow: hidden !important;
  background: var(--inv-fill) !important;
  border: 1px solid var(--inv-border-soft) !important;
  border-radius: 8px !important;
}

/* Hide the search icon only — not the read-only value span in MasterDataReadOnlyField. */
.invoice-html [data-select-shell] > span:first-child:has(svg),
.invoice-html [data-select-shell] > [data-select-search-icon] {
  display: none !important;
}

.invoice-html [data-invoice-line-card] [data-select-shell],
.invoice-html [data-testid='invoice-lines-table'] [data-select-shell],
.invoice-html [data-testid='sku-select-inline'] {
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
  background: var(--inv-fill) !important;
  border: 1px solid var(--inv-border-soft) !important;
}

/* The fixed-height root is the field box here, so the closed overlay and the clear
   button are positioned against it (it carries the padding and the border). */
.invoice-html [data-testid='sku-select-inline'] > [data-sku-select-field] {
  position: static;
}

.invoice-html [data-testid='sku-select-inline'] input {
  height: 27px !important;
  min-height: 27px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.invoice-html .invoice-html__grid button[class*='h-9']:not(.invoice-html__btn-primary):not(.invoice-html__btn-save-new),
.invoice-html .invoice-html__grid button[class*='min-h-[2.25rem]']:not(.invoice-html__btn-primary):not(.invoice-html__btn-save-new) {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  background: var(--inv-fill) !important;
  border: 1px solid var(--inv-border-soft) !important;
  border-radius: 8px !important;
  color: var(--inv-ink) !important;
}

.invoice-html .invoice-html__card-tint button[class*='h-9'],
.invoice-html .invoice-html__card-tint button[class*='min-h-[2.25rem]'] {
  background: #fff !important;
  border-color: var(--inv-primary-border) !important;
  font-size: 11.5px !important;
}

.invoice-html .app-datepicker-input--html,
.invoice-html .app-datepicker-wrap .app-datepicker-input--html {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 34px 0 9px !important;
  font-size: 12px !important;
  background: var(--inv-fill) !important;
  border: 1px solid var(--inv-border-soft) !important;
  border-radius: 8px !important;
}

.invoice-html .app-datepicker-wrap > svg {
  width: 18px !important;
  height: 18px !important;
  padding: 3px;
  color: var(--inv-primary) !important;
  background: color-mix(in srgb, var(--inv-primary) 10%, #fff);
  border-radius: 5px;
  inset-inline-end: 6px !important;
}

.invoice-html .invoice-html__card-tint input,
.invoice-html .invoice-html__card-tint select {
  background: #fff;
  border-color: var(--inv-primary-border);
  color: var(--inv-ink);
}

/* —— Lines table —— */
.invoice-html__lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  border-bottom: 1px solid var(--inv-line);
}

.invoice-html__lines-title {
  font-size: 12px;
  font-weight: 700;
}

.invoice-html__lines-title span {
  color: var(--inv-muted);
  font-weight: 500;
}

.invoice-html__lines-hint {
  font-size: 10px;
  color: var(--inv-placeholder);
  font-variant-numeric: tabular-nums;
}

.invoice-html [data-testid='invoice-lines-table'] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1020px;
}

.invoice-html .payment-allocation-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.invoice-html .payment-allocation-table tbody tr {
  border-top: 1px solid var(--inv-line);
}

.invoice-html [data-testid='invoice-lines-table'] th {
  padding: 6px 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--inv-placeholder) !important;
  border-bottom: 1px solid var(--inv-line) !important;
  background: transparent !important;
  vertical-align: bottom !important;
}

.invoice-html [data-testid='invoice-lines-table'] td {
  padding: 7px 8px !important;
  vertical-align: top !important;
}

.invoice-html [data-testid='invoice-lines-table'] input[type='number'],
.invoice-html [data-testid='invoice-lines-table'] input[type='text']:not([role='combobox']) {
  height: 29px;
  padding: 0 9px;
  font-size: 12px;
  background: var(--inv-fill);
  border: 1px solid var(--inv-border-soft);
  border-radius: 8px;
}

/* Chrome/Safari number inputs ignore text-align while spin buttons occupy the end edge */
.invoice-html [data-testid='invoice-lines-table'] input[type='number'] {
  text-align: right !important;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.invoice-html [data-testid='invoice-lines-table'] input[type='number']::-webkit-outer-spin-button,
.invoice-html [data-testid='invoice-lines-table'] input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.invoice-html [data-testid='invoice-lines-table'] .invoice-html__qty-shell input[type='number'] {
  height: 27px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: right !important;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.invoice-html__amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 29px;
  padding: 0 8px;
  text-align: right;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.invoice-html__field-hint {
  margin-top: 2px;
  font-size: 9px;
  color: var(--inv-placeholder);
  text-align: right;
  white-space: nowrap;
}

.invoice-html__qty-shell {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 29px;
  padding: 0 8px;
  background: var(--inv-fill);
  border: 1px solid var(--inv-border-soft);
  border-radius: 8px;
}

.invoice-html__qty-shell input {
  width: 100%;
  min-width: 0;
  height: 27px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.invoice-html__qty-unit {
  height: 22px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--inv-muted);
  background: transparent;
  border: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 3.25rem;
}

/*
 * Numeric line columns (Qty · Rate · Disc · VAT · Amount).
 * Class is on the th/td itself — do not rely on data-testid nesting or DualLabel
 * shrink-wrapping; DualLabel is display:flex + justify-end so the label hugs the
 * right edge of the column.
 */
.invoice-html th.invoice-html__num,
.invoice-html td.invoice-html__num {
  text-align: right !important;
}

.invoice-html th.invoice-html__num .dual-label,
.invoice-html th.invoice-html__num .invoice-html__num-label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.invoice-html td.invoice-html__num > div {
  width: 100%;
  text-align: right;
}

.invoice-html td.invoice-html__num input,
.invoice-html td.invoice-html__num .invoice-html__qty-shell input {
  text-align: right !important;
}

.invoice-html td.invoice-html__num .invoice-html__field-hint,
.invoice-html td.invoice-html__num [data-testid='price-source-hint'] {
  display: block;
  width: 100%;
  text-align: right !important;
}

.invoice-html td.invoice-html__num .invoice-html__amount {
  display: flex !important;
  width: 100%;
  justify-content: flex-end !important;
  text-align: right !important;
}

.invoice-html td.invoice-html__num button[aria-haspopup='listbox'] {
  display: inline-flex !important;
  width: 100% !important;
  justify-content: flex-end !important;
  text-align: right !important;
  padding-inline: 8px !important;
  gap: 2px !important;
}

.invoice-html td.invoice-html__num button[aria-haspopup='listbox'] > span:first-child {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-html td.invoice-html__num button[aria-haspopup='listbox'] svg {
  width: 12px !important;
  height: 12px !important;
  margin-inline-start: 0 !important;
  flex-shrink: 0;
}

.invoice-html__icon-btn {
  width: 20px;
  height: 20px;
  font-size: 13px;
  line-height: 1;
  color: var(--inv-placeholder);
  background: var(--inv-chip-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.invoice-html__desc-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inv-placeholder);
  white-space: nowrap;
}

.invoice-html__memo {
  width: 100%;
  height: 58px;
  padding: 8px 9px;
  font-size: 12px;
  resize: none;
  background: var(--inv-fill);
  border: 1px solid var(--inv-border-soft);
  border-radius: 9px;
  font-family: inherit;
}

.invoice-html__ait {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--inv-primary) 22%, #fff);
  border-radius: 14px;
  padding: 13px 15px;
}

.invoice-html__journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  border-bottom: 1px solid var(--inv-line);
}

/* View: white fills, not gray */
.invoice-html--readonly input:disabled,
.invoice-html--readonly input[readonly],
.invoice-html--readonly textarea:disabled,
.invoice-html--readonly textarea[readonly],
.invoice-html--readonly button:disabled,
.invoice-html--readonly [aria-disabled='true'] {
  background: #fff !important;
  opacity: 1 !important;
  color: var(--inv-ink) !important;
  cursor: default !important;
}

.invoice-html--readonly [data-select-shell]:has([data-master-data-overlay]) input,
.invoice-html--readonly [data-select-shell]:has([data-master-data-overlay]) [role='combobox'],
.invoice-html--readonly [data-testid='sku-select-inline']:has([data-master-data-overlay]) input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Portaled calendar — HTML dark month chrome */
.invoice-html-calendar.react-datepicker {
  width: 268px !important;
  border: 1px solid var(--inv-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 5px rgba(25, 24, 35, 0.05), 0 20px 44px rgba(25, 24, 35, 0.2) !important;
  overflow: hidden;
  font-family: var(--theme-font-family, inherit) !important;
}

.invoice-html-calendar .react-datepicker__header {
  background: color-mix(in srgb, var(--inv-primary) 42%, var(--inv-ink)) !important;
  border-bottom: none !important;
  padding: 10px 12px 8px !important;
}

.invoice-html-calendar .react-datepicker__current-month,
.invoice-html-calendar .react-datepicker-year-header {
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.invoice-html-calendar .react-datepicker__navigation {
  top: 12px !important;
}

.invoice-html-calendar .react-datepicker__navigation-icon::before {
  border-color: color-mix(in srgb, var(--inv-primary) 28%, #fff) !important;
}

.invoice-html-calendar .react-datepicker__day-name {
  color: var(--inv-placeholder) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
}

.invoice-html-calendar .react-datepicker__day {
  height: 29px !important;
  width: 29px !important;
  line-height: 29px !important;
  font-size: 11.5px !important;
  border-radius: 9px !important;
  margin: 1px !important;
}

.invoice-html-calendar select {
  background: color-mix(in srgb, var(--inv-primary) 42%, var(--inv-ink)) !important;
  color: color-mix(in srgb, var(--inv-primary) 28%, #fff) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}
/**
 * Report HTML chrome — 1:1 layout from Rules/Reports_UI/Design Template.html.
 *
 * Fonts: Settings → Appearance (--theme-font-family) only (no Manrope / IBM Plex Mono).
 * Colours: only theme tokens / primary mixes (no prototype lilac or brand purple hex).
 */

.report-html.report-page-shell {
  --rpt-page: color-mix(in srgb, var(--theme-heading, #111827) 3.5%, var(--theme-general-bg, #f9fafb));
  --rpt-ink: var(--theme-heading, #111827);
  --rpt-muted: var(--theme-muted, #6b7280);
  --rpt-label: var(--theme-label, #374151);
  --rpt-border: var(--theme-border, #e5e7eb);
  --rpt-border-soft: color-mix(in srgb, var(--theme-border, #e5e7eb) 65%, #fff);
  --rpt-line: color-mix(in srgb, var(--theme-border, #e5e7eb) 45%, #fff);
  --rpt-fill: color-mix(in srgb, var(--theme-surface, #f9fafb) 55%, #fff);
  --rpt-primary: var(--primary-color, var(--theme-button-bg));
  --rpt-primary-soft: color-mix(in srgb, var(--rpt-primary) 10%, #fff);
  --rpt-primary-wash: color-mix(in srgb, var(--rpt-primary) 6%, #fff);
  --rpt-primary-border: color-mix(in srgb, var(--rpt-primary) 28%, var(--rpt-border));
  --rpt-primary-deep: color-mix(in srgb, var(--rpt-primary) 72%, var(--rpt-ink));
  --rpt-bottom: var(--theme-heading, #111827);
  --rpt-bottom-surface: color-mix(in srgb, var(--rpt-bottom) 88%, #fff);
  --rpt-bottom-fg: color-mix(in srgb, #fff 72%, var(--rpt-bottom));
  --rpt-bottom-fg-dim: color-mix(in srgb, #fff 55%, var(--rpt-bottom));
  --rpt-placeholder: color-mix(in srgb, var(--theme-muted, #6b7280) 72%, #fff);
  --rpt-chip-bg: color-mix(in srgb, var(--rpt-primary) 6%, var(--rpt-fill));
  --rpt-chip-fg: color-mix(in srgb, var(--rpt-ink) 72%, var(--rpt-muted));
  font-family: var(--theme-font-family, inherit);
  color: var(--rpt-ink);
  -webkit-font-smoothing: antialiased;
  background: var(--rpt-page) !important;
  border: 1px solid var(--rpt-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.report-html,
.report-html * {
  box-sizing: border-box;
}

.report-html ::-moz-placeholder {
  color: var(--rpt-placeholder);
}

.report-html ::placeholder {
  color: var(--rpt-placeholder);
}

.report-html .report-html__title-row {
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 9px 16px;
  background: #fff;
  border-bottom: 1px solid var(--rpt-border);
}

.report-html .report-html__title-lead {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.report-html .report-html__accent {
  width: 3px;
  align-self: stretch;
  min-height: 44px;
  background: var(--rpt-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.report-html .report-html__company {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rpt-primary);
  margin: 0;
  white-space: nowrap;
}

.report-html .report-html__title {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--rpt-ink);
  white-space: normal;
}

.report-html .report-html__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}

.report-html .report-html__period {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rpt-label);
  white-space: nowrap;
}

.report-html .report-html__basis {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 700;
  color: var(--rpt-primary-deep);
  background: var(--rpt-primary-soft);
  border: 1px solid color-mix(in srgb, var(--rpt-primary) 22%, var(--rpt-border));
  border-radius: 9px;
  white-space: nowrap;
}

.report-html .report-html__basis-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rpt-primary);
  flex-shrink: 0;
}

.report-html .report-html__title-spacer {
  flex: 1 1 20px;
  min-width: 20px;
}

.report-html .report-html__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.report-html .report-html__btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rpt-chip-fg);
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  white-space: nowrap;
}

.report-html .report-html__btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--rpt-primary) 40%, var(--rpt-border));
  color: var(--rpt-primary);
}

.report-html .report-html__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.report-html .report-html__btn--icon {
  width: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}

.report-html .report-html__btn--icon[aria-pressed='true'] {
  color: var(--rpt-primary);
  background: var(--rpt-primary-soft);
  border-color: var(--rpt-primary-border);
}

.report-html .report-html__btn--tint {
  color: var(--rpt-primary);
  background: var(--rpt-primary-soft);
  border-color: var(--rpt-primary-border);
  padding: 0 13px;
}

.report-html .report-html__btn--primary {
  color: var(--theme-button-text, #fff);
  background: var(--rpt-primary);
  border: none;
  height: 36px;
  min-width: 92px;
  padding: 0 22px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(25, 24, 35, 0.12), 0 8px 16px color-mix(in srgb, var(--rpt-primary) 32%, transparent);
}

.report-html .report-html__btn--primary:hover:not(:disabled) {
  color: var(--theme-button-text, #fff);
  filter: brightness(1.05);
}

.report-html .report-html__export-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 70;
  min-width: 160px;
  margin-top: 5px;
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 13px;
  box-shadow: 0 2px 5px rgba(25, 24, 35, 0.05), 0 18px 40px rgba(25, 24, 35, 0.16);
  padding: 5px;
}

.report-html .report-html__export-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rpt-ink);
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: start;
}

.report-html .report-html__export-item:hover:not(:disabled) {
  background: var(--rpt-primary-wash);
}

.report-html .report-html__export-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-inline-start: 2px;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  color: currentColor;
  opacity: 0.85;
}

.report-html .report-html__export-hint {
  font-size: 10px;
  color: var(--rpt-placeholder);
  font-variant-numeric: tabular-nums;
}

.report-html .report-html__canvas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 16px;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  /* Vertical scroll on canvas; horizontal overflow confined to .report-html__table-wrap */
  overflow-x: hidden;
  overflow-y: auto;
}

.report-html .report-html__card {
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 13px;
}

.report-html .report-html__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 13px;
  flex-shrink: 0;
}

.report-html .report-html__micro-label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rpt-muted);
  margin-bottom: 3px;
}

.report-html .report-html__micro-label--tint {
  color: var(--rpt-primary);
}

.report-html .report-html__filter-field {
  width: 150px;
  min-width: 0;
  flex: 0 1 auto;
}

.report-html .report-html__filter-field--date {
  width: 158px;
}

.report-html .report-html__filter-field--wide {
  flex: 1 1 190px;
  width: auto;
  min-width: 0;
}

.report-html .report-html__filter-field--group {
  width: 168px;
}

.report-html .report-html__filter-field--sort {
  width: 152px;
}

.report-html .report-html__filter-field--dir {
  width: 128px;
}

.report-html .report-html__filter-field--density {
  width: 210px;
}

.report-html .report-html__vrule {
  width: 1px;
  align-self: stretch;
  min-height: 36px;
  background: var(--rpt-line);
  flex-shrink: 0;
}

.report-html .report-html__trigger,
.report-html .report-html__filter-field .txn-html-select-trigger,
.report-html .report-html__filter-field button[class*='txn'] {
  height: 30px;
  border-radius: 8px;
}

.report-html .report-html__trigger-tint {
  background: var(--rpt-primary-wash) !important;
  border-color: var(--rpt-primary-border) !important;
  font-weight: 700 !important;
  color: var(--rpt-primary-deep) !important;
}

.report-html .report-html__seg {
  display: flex;
  gap: 3px;
  height: 30px;
  padding: 3px;
  background: var(--rpt-primary-wash);
  border: 1px solid var(--rpt-primary-border);
  border-radius: 8px;
}

.report-html .report-html__seg button {
  flex: 1;
  height: 100%;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--rpt-label);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.report-html .report-html__seg button[aria-pressed='true'] {
  color: var(--theme-button-text, #fff);
  background: var(--rpt-primary);
}

.report-html .report-html__chip-field {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: var(--rpt-fill);
  border: 1px solid var(--rpt-border-soft);
  border-radius: 8px;
}

.report-html .report-html__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 4px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rpt-primary-deep);
  background: color-mix(in srgb, var(--rpt-primary) 8%, #fff);
  border: 1px solid var(--rpt-primary-border);
  border-radius: 10px;
  white-space: nowrap;
  max-width: 11rem;
}

.report-html .report-html__chip button {
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  color: var(--rpt-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.report-html .report-html__kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 13px;
  overflow: hidden;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
}

.report-html .report-html__kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 0;
  border: 0;
  border-inline-start: 1px solid var(--rpt-line);
  background: #fff;
}

.report-html .report-html__kpi:first-child {
  border-inline-start: 0;
}

.report-html .report-html__kpi--accent {
  background: var(--rpt-primary-wash);
  border-color: var(--rpt-line);
}

.report-html .report-html__kpi-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rpt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-html .report-html__kpi--accent .report-html__kpi-label {
  color: var(--rpt-primary);
}

.report-html .report-html__kpi-value {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--rpt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-html .report-html__kpi--accent .report-html__kpi-value {
  color: var(--rpt-primary);
}

.report-html .report-html__kpi-note {
  font-size: 9.5px;
  color: var(--rpt-placeholder);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-html .report-html__results-card {
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 13px;
  margin-bottom: 14px;
  min-width: 0;
  max-width: 100%;
  /* Do not use overflow:hidden — it traps sticky thead and can steal vertical scroll from the canvas. */
  overflow: visible;
}

.report-html .report-html__results-body {
  min-width: 0;
  max-width: 100%;
}

/* Balance Sheet (and any report with this class): title + filters stay put; only the results body scrolls. */
.report-html.report-html--results-scroll .report-html__canvas {
  overflow-y: hidden;
}

.report-html.report-html--results-scroll .report-html__filters,
.report-html.report-html--results-scroll .report-html__kpi-strip {
  flex-shrink: 0;
}

.report-html.report-html--results-scroll .report-html__results-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0;
}

.report-html.report-html--results-scroll .report-html__results-head {
  flex-shrink: 0;
}

.report-html.report-html--results-scroll .report-html__results-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.report-html.report-html--is-fullscreen,
.report-html:fullscreen,
.report-html:-webkit-full-screen {
  position: fixed;
  inset: 0;
  z-index: 10050;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
}

.report-html .report-html__results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rpt-line);
  background: #fff;
}

.report-html .report-html__results-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--rpt-ink);
}

.report-html .report-html__results-meta {
  font-size: 11px;
  color: var(--rpt-muted);
}

.report-html .report-html__results-hint {
  font-size: 10px;
  color: var(--rpt-placeholder);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-html .report-html__scope-chip {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--rpt-chip-fg);
  background: var(--rpt-chip-bg);
  border: 1px solid var(--rpt-line);
  border-radius: 8px;
}

.report-html .report-html__table-wrap {
  background: transparent;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  /* Horizontal-only: overflow-y must not be visible (CSS would promote it to auto and trap the wheel). */
  overflow-x: auto;
  overflow-y: clip;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  /* LTR scroll mechanics so wheel/probe can reach the end under document RTL (INV-C-002). */
  direction: ltr;
}
html[dir='rtl'] .report-html .report-html__table-wrap > .report-html__table,
html[dir='rtl'] .report-html .report-html__table-wrap > table {
  direction: rtl;
}

/* Arabic: table flows right-to-left; amounts keep left-to-right digit and sign order. */
html[dir='rtl'] .report-html td.tabular-nums,
html[dir='rtl'] .report-html th.tabular-nums {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir='rtl'] .report-html td.tabular-nums.text-end,
html[dir='rtl'] .report-html th.tabular-nums.text-end {
  text-align: left;
}
html[dir='rtl'] .report-html td.tabular-nums.text-start,
html[dir='rtl'] .report-html th.tabular-nums.text-start {
  text-align: right;
}

.report-html .report-html__drilldown-subtotal > td {
  border-top: 2px solid var(--rpt-border);
  background: var(--rpt-chip-bg);
}

.report-html .report-html__table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
  border-spacing: 0;
}

.report-html .report-html__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--rpt-border);
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rpt-placeholder);
  white-space: nowrap;
  cursor: pointer;
}

.report-html .report-html__table thead th:hover {
  color: var(--rpt-primary);
}

.report-html .report-html__table thead th[data-sorted='true'] {
  color: var(--rpt-primary);
  background: var(--rpt-primary-wash);
}

.report-html .report-html__table tbody td {
  padding: 9px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--rpt-line);
}

.report-html.report-html--compact .report-html__table tbody td {
  padding: 5px 10px;
  font-size: 11.5px;
}

.report-html .report-html__table tbody tr:nth-child(odd) {
  background: var(--rpt-fill);
}

.report-html .report-html__table tbody tr:nth-child(even) {
  background: #fff;
}

.report-html .report-html__group-row td {
  background: var(--rpt-primary-wash) !important;
  color: var(--rpt-primary);
  font-weight: 700;
  border-top: 0;
}

.report-html .report-html__subtotal-row td,
.report-html .report-html__total-row td {
  font-weight: 700;
  border-top: 1px solid var(--rpt-border);
}

.report-html .report-html__total-row td {
  color: var(--rpt-primary);
}

.report-html .report-html__footnote {
  padding: 8px 14px;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--rpt-placeholder);
  border-top: 1px solid var(--rpt-line);
}

.report-html .report-html__empty {
  text-align: center;
  padding: 46px 16px;
}

.report-html .report-html__empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--rpt-chip-fg);
}

.report-html .report-html__empty-hint {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--rpt-muted);
}

.report-html .report-html__bottom {
  position: sticky;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--rpt-bottom);
  color: var(--rpt-bottom-fg);
}

.report-html .report-html__bottom-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rpt-bottom-fg-dim);
  white-space: nowrap;
}

.report-html .report-html__bottom-spacer {
  flex: 1 1 auto;
}

.report-html .report-html__bottom-date {
  font-size: 10px;
  color: var(--rpt-bottom-fg-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-html .report-html__pill {
  height: 23px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--rpt-bottom-surface);
  background: var(--rpt-bottom-surface);
  color: var(--rpt-bottom-fg);
  cursor: pointer;
}

.report-html .report-html__pill[aria-pressed='true'] {
  background: var(--rpt-primary);
  border-color: color-mix(in srgb, var(--rpt-primary) 70%, #fff);
  color: var(--theme-button-text, #fff);
}

.report-html .report-html__density {
  display: flex;
  margin-inline-start: 0;
  border-radius: 8px;
  overflow: visible;
  border: 0;
  background: var(--rpt-bottom-surface);
  padding: 2px;
}

.report-html .report-html__density button {
  height: 23px;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rpt-bottom-fg);
  cursor: pointer;
}

.report-html .report-html__density button[aria-pressed='true'] {
  background: var(--rpt-primary);
  color: var(--theme-button-text, #fff);
}

.report-html .report-html__drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(25, 24, 35, 0.34);
}

.report-html .report-html__drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 81;
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  background: var(--rpt-page);
  border-inline-start: 1px solid var(--rpt-border);
  box-shadow: -18px 0 50px rgba(25, 24, 35, 0.22);
}

.report-html .report-html__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  background: #fff;
  border-bottom: 1px solid var(--rpt-border);
}

.report-html .report-html__drawer-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rpt-muted);
}

.report-html .report-html__drawer-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--rpt-ink);
}

.report-html .report-html__drawer-close {
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--rpt-label);
  background: var(--rpt-chip-bg);
  border: 1px solid var(--rpt-line);
  border-radius: 9px;
  cursor: pointer;
}

.report-html .report-html__drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 15px 18px;
}

.report-html .report-html__drawer-card {
  background: #fff;
  border: 1px solid var(--rpt-border);
  border-radius: 14px;
  padding: 13px 15px;
}

.report-html .report-html__drawer-card + .report-html__drawer-card {
  margin-top: 10px;
}

.report-html .report-html__drawer-card-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rpt-muted);
}

.report-html .report-html__drawer-card-hint {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--rpt-muted);
  margin: 4px 0 8px;
}

.report-html .report-html__drawer-foot {
  display: flex;
  gap: 6px;
  padding: 11px 15px;
  background: #fff;
  border-top: 1px solid var(--rpt-border);
}

.report-html .report-html__drawer-foot .report-html__btn {
  flex: 1;
  height: 32px;
}

.report-html .report-html__suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  color: var(--rpt-ink);
  background: var(--rpt-fill);
  border: 1px solid var(--rpt-border-soft);
}

.report-html .report-html__number-input {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.report-html .report-html__number-input[type='number'] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.report-html .report-html__number-input[type='number']::-webkit-outer-spin-button,
.report-html .report-html__number-input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.report-html .report-html__suggest[aria-pressed='true'] {
  color: var(--rpt-primary-deep);
  background: var(--rpt-primary-soft);
  border-color: var(--rpt-primary-border);
}

.report-html .report-html__col-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--rpt-border-soft);
  border-radius: 9px;
  background: #fff;
}

.report-html .report-html__col-row + .report-html__col-row {
  margin-top: 3px;
}

.report-html .report-html__col-row input[type='checkbox'] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  display: grid;
  place-content: center;
  border-radius: 5px;
  border: 1px solid var(--rpt-border);
  background: #fff;
  cursor: pointer;
}

.report-html .report-html__col-row input[type='checkbox']:checked {
  background: var(--rpt-primary);
  border-color: var(--rpt-primary);
}

.report-html .report-html__col-row input[type='checkbox']:checked::after {
  content: '✓';
  color: var(--theme-button-text, #fff);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

@media print {
  .report-html .report-html__actions,
  .report-html .report-html__filters,
  .report-html .report-html__bottom,
  .report-html .report-html__drawer-scrim,
  .report-html .report-html__drawer {
    display: none !important;
  }

  .report-html.report-page-shell {
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .report-html .report-html__title-row {
    position: static;
    border-bottom: 0;
    padding: 0 0 10px;
  }

  .report-html .report-html__canvas {
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .report-html .report-html__kpi-strip,
  .report-html .report-html__results-card {
    border-radius: 0;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .report-html.report-html--results-scroll .report-html__canvas,
  .report-html.report-html--results-scroll .report-html__results-card,
  .report-html.report-html--results-scroll .report-html__results-body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .report-html .report-html__table-wrap {
    overflow: visible !important;
  }

  .report-html .report-html__table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto;
  }

  .report-html .report-html__table thead th,
  .report-html .report-html__table tbody td {
    white-space: normal !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 4px 5px !important;
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }

  .report-html .report-html__table thead th {
    font-size: 7.5px !important;
  }

  body:has(.report-html) header,
  body:has(.report-html) aside,
  body:has(.report-html) .app-create-fab-wrap {
    display: none !important;
  }

  body:has(.report-html) #app-main-content {
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

.report-html .app-datepicker-input--html,
.report-html .app-datepicker-wrap .app-datepicker-input--html {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 34px 0 9px !important;
  font-size: 12px !important;
  background: var(--rpt-fill) !important;
  border: 1px solid var(--rpt-border-soft) !important;
  border-radius: 8px !important;
  font-variant-numeric: tabular-nums;
}

.report-html .app-datepicker-wrap > svg {
  width: 18px !important;
  height: 18px !important;
  padding: 3px;
  color: var(--rpt-primary) !important;
  background: color-mix(in srgb, var(--rpt-primary) 10%, #fff);
  border-radius: 5px;
  inset-inline-end: 6px !important;
}

.report-html .report-html__filter-field .txn-html-select-trigger,
.report-html .report-html__filter-field button[class*='txn'] {
  height: 30px;
  min-height: 30px;
  border-radius: 8px;
  background: var(--rpt-fill);
  border: 1px solid var(--rpt-border-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
}

.report-html .report-html__filter-field .report-html__trigger-tint,
.report-html .report-html__filter-field button.report-html__trigger-tint {
  background: var(--rpt-primary-wash) !important;
  border-color: var(--rpt-primary-border) !important;
}
.theme-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.theme-unsaved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--theme-warning, #d97706) 35%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-warning, #d97706) 12%, var(--theme-popup-bg, #fff));
  color: var(--theme-label, #374151);
  font-size: 0.875rem;
}

.theme-unsaved__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.theme-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--theme-border, #E5E7EB);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 8%, var(--theme-popup-bg, #fff)),
    var(--theme-popup-bg, #fff)
  );
}

.theme-hero__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--theme-popup-heading-color, #111827);
}

.theme-hero__source {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--theme-muted, #6B7280);
}

.theme-hero__swatches {
  display: flex;
  margin-top: 0.75rem;
}

.theme-hero__swatch {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  border: 2px solid var(--theme-popup-bg, #fff);
  margin-inline-end: -0.35rem;
  box-shadow: 0 0 0 1px var(--theme-border, #E5E7EB);
}

.theme-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.theme-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--theme-border, #E5E7EB);
  border-radius: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--theme-popup-bg, #fff);
  color: var(--theme-label, #374151);
}

.theme-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.theme-btn--primary {
  border-color: transparent;
  background: var(--theme-button-bg, var(--primary-color));
  color: var(--theme-button-text, #fff);
}

.theme-btn--ghost:hover:not(:disabled) {
  background: var(--theme-surface, #F9FAFB);
}

.theme-intro {
  margin: 0;
  font-size: 0.875rem;
  color: var(--theme-muted, #6B7280);
}

.theme-copy-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--theme-border, #E5E7EB);
  background: var(--theme-surface, #F9FAFB);
}

.theme-copy-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.theme-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

.theme-preset-card {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: start;
  border: 1px solid var(--theme-border, #E5E7EB);
  border-radius: 0.85rem;
  padding: 0.75rem;
  background: var(--theme-popup-bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-preset-card:hover {
  border-color: color-mix(in srgb, var(--theme-button-bg, var(--primary-color)) 45%, var(--theme-border));
}

.theme-preset-card--active {
  border-color: var(--theme-button-bg, var(--primary-color));
  box-shadow: 0 0 0 1px var(--theme-button-bg, var(--primary-color));
}

.theme-preset-card__swatches {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

.theme-preset-card__swatches > span {
  flex: 1;
  height: 0.55rem;
  border-radius: 999px;
}

.theme-preset-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--theme-label, #374151);
}

.theme-preview {
  border-radius: 1rem;
  border: 1px solid var(--theme-border, #E5E7EB);
  padding: 0.85rem;
}

.theme-preview__caption {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-muted, #6B7280);
}

.theme-preview__shell {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  min-height: 7.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--theme-border, #E5E7EB);
}

.theme-preview__sidebar {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.7rem;
}

.theme-preview__nav,
.theme-preview__nav-muted {
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
}

.theme-preview__main {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.theme-preview__heading {
  font-size: 0.9rem;
  font-weight: 600;
}

.theme-preview__muted {
  margin: 0;
  font-size: 0.75rem;
}

.theme-preview__btn {
  align-self: flex-start;
  border: none;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: default;
}

.theme-group {
  border: 1px solid var(--theme-border, #E5E7EB);
  border-radius: 0.85rem;
  padding: 1rem;
  background: var(--theme-surface, #F9FAFB);
}

.theme-group__title {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-label, #374151);
}

.theme-group__help {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: var(--theme-muted, #6B7280);
}

.theme-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.85rem;
}

.theme-field__label {
  display: block;
  font-size: 0.75rem;
  color: var(--theme-muted, #6B7280);
  margin-bottom: 0.35rem;
}

.theme-field__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-field__swatch {
  width: 2.25rem;
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--theme-border, #E5E7EB);
  padding: 0;
  cursor: pointer;
  background: transparent;
}

.theme-field__hex,
.theme-field__text {
  width: 100%;
  max-width: 12rem;
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--theme-border, #E5E7EB);
  padding: 0 0.55rem;
  font-size: 0.8125rem;
  background: var(--theme-popup-bg, #fff);
  color: var(--theme-label, #374151);
}

.theme-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--theme-muted, #6B7280);
}

@media (max-width: 640px) {
  .theme-preview__shell {
    grid-template-columns: 1fr;
  }
}
*, ::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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

input::-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;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

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

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

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

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

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

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

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

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

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

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.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-y-0 {
  top: 0px !important;
  bottom: 0px !important;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.\!end-0 {
  inset-inline-end: 0px !important;
}
.\!start-auto {
  inset-inline-start: auto !important;
}
.-left-20 {
  left: -5rem;
}
.-left-\[7px\] {
  left: -7px;
}
.-right-1 {
  right: -0.25rem;
}
.-right-20 {
  right: -5rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1\/4 {
  bottom: 25%;
}
.bottom-32 {
  bottom: 8rem;
}
.bottom-44 {
  bottom: 11rem;
}
.end-0 {
  inset-inline-end: 0px;
}
.end-2 {
  inset-inline-end: 0.5rem;
}
.end-2\.5 {
  inset-inline-end: 0.625rem;
}
.end-4 {
  inset-inline-end: 1rem;
}
.end-8 {
  inset-inline-end: 2rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1\/2 {
  left: 50%;
}
.left-20 {
  left: 5rem;
}
.left-24 {
  left: 6rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-20 {
  right: 5rem;
}
.right-32 {
  right: 8rem;
}
.start-0 {
  inset-inline-start: 0px;
}
.start-2\.5 {
  inset-inline-start: 0.625rem;
}
.start-3 {
  inset-inline-start: 0.75rem;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/4 {
  top: 25%;
}
.top-20 {
  top: 5rem;
}
.top-4 {
  top: 1rem;
}
.top-40 {
  top: 10rem;
}
.top-\[calc\(var\(--header-height\2c 4rem\)\+0\.25rem\)\] {
  top: calc(var(--header-height,4rem) + 0.25rem);
}
.isolate {
  isolation: isolate;
}
.\!z-\[80\] {
  z-index: 80 !important;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[20\] {
  z-index: 20;
}
.z-\[21\] {
  z-index: 21;
}
.z-\[22\] {
  z-index: 22;
}
.z-\[23\] {
  z-index: 23;
}
.z-\[24\] {
  z-index: 24;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[65\] {
  z-index: 65;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[90\] {
  z-index: 90;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.m-0 {
  margin: 0px;
}
.m-3 {
  margin: 0.75rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-\[15px\] {
  margin-left: -15px;
  margin-right: -15px;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-\[-4px\] {
  margin-left: -4px;
  margin-right: -4px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.\!mb-0 {
  margin-bottom: 0px !important;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-3\.5 {
  margin-bottom: 0.875rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[-4px\] {
  margin-bottom: -4px;
}
.me-1 {
  margin-inline-end: 0.25rem;
}
.me-1\.5 {
  margin-inline-end: 0.375rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-auto {
  margin-right: auto;
}
.ms-0\.5 {
  margin-inline-start: 0.125rem;
}
.ms-1 {
  margin-inline-start: 0.25rem;
}
.ms-1\.5 {
  margin-inline-start: 0.375rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.ms-3 {
  margin-inline-start: 0.75rem;
}
.ms-auto {
  margin-inline-start: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-\[7px\] {
  margin-top: 7px;
}
.box-border {
  box-sizing: border-box;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.\!flex {
  display: flex !important;
}
.flex {
  display: flex;
}
.\!inline-flex {
  display: inline-flex !important;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.\!h-8 {
  height: 2rem !important;
}
.\!h-9 {
  height: 2.25rem !important;
}
.\!h-\[29px\] {
  height: 29px !important;
}
.\!h-\[30px\] {
  height: 30px !important;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[13px\] {
  height: 13px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[29px\] {
  height: 29px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[3px\] {
  height: 3px;
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-16 {
  max-height: 4rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-5 {
  max-height: 1.25rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[28rem\] {
  max-height: 28rem;
}
.max-h-\[480px\] {
  max-height: 480px;
}
.max-h-\[50vh\] {
  max-height: 50vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[720px\] {
  max-height: 720px;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[min\(70vh\2c 28rem\)\] {
  max-height: min(70vh, 28rem);
}
.max-h-\[min\(70vh\2c 34rem\)\] {
  max-height: min(70vh, 34rem);
}
.\!min-h-\[2\.25rem\] {
  min-height: 2.25rem !important;
}
.\!min-h-\[2\.75rem\] {
  min-height: 2.75rem !important;
}
.\!min-h-\[29px\] {
  min-height: 29px !important;
}
.\!min-h-\[2rem\] {
  min-height: 2rem !important;
}
.\!min-h-\[30px\] {
  min-height: 30px !important;
}
.\!min-h-\[36px\] {
  min-height: 36px !important;
}
.\!min-h-\[3rem\] {
  min-height: 3rem !important;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-8 {
  min-height: 2rem;
}
.min-h-9 {
  min-height: 2.25rem;
}
.min-h-\[1\.125rem\] {
  min-height: 1.125rem;
}
.min-h-\[1\.5rem\] {
  min-height: 1.5rem;
}
.min-h-\[110px\] {
  min-height: 110px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[12rem\] {
  min-height: 12rem;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[2\.25rem\] {
  min-height: 2.25rem;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}
.min-h-\[2\.75rem\] {
  min-height: 2.75rem;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[280px\] {
  min-height: 280px;
}
.min-h-\[2rem\] {
  min-height: 2rem;
}
.min-h-\[3\.5rem\] {
  min-height: 3.5rem;
}
.min-h-\[30px\] {
  min-height: 30px;
}
.min-h-\[32px\] {
  min-height: 32px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[4rem\] {
  min-height: 4rem;
}
.min-h-\[50vh\] {
  min-height: 50vh;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-36 {
  width: 9rem !important;
}
.\!w-40 {
  width: 10rem !important;
}
.\!w-\[10\.5rem\] {
  width: 10.5rem !important;
}
.\!w-full {
  width: 100% !important;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-1\/5 {
  width: 20%;
}
.w-1\/6 {
  width: 16.666667%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/5 {
  width: 40%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/5 {
  width: 60%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-96 {
  width: 24rem;
}
.w-\[1\.15rem\] {
  width: 1.15rem;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[104px\] {
  width: 104px;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[112px\] {
  width: 112px;
}
.w-\[118px\] {
  width: 118px;
}
.w-\[12\%\] {
  width: 12%;
}
.w-\[120px\] {
  width: 120px;
}
.w-\[124px\] {
  width: 124px;
}
.w-\[128px\] {
  width: 128px;
}
.w-\[130px\] {
  width: 130px;
}
.w-\[13px\] {
  width: 13px;
}
.w-\[14\%\] {
  width: 14%;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[16\%\] {
  width: 16%;
}
.w-\[18\%\] {
  width: 18%;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[34px\] {
  width: 34px;
}
.w-\[36px\] {
  width: 36px;
}
.w-\[60px\] {
  width: 60px;
}
.w-\[7\.5rem\] {
  width: 7.5rem;
}
.w-\[70px\] {
  width: 70px;
}
.w-\[72px\] {
  width: 72px;
}
.w-\[74px\] {
  width: 74px;
}
.w-\[76px\] {
  width: 76px;
}
.w-\[78px\] {
  width: 78px;
}
.w-\[7rem\] {
  width: 7rem;
}
.w-\[90px\] {
  width: 90px;
}
.w-\[96px\] {
  width: 96px;
}
.w-\[9rem\] {
  width: 9rem;
}
.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-64 {
  min-width: 16rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[128px\] {
  min-width: 128px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[13rem\] {
  min-width: 13rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[14rem\] {
  min-width: 14rem;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[15rem\] {
  min-width: 15rem;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[2\.75rem\] {
  min-width: 2.75rem;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20rem\] {
  min-width: 20rem;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[22rem\] {
  min-width: 22rem;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[3\.25rem\] {
  min-width: 3.25rem;
}
.min-w-\[320px\] {
  min-width: 320px;
}
.min-w-\[360px\] {
  min-width: 360px;
}
.min-w-\[4\.5rem\] {
  min-width: 4.5rem;
}
.min-w-\[4\.75rem\] {
  min-width: 4.75rem;
}
.min-w-\[56rem\] {
  min-width: 56rem;
}
.min-w-\[5rem\] {
  min-width: 5rem;
}
.min-w-\[64rem\] {
  min-width: 64rem;
}
.min-w-\[68rem\] {
  min-width: 68rem;
}
.min-w-\[6rem\] {
  min-width: 6rem;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[72rem\] {
  min-width: 72rem;
}
.min-w-\[760px\] {
  min-width: 760px;
}
.min-w-\[860px\] {
  min-width: 860px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[96px\] {
  min-width: 96px;
}
.min-w-\[9rem\] {
  min-width: 9rem;
}
.min-w-full {
  min-width: 100%;
}
.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[100px\] {
  max-width: 100px;
}
.max-w-\[10rem\] {
  max-width: 10rem;
}
.max-w-\[11rem\] {
  max-width: 11rem;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[1600px\] {
  max-width: 1600px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[1800px\] {
  max-width: 1800px;
}
.max-w-\[18rem\] {
  max-width: 18rem;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[28rem\] {
  max-width: 28rem;
}
.max-w-\[40\%\] {
  max-width: 40%;
}
.max-w-\[7rem\] {
  max-width: 7rem;
}
.max-w-\[9rem\] {
  max-width: 9rem;
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-\[min\(100vw-2rem\2c 22rem\)\] {
  max-width: min(100vw - 2rem, 22rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-\[2\] {
  flex: 2;
}
.flex-\[3\] {
  flex: 3;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.basis-40 {
  flex-basis: 10rem;
}
.basis-64 {
  flex-basis: 16rem;
}
.table-fixed {
  table-layout: fixed;
}
.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-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-y-2 {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 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-x-1 {
  --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));
}
.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-5 {
  --tw-translate-x: 1.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));
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  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 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-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-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));
}
.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));
}
.scale-\[0\.98\] {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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 ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@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 !important;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.scroll-mt-4 {
  scroll-margin-top: 1rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[2rem_1fr\] {
  grid-template-columns: 2rem 1fr;
}
.grid-cols-\[2rem_minmax\(0\2c 1fr\)_10\.5rem\] {
  grid-template-columns: 2rem minmax(0,1fr) 10.5rem;
}
.grid-cols-\[2rem_minmax\(7rem\2c 1\.1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_10\.5rem\] {
  grid-template-columns: 2rem minmax(7rem,1.1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) 10.5rem;
}
.grid-cols-\[2rem_minmax\(7rem\2c 1\.1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_10\.5rem_10\.5rem\] {
  grid-template-columns: 2rem minmax(7rem,1.1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) 10.5rem 10.5rem;
}
.grid-cols-\[2rem_minmax\(7rem\2c 1\.1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_6\.25rem_10\.5rem_10\.5rem\] {
  grid-template-columns: 2rem minmax(7rem,1.1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) 6.25rem 10.5rem 10.5rem;
}
.grid-cols-\[2rem_minmax\(7rem\2c 1\.1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_minmax\(5\.5rem\2c 1fr\)_6\.25rem_10\.5rem_10\.5rem_10\.5rem\] {
  grid-template-columns: 2rem minmax(7rem,1.1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) minmax(5.5rem,1fr) 6.25rem 10.5rem 10.5rem 10.5rem;
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)\] {
  grid-template-columns: auto minmax(0,1fr);
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.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-start {
  justify-content: flex-start;
}
.\!justify-end {
  justify-content: flex-end !important;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[5px\] {
  gap: 5px;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-2\.5 {
  row-gap: 0.625rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-theme-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--theme-border);
}
.self-start {
  align-self: flex-start;
}
.justify-self-start {
  justify-self: start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-clip {
  overflow-y: clip;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.overscroll-x-contain {
  overscroll-behavior-x: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-pretty {
  text-wrap: pretty;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.\!rounded-\[9px\] {
  border-radius: 9px !important;
}
.\!rounded-lg {
  border-radius: 0.5rem !important;
}
.\!rounded-md {
  border-radius: 0.375rem !important;
}
.\!rounded-xl {
  border-radius: 0.75rem !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[13px\] {
  border-radius: 13px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-\[9px\] {
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
}
.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-se-lg {
  border-start-end-radius: 0.5rem;
}
.rounded-ss-lg {
  border-start-start-radius: 0.5rem;
}
.rounded-tr-lg {
  border-top-right-radius: 0.5rem;
}
.\!border-0 {
  border-width: 0px !important;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-e {
  border-inline-end-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-s {
  border-inline-start-width: 1px;
}
.border-s-4 {
  border-inline-start-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.\!border-error {
  border-color: var(--theme-error) !important;
}
.border-\[color\:var\(--theme-border\)\] {
  border-color: var(--theme-border);
}
.border-\[var\(--rpt-border\)\] {
  border-color: var(--rpt-border);
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-current {
  border-color: currentColor;
}
.border-danger {
  border-color: var(--theme-danger);
}
.border-error {
  border-color: var(--theme-error);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--primary-color-channels) / var(--tw-border-opacity, 1));
}
.border-primary\/30 {
  border-color: rgb(var(--primary-color-channels) / 0.3);
}
.border-primary\/50 {
  border-color: rgb(var(--primary-color-channels) / 0.5);
}
.border-success {
  border-color: var(--theme-success);
}
.border-theme-border {
  border-color: var(--theme-border);
}
.border-transparent {
  border-color: transparent;
}
.border-warning {
  border-color: var(--theme-warning);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-l-\[var\(--theme-success\)\] {
  border-left-color: var(--theme-success);
}
.border-l-warning {
  border-left-color: var(--theme-warning);
}
.border-s-\[var\(--theme-danger\)\] {
  border-inline-start-color: var(--theme-danger);
}
.border-s-\[var\(--theme-success\)\] {
  border-inline-start-color: var(--theme-success);
}
.border-s-primary {
  --tw-border-opacity: 1;
  border-inline-start-color: rgb(var(--primary-color-channels) / var(--tw-border-opacity, 1));
}
.border-t-primary {
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--primary-color-channels) / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.\!bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[var\(--app-table-body-bg\)\] {
  background-color: var(--app-table-body-bg);
}
.bg-\[var\(--app-table-header-bg\)\] {
  background-color: var(--app-table-header-bg);
}
.bg-\[var\(--rpt-fill\)\] {
  background-color: var(--rpt-fill);
}
.bg-\[var\(--rpt-fill\2c \#fafafc\)\] {
  background-color: var(--rpt-fill,#fafafc);
}
.bg-\[var\(--theme-border\)\] {
  background-color: var(--theme-border);
}
.bg-\[var\(--theme-menu-bg\)\] {
  background-color: var(--theme-menu-bg);
}
.bg-\[var\(--theme-surface\)\] {
  background-color: var(--theme-surface);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-danger {
  background-color: var(--theme-danger);
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/60 {
  background-color: rgb(52 211 153 / 0.6);
}
.bg-error {
  background-color: var(--theme-error);
}
.bg-error-muted {
  background-color: color-mix(in srgb, var(--theme-error) 12%, transparent);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--primary-color-channels) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: rgb(var(--primary-color-channels) / 0.1);
}
.bg-primary\/15 {
  background-color: rgb(var(--primary-color-channels) / 0.15);
}
.bg-primary\/5 {
  background-color: rgb(var(--primary-color-channels) / 0.05);
}
.bg-primary\/90 {
  background-color: rgb(var(--primary-color-channels) / 0.9);
}
.bg-success {
  background-color: var(--theme-success);
}
.bg-success-muted {
  background-color: color-mix(in srgb, var(--theme-success) 12%, transparent);
}
.bg-theme-border {
  background-color: var(--theme-border);
}
.bg-theme-general {
  background-color: var(--theme-general-bg);
}
.bg-theme-menu {
  background-color: var(--theme-menu-bg);
}
.bg-theme-menu-bg {
  background-color: var(--theme-menu-bg);
}
.bg-theme-muted {
  background-color: var(--theme-muted);
}
.bg-theme-popup {
  background-color: var(--theme-popup-bg);
}
.bg-theme-surface {
  background-color: var(--theme-surface);
}
.bg-transparent {
  background-color: transparent;
}
.bg-warning {
  background-color: var(--theme-warning);
}
.bg-warning-muted {
  background-color: color-mix(in srgb, var(--theme-warning) 12%, transparent);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/55 {
  background-color: rgb(255 255 255 / 0.55);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.fill-warning {
  fill: var(--theme-warning);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.\!p-0 {
  padding: 0px !important;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[15px\] {
  padding: 15px;
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.\!px-1\.5 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}
.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.\!px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}
.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.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-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}
.px-\[9px\] {
  padding-left: 9px;
  padding-right: 9px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[11px\] {
  padding-top: 11px;
  padding-bottom: 11px;
}
.py-\[13px\] {
  padding-top: 13px;
  padding-bottom: 13px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.\!pt-0 {
  padding-top: 0px !important;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[11px\] {
  padding-bottom: 11px;
}
.pe-1 {
  padding-inline-end: 0.25rem;
}
.pe-10 {
  padding-inline-end: 2.5rem;
}
.pe-14 {
  padding-inline-end: 3.5rem;
}
.pe-16 {
  padding-inline-end: 4rem;
}
.pe-2 {
  padding-inline-end: 0.5rem;
}
.pe-3 {
  padding-inline-end: 0.75rem;
}
.pe-8 {
  padding-inline-end: 2rem;
}
.pe-9 {
  padding-inline-end: 2.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.ps-0 {
  padding-inline-start: 0px;
}
.ps-12 {
  padding-inline-start: 3rem;
}
.ps-3 {
  padding-inline-start: 0.75rem;
}
.ps-5 {
  padding-inline-start: 1.25rem;
}
.ps-6 {
  padding-inline-start: 1.5rem;
}
.ps-7 {
  padding-inline-start: 1.75rem;
}
.ps-8 {
  padding-inline-start: 2rem;
}
.ps-9 {
  padding-inline-start: 2.25rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-\[11px\] {
  padding-top: 11px;
}
.pt-\[12vh\] {
  padding-top: 12vh;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.\!text-right {
  text-align: right !important;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-bottom {
  vertical-align: bottom;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.\!text-\[12px\] {
  font-size: 12px !important;
}
.\!text-\[14\.5px\] {
  font-size: 14.5px !important;
}
.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14\.5px\] {
  font-size: 14.5px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[clamp\(1\.375rem\2c 2\.1vw\2c 1\.875rem\)\] {
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
}
.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 !important;
}
.\!font-medium {
  font-weight: 500 !important;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.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-5 {
  line-height: 1.25rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
.tracking-\[0\.07em\] {
  letter-spacing: 0.07em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.13em\] {
  letter-spacing: 0.13em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.\!text-\[color\:var\(--theme-sidebar-text\)\] {
  color: var(--theme-sidebar-text) !important;
}
.\!text-error {
  color: var(--theme-error) !important;
}
.\!text-theme-heading {
  color: var(--theme-general-heading) !important;
}
.\!text-transparent {
  color: transparent !important;
}
.\!text-warning {
  color: var(--theme-warning) !important;
}
.text-\[\#fff\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-\[color\:var\(--theme-general-heading\)\] {
  color: var(--theme-general-heading);
}
.text-\[color\:var\(--theme-label\)\] {
  color: var(--theme-label);
}
.text-\[color\:var\(--theme-muted\)\] {
  color: var(--theme-muted);
}
.text-danger {
  color: var(--theme-danger);
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-error {
  color: var(--theme-error);
}
.text-inherit {
  color: inherit;
}
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--primary-color-channels) / var(--tw-text-opacity, 1));
}
.text-primary\/60 {
  color: rgb(var(--primary-color-channels) / 0.6);
}
.text-primary\/80 {
  color: rgb(var(--primary-color-channels) / 0.8);
}
.text-success {
  color: var(--theme-success);
}
.text-theme-body {
  color: var(--body-text-color);
}
.text-theme-heading {
  color: var(--theme-general-heading);
}
.text-theme-label {
  color: var(--theme-label);
}
.text-theme-menu-text {
  color: var(--theme-menu-text);
}
.text-theme-muted {
  color: var(--theme-muted);
}
.text-transparent {
  color: transparent;
}
.text-warning {
  color: var(--theme-warning);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.caret-transparent {
  caret-color: transparent;
}
.accent-primary {
  accent-color: rgb(var(--primary-color-channels) / 1);
}
.\!opacity-100 {
  opacity: 1 !important;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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_10px_18px_-12px_rgba\(15\2c 23\2c 42\2c 0\.18\)\] {
  --tw-shadow: 0 10px 18px -12px rgba(15,23,42,0.18);
  --tw-shadow-colored: 0 10px 18px -12px 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_2px_5px_rgba\(25\2c 24\2c 35\2c \.05\)\2c 0_18px_40px_rgba\(25\2c 24\2c 35\2c \.16\)\] {
  --tw-shadow: 0 2px 5px rgba(25,24,35,.05),0 18px 40px rgba(25,24,35,.16);
  --tw-shadow-colored: 0 2px 5px var(--tw-shadow-color), 0 18px 40px 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_2px_5px_rgba\(25\2c 24\2c 35\2c \.05\)\2c 0_20px_44px_rgba\(25\2c 24\2c 35\2c \.2\)\] {
  --tw-shadow: 0 2px 5px rgba(25,24,35,.05),0 20px 44px rgba(25,24,35,.2);
  --tw-shadow-colored: 0 2px 5px var(--tw-shadow-color), 0 20px 44px 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_2px_5px_rgba\(25\2c 24\2c 35\2c 0\.05\)\2c 0_24px_56px_rgba\(25\2c 24\2c 35\2c 0\.22\)\] {
  --tw-shadow: 0 2px 5px rgba(25,24,35,0.05),0 24px 56px rgba(25,24,35,0.22);
  --tw-shadow-colored: 0 2px 5px var(--tw-shadow-color), 0 24px 56px 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);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-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-2 {
  --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);
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-error {
  --tw-ring-color: var(--theme-error);
}
.ring-primary {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--primary-color-channels) / var(--tw-ring-opacity, 1));
}
.ring-primary\/25 {
  --tw-ring-color: rgb(var(--primary-color-channels) / 0.25);
}
.ring-primary\/30 {
  --tw-ring-color: rgb(var(--primary-color-channels) / 0.3);
}
.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);
}
.blur-2xl {
  --tw-blur: blur(40px);
  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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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);
}
.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  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);
}
.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-\[4px\] {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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-\[padding\] {
  transition-property: padding;
  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-opacity {
  transition-property: opacity;
  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-100 {
  transition-duration: 100ms;
}
.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-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}
.\[-\:T\] {
  -: T;
}
.\[-webkit-text-fill-color\:transparent\] {
  -webkit-text-fill-color: transparent;
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.\[background\:color-mix\(in_oklab\2c var\(--theme-modal-overlay\)_92\%\2c \#000_8\%\)\] {
  background: color-mix(in oklab,var(--theme-modal-overlay) 92%,#000 8%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Number inputs: no spinner buttons. Wheel and ArrowUp / ArrowDown stepping is switched off in
   utils/numberInputStepGuard.js. A genuine stepper opts back in with data-number-step="native". */
input[type='number']:not([data-number-step='native']) {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

input[type='number']:not([data-number-step='native'])::-webkit-outer-spin-button,
input[type='number']:not([data-number-step='native'])::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--theme-general-bg, #f5f5f5);
}

:root {
  --primary-color: rgb(108, 57, 173);
  /* Same color as --primary-color, as "R G B" channel numbers with no function wrapper.
     Tailwind's opacity modifier (bg-primary/50, ring-primary/30, ...) needs the color in this
     shape to blend an alpha value in; ThemeContext keeps this in sync with --primary-color
     whenever the company theme changes. See tailwind.config.js. */
  --primary-color-channels: 108 57 173;
  --primary-hover: rgb(88, 47, 153);
  --sidebar-width: 280px;
  --header-height: 64px;
  /* Theme (ThemeProvider overrides these) */
  --theme-sidebar-bg: #6C39AD;
  --theme-sidebar-text: #FFFFFF;
  --theme-sidebar-selected-bg: color-mix(in srgb, var(--theme-button-bg) 14%, #fff);
  --theme-sidebar-selected-text: #111827;
  --theme-button-bg: #6C39AD;
  --theme-button-text: #FFFFFF;
  --theme-button-radius: 0.5rem;
  --theme-menu-bg: #FFFFFF;
  --theme-menu-text: #000000;
  --theme-menu-heading: #111827;
  --theme-popup-bg: #FFFFFF;
  --theme-popup-heading-color: #111827;
  --theme-popup-heading-size: 1.25rem;
  --theme-general-bg: #F9FAFB;
  --theme-general-heading: #111827;
  --theme-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --theme-font-size: 16px;
  --sidebar-bg-color: #6C39AD;
  --sidebar-text-color: #FFFFFF;
  --button-primary-color: #6C39AD;
  --button-text-color: #FFFFFF;
  --menu-selection-color: var(--theme-sidebar-selected-bg);
  --popup-background-color: #FFFFFF;
  --popup-heading-text-color: #111827;
  --popup-body-text-color: #4B5563;
  --background-color: #F9FAFB;
  --primary-text-color: #111827;
  --body-text-color: #4B5563;
  --theme-success: #16a34a;
  --theme-danger: #dc2626;
  --theme-warning: #d97706;
  --theme-error: #dc2626;
  --theme-success-hover: #15803d;
  --theme-danger-hover: #b91c1c;
  --theme-surface: #F9FAFB;
  --theme-border: #E5E7EB;
  --theme-muted: #6B7280;
  --theme-label: #374151;
  --theme-heading: #111827;
  /* Tab bars (ThemeProvider sets these; fallbacks match primary + sheet defaults) */
  --theme-tab-bar-bg: color-mix(in srgb, var(--theme-button-bg) 6%, var(--theme-general-bg));
  --theme-tab-active-bg: var(--theme-button-bg);
  --theme-tab-active-text: var(--theme-button-text);
  --theme-tab-inactive-text: var(--theme-label);
  --theme-tab-inactive-surface: color-mix(in srgb, var(--theme-button-bg) 7%, var(--theme-menu-bg));
  --theme-tab-indicator: var(--primary-color);
  /* App-wide action buttons (change these to retheme all .btn-app-* usage) */
  --app-btn-height: 2.5rem;
  --app-btn-padding-x: 1rem;
  --app-btn-font-size: 0.875rem;
  --app-btn-radius: var(--theme-button-radius, 0.5rem);
  --app-btn-gap: 0.5rem;
  /* Standard list tables (non-report pages) */
  --app-table-header-bg: color-mix(in srgb, var(--primary-color) 6%, var(--theme-menu-bg));
  --app-table-header-text: var(--theme-label);
  --app-table-border: var(--theme-border);
  --app-table-body-bg: var(--theme-menu-bg);
  --app-table-row-hover-bg: color-mix(in srgb, var(--primary-color) 8%, var(--theme-menu-bg));
  --app-table-row-alt-bg: color-mix(in srgb, var(--theme-border) 12%, var(--theme-menu-bg));
  --app-table-divider: color-mix(in srgb, var(--theme-border) 60%, transparent);
  --app-table-shell-radius: 0.625rem;
  /* Chart tokens. Series 1 follows the brand colour; 2 to 8 are a fixed categorical scale chosen to
     stay distinct beside any brand hue. Semantic tokens follow the theme's own semantic colours.
     Read them through useChartTokens() so charts and PDF capture get resolved values. */
  --chart-series-1: var(--primary-color);
  --chart-series-2: #2A9D8F;
  --chart-series-3: #4F6BD8;
  --chart-series-4: #C98A2B;
  --chart-series-5: #8E5BB5;
  --chart-series-6: #3B93C4;
  --chart-series-7: #6E8B3D;
  --chart-series-8: #C2577B;
  --chart-positive: var(--theme-success);
  --chart-negative: var(--theme-danger);
  --chart-caution: var(--theme-warning);
  --chart-neutral: var(--theme-muted);
  --theme-modal-overlay: rgba(15, 23, 42, 0.45);
  --theme-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   Standard page header + breadcrumbs (components/PageHeader). Use on every page
   for a consistent title / breadcrumb / actions layout. Theme-variable driven.
   -------------------------------------------------------------------------- */
.app-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.app-page-header__lead {
  min-width: 0;
}
.app-page-header__titlerow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.app-page-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.app-page-header__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--theme-heading, #111827);
}
.app-page-header__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--theme-muted);
}
.app-page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.2;
}
.app-breadcrumbs__link {
  color: var(--theme-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms var(--animation-ease, ease);
}
.app-breadcrumbs__link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.app-breadcrumbs__text {
  color: var(--theme-muted);
}
.app-breadcrumbs__current {
  color: var(--theme-label, #374151);
  font-weight: 600;
}
.app-breadcrumbs__sep {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--theme-muted);
  opacity: 0.55;
}

/* Standard page shell (components/PageHeader/PageCard): one rounded card whose header bar is
   joined to the content below — the consistent page layout across the app. */
.app-page-card {
  border: 1px solid var(--theme-border);
  border-radius: 0.75rem;
  background-color: var(--theme-menu-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.app-page-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1.1rem 1.5rem 0.95rem;
  background: color-mix(in srgb, var(--theme-border) 10%, var(--theme-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 65%, transparent);
}
.app-page-card__head .app-page-header__lead { min-width: 0; }
.app-page-card__head .app-page-header__titlerow { margin-top: 0.3rem; }
.app-page-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.app-page-card__subhead {
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--theme-border);
  background-color: var(--theme-menu-bg);
}
/* Report screens: filters stay above the document; only the body scrolls. */
.report-page-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--theme-menu-bg, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 0.5rem;
}
.report-page-shell--viewport {
  /* Bound to remaining viewport under app header + main padding (p-3..lg:p-6 ≈ 1.5rem×2). */
  height: calc(100dvh - var(--header-height) - 3rem);
  max-height: calc(100dvh - var(--header-height) - 3rem);
  flex: 1 1 auto;
  min-height: 0;
}
.report-page-shell__toolbar {
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  background: var(--theme-menu-bg, #fff);
}
.report-page-shell__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
}
@media print {
  .report-page-shell,
  .report-page-shell--viewport,
  .report-page-shell__body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

.app-page-card__body {
  padding: 1.5rem;
}
/* Header-only page card: same header bar as full page cards, standalone (no dangling divider).
   Used on multi-section pages so the breadcrumb + heading + spacing match list/table pages. */
.app-page-card--header .app-page-card__head {
  border-bottom: none;
}
/* Self-contained header bar (single element) — identical look to a page-card head, for pages
   whose content can't be wrapped. Drop-in replacement for a header flex row. */
.app-page-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--theme-border) 10%, var(--theme-surface));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
}
@media (min-width: 640px) {
  .app-page-header-bar {
    padding: 1.1rem 1.5rem 0.95rem;
  }
}

/* Reusable filter / toolbar bar (search + selects + date range). Attractive, theme-driven; use
   `.app-filter-bar__row` on each filter row. Fields inside get a consistent modern treatment. */
.app-filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 60%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary-color) 4%, var(--theme-menu-bg)),
    var(--theme-menu-bg)
  );
}
.app-filter-bar__row--sub {
  background: color-mix(in srgb, var(--theme-border) 10%, var(--theme-menu-bg));
}
/* Transactions list — all filters on one row; horizontal scroll on narrow viewports */
.app-filter-bar__row--transactions {
  flex-wrap: nowrap;
  gap: 0.625rem 0.75rem;
  padding: 0.85rem 1.1rem;
  overflow-x: auto;
}
.app-filter-bar__row--transactions .app-filter-bar__field {
  flex-shrink: 0;
}
.app-filter-bar__row--transactions .app-filter-bar__field--grow {
  flex: 1 1 10rem;
  min-width: 9rem;
  max-width: 16rem;
}
.app-filter-bar__row--transactions .app-filter-bar__field--name {
  flex: 1 1 9rem;
  min-width: 8.5rem;
  max-width: 14rem;
}
.app-filter-bar__row--transactions .app-datepicker-wrap .app-datepicker-input {
  width: 8.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}
.app-filter-bar__row--transactions label.flex span:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-muted);
}
.app-filter-bar__row label:not(.sr-only) {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-muted);
}
/* Consistent field styling within a filter bar */
.app-filter-bar__row select,
.app-filter-bar__row input[type='text'],
.app-filter-bar__row input[type='search'] {
  border: 1px solid var(--theme-border);
  border-radius: 0.625rem;
  background: var(--theme-menu-bg);
  transition: border-color 150ms var(--animation-ease, ease), box-shadow 150ms var(--animation-ease, ease);
}
.app-filter-bar__row select:hover,
.app-filter-bar__row input[type='text']:hover,
.app-filter-bar__row input[type='search']:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--theme-border));
}
.app-filter-bar__row select:focus,
.app-filter-bar__row input[type='text']:focus,
.app-filter-bar__row input[type='search']:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* Semantic text/surfaces (use instead of Tailwind gray/amber/green/red on themed pages) */
.text-theme-muted { color: var(--theme-muted); }
.text-theme-label { color: var(--theme-label); }
.text-theme-heading { color: var(--theme-heading); }
.text-theme-body { color: var(--body-text-color); }
.text-theme-success { color: var(--theme-success); }
.text-theme-danger { color: var(--theme-danger); }
.text-theme-warning { color: var(--theme-warning); }
.bg-theme-surface { background-color: var(--theme-surface); }
.bg-theme-menu { background-color: var(--theme-menu-bg); }
.border-theme-default { border-color: var(--theme-border); }
.chip-success {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--theme-success) 14%, var(--theme-menu-bg));
  color: var(--theme-success);
}
.chip-danger {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--theme-danger) 14%, var(--theme-menu-bg));
  color: var(--theme-danger);
}
/* "Waiting" in the approvals queue: the row is real, it just cannot be approved yet. */
.chip-warning {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--theme-warning) 16%, var(--theme-menu-bg));
  color: var(--theme-warning);
}

/* Themed modals (Approvals, shared dialogs) */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in oklab, var(--theme-modal-overlay) 92%, #000 8%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  transition: opacity 180ms ease-out;
}
.app-modal-overlay--in {
  opacity: 1;
}
.app-modal-overlay--out {
  opacity: 0;
  pointer-events: none;
}
.app-modal-overlay--drawer {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.app-modal-panel {
  background: var(--theme-menu-bg);
  color: var(--theme-menu-text);
  border: 1px solid var(--theme-border);
  border-radius: calc(var(--app-table-shell-radius) + 2px);
  box-shadow: var(--theme-modal-shadow), 0 1px 0 color-mix(in oklab, var(--theme-border) 70%, transparent);
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform, opacity;
}
.app-modal-panel--sm {
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
}
.app-modal-panel--md {
  width: 100%;
  max-width: 32rem;
  padding: 1.5rem;
}
.app-modal-panel--lg {
  width: 100%;
  max-width: 36rem;
  max-height: 80vh;
  padding: 0;
}
.app-modal-panel--xl {
  width: 100%;
  max-width: 48rem;
  max-height: 85vh;
  padding: 0;
}
.app-modal-panel--structured {
  padding: 0;
}
.app-modal-anim {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.app-modal-anim--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.app-modal-anim--out {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}
.app-modal-drawer-panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--theme-menu-bg, #fff);
  box-shadow: var(--theme-modal-shadow);
  will-change: transform;
}
.app-modal-drawer {
  transform: translateX(var(--app-slide-out, 100%));
  transition: transform 300ms ease-out;
}
.app-modal-drawer--in {
  transform: translateX(0);
}
.app-modal-drawer--out {
  transform: translateX(var(--app-slide-out, 100%));
}
html[dir='rtl'] {
  --app-slide-out: -100%;
}
.app-modal-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--theme-surface, #f8fafc);
}
.app-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--theme-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--theme-menu-bg) 90%, var(--theme-sidebar-bg) 10%);
}
.app-modal-body {
  padding: 1rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: color-mix(in oklab, var(--theme-menu-bg) 96%, var(--theme-surface, #f8fafc) 4%);
}
.app-modal-footer {
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--theme-border);
  flex-shrink: 0;
  background: color-mix(in oklab, var(--theme-menu-bg) 90%, var(--theme-sidebar-bg) 10%);
}
@media (prefers-reduced-motion: reduce) {
  .app-modal-overlay,
  .app-modal-anim,
  .app-modal-drawer {
    transition: none !important;
  }
  .app-modal-anim,
  .app-modal-anim--out {
    opacity: 1;
    transform: none;
  }
  .app-modal-drawer,
  .app-modal-drawer--out {
    transform: none;
  }
}
.app-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--theme-heading);
  margin: 0;
}
.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.app-modal-actions > .btn-app {
  min-height: 2.5rem;
  min-width: 6.25rem;
  border-radius: 0.625rem;
}
.app-modal-btn-secondary {
  background: color-mix(in oklab, var(--theme-surface, #f8fafc) 80%, var(--theme-menu-bg) 20%);
  color: var(--theme-menu-text);
  border: 1px solid var(--theme-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.app-modal-btn-secondary:hover {
  background: color-mix(in oklab, var(--theme-surface, #f8fafc) 60%, var(--theme-menu-bg) 40%);
}
.app-modal-btn-primary {
  background: var(--theme-button-bg);
  color: var(--theme-button-text, #fff);
  border: 1px solid color-mix(in oklab, var(--theme-button-bg) 78%, #000 22%);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--theme-button-bg) 36%, transparent);
}
.app-modal-btn-primary:hover {
  filter: brightness(0.97);
}
.app-modal-btn-primary:disabled,
.app-modal-btn-secondary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.app-modal-input {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--theme-border);
  border-radius: 0.625rem;
  background: var(--theme-menu-bg);
  color: var(--theme-menu-text);
}
.app-modal-input::-moz-placeholder {
  color: var(--theme-muted);
}
.app-modal-input::placeholder {
  color: var(--theme-muted);
}
.app-modal-input:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--theme-button-bg) 60%, var(--theme-border) 40%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--theme-button-bg) 20%, transparent);
}

/* Shared select / combobox chrome */
.app-select-trigger {
  width: 100%;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-menu-text);
}
.app-select-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--theme-button-bg) 35%, transparent);
  border-color: var(--primary-color);
}
.app-select-panel {
  position: fixed;
  z-index: 9999;
  background: var(--theme-menu-bg, #fff);
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
  box-shadow: var(--theme-modal-shadow);
  max-height: 16rem;
  overflow: auto;
}
.app-modal-card {
  border: 1px solid var(--theme-border);
  background: color-mix(in oklab, var(--theme-menu-bg) 92%, var(--theme-surface, #f8fafc) 8%);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}
.app-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: var(--theme-muted);
  border-radius: var(--theme-button-radius);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}
.app-modal-close:hover {
  color: var(--theme-heading);
  background: color-mix(in srgb, var(--theme-surface) 70%, var(--theme-menu-bg));
}
.app-modal-close:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.app-input-themed {
  width: 100%;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-button-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--theme-menu-bg);
  color: var(--theme-menu-text);
}
.app-input-themed:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

/* Table loading skeleton */
.approvals-skeleton-wrap {
  padding: 1.5rem 1rem;
}
.approvals-skeleton-row {
  height: 2.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--theme-surface) 85%, var(--theme-border)) 25%,
    color-mix(in srgb, var(--theme-menu-bg) 90%, var(--theme-border)) 50%,
    color-mix(in srgb, var(--theme-surface) 85%, var(--theme-border)) 75%
  );
  background-size: 200% 100%;
  animation: approvals-shimmer 1.2s ease-in-out infinite;
}
@keyframes approvals-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.app-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* Pagination / touch-friendly controls */
.app-pagination-nav-btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.app-pagination-select {
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-button-radius);
  background: var(--theme-menu-bg);
  color: var(--theme-menu-text);
  font-size: 0.875rem;
}
.app-pagination-select:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .btn-app-icon-expand.btn-app-icon-expand--compact {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem;
  }
}

/* Date field and calendar (components/AppDatePicker.jsx) */
.app-datepicker-wrap {
  position: relative;
}
.app-datepicker-wrap .app-datepicker-input {
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-button-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: 2.5rem;
  background: var(--theme-menu-bg);
  color: var(--theme-menu-text);
  width: 11rem;
  caret-color: transparent;
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.app-datepicker-wrap .app-datepicker-input:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.app-datepicker-wrap--field {
  display: block;
  width: 100%;
}
.app-datepicker-wrap .app-datepicker-input--field {
  width: 100%;
  min-height: 2rem;
  height: 2rem;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  background: var(--theme-menu-bg);
}
.app-datepicker-wrap .app-datepicker-input--header {
  width: 100%;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0.375rem 1.75rem 0.375rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  background: var(--theme-menu-bg);
}
/* HTML invoice density: 30px compact date controls */
.app-datepicker-wrap .app-datepicker-input--html {
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 1.75rem 0 0.625rem;
  font-size: 12px;
  line-height: 1.25;
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-surface) 80%, var(--theme-menu-bg));
}
.app-datepicker-wrap--field.app-datepicker-wrap--clearable .app-datepicker-input {
  padding-right: 3.25rem;
}
.app-datepicker-wrap .app-datepicker-input:focus,
.app-datepicker-wrap .app-datepicker-input--field:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.app-datepicker-wrap .app-datepicker-input[aria-invalid='true'] {
  border-color: var(--theme-danger);
}
.app-datepicker-wrap .app-datepicker-input[aria-invalid='true']:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger) 30%, transparent);
}
.app-datepicker-wrap .app-datepicker-input::-moz-placeholder {
  color: var(--theme-muted);
  opacity: 1;
}
.app-datepicker-wrap .app-datepicker-input::placeholder,
.app-datepicker-wrap .app-datepicker-input--skeleton {
  color: var(--theme-muted);
  opacity: 1;
}
.app-datepicker-wrap .app-datepicker-input::-moz-selection {
  background: color-mix(in srgb, var(--primary-color) 22%, var(--theme-menu-bg));
  color: var(--theme-heading);
}
.app-datepicker-wrap .app-datepicker-input::selection {
  background: color-mix(in srgb, var(--primary-color) 22%, var(--theme-menu-bg));
  color: var(--theme-heading);
}
.app-datepicker-wrap .app-datepicker-input::-moz-selection {
  background: color-mix(in srgb, var(--primary-color) 22%, var(--theme-menu-bg));
  color: var(--theme-heading);
}
/* variant="form": the caller's own input classes; only what the date field itself needs. */
.app-datepicker-wrap--form-block {
  display: block;
  width: 100%;
  min-width: 0;
}
.app-datepicker-wrap--form-inline {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
.app-datepicker-wrap .app-datepicker-bare {
  padding-right: 1.75rem;
  caret-color: transparent;
  font-variant-numeric: tabular-nums;
}
.app-datepicker-wrap--clearable .app-datepicker-bare {
  padding-right: 3.25rem;
}
.app-datepicker-wrap .app-datepicker-bare[aria-invalid='true'] {
  border-color: var(--theme-danger);
}
.app-datepicker-wrap .app-datepicker-bare::-moz-placeholder {
  color: var(--theme-muted);
  opacity: 1;
}
.app-datepicker-wrap .app-datepicker-bare::placeholder,
.app-datepicker-wrap .app-datepicker-bare.app-datepicker-input--skeleton {
  color: var(--theme-muted);
  opacity: 1;
}
.app-datepicker-wrap .app-datepicker-bare::-moz-selection {
  background: color-mix(in srgb, var(--primary-color) 22%, var(--theme-menu-bg));
  color: var(--theme-heading);
}
.app-datepicker-wrap .app-datepicker-bare::selection {
  background: color-mix(in srgb, var(--primary-color) 22%, var(--theme-menu-bg));
  color: var(--theme-heading);
}
/* The field wrapper is always LTR (dates read left to right), so these sit on the right. */
.app-datepicker-icon,
.app-datepicker-clear {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: var(--theme-muted);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.app-datepicker-wrap--icon .app-datepicker-clear {
  right: 1.75rem;
}
.app-datepicker-icon:hover:not(:disabled),
.app-datepicker-clear:hover {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.app-datepicker-icon:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Calendar panel: sized to its content, 7 day cells wide. */
.app-datepicker-popper {
  position: fixed;
  /* Above form chrome, sticky bars and modals; below select portals (z-[9999]). */
  z-index: 9000;
}
.app-datepicker-panel {
  --app-datepicker-cell: 2rem;
  box-sizing: border-box;
  width: calc(var(--app-datepicker-cell) * 7 + 1rem + 2px);
  padding: 0.5rem;
  font-family: var(--theme-font-family);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--theme-menu-text);
  background: var(--theme-popup-bg);
  border: 1px solid var(--theme-border);
  border-radius: 0.75rem;
  box-shadow: var(--theme-modal-shadow);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (pointer: coarse) {
  .app-datepicker-panel {
    --app-datepicker-cell: 2.5rem;
  }
}
.app-datepicker-panel button {
  cursor: pointer;
}
.app-datepicker-panel button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
.app-datepicker-header {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  height: 2rem;
  margin-bottom: 0.25rem;
}
.app-datepicker-nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: var(--theme-label);
  transition: background-color 120ms ease, color 120ms ease;
}
.app-datepicker-nav:hover:not(:disabled),
.app-datepicker-title-btn:hover {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.app-datepicker-nav:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.app-datepicker-title {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}
.app-datepicker-title-btn,
.app-datepicker-title-text {
  padding: 0.3rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--theme-heading);
  white-space: nowrap;
}
.app-datepicker-title-btn {
  transition: background-color 120ms ease, color 120ms ease;
}
.app-datepicker-weekdays,
.app-datepicker-week {
  display: grid;
  grid-template-columns: repeat(7, var(--app-datepicker-cell));
}
.app-datepicker-weekdays {
  height: 1.5rem;
  align-items: center;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--theme-muted);
}
.app-datepicker-day {
  width: var(--app-datepicker-cell);
  height: var(--app-datepicker-cell);
  border-radius: 0.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--theme-menu-text);
  transition: background-color 120ms ease, color 120ms ease;
}
.app-datepicker-day--outside {
  color: color-mix(in srgb, var(--theme-muted) 75%, transparent);
}
.app-datepicker-day:hover,
.app-datepicker-cell:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.app-datepicker-day--today,
.app-datepicker-cell--today {
  box-shadow: inset 0 0 0 1px var(--primary-color);
  font-weight: 700;
}
.app-datepicker-day--selected,
.app-datepicker-day--selected:hover,
.app-datepicker-cell--selected,
.app-datepicker-cell--selected:hover {
  background: var(--primary-color);
  color: var(--theme-button-text);
  font-weight: 600;
}
.app-datepicker-day[aria-disabled='true'],
.app-datepicker-day[aria-disabled='true']:hover,
.app-datepicker-cell[aria-disabled='true'],
.app-datepicker-cell[aria-disabled='true']:hover {
  background: transparent;
  color: var(--theme-muted);
  opacity: 0.4;
  cursor: not-allowed;
}
/* Month and year grids fill the same height as the day grid, so the panel never jumps. */
.app-datepicker-coarse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.25rem;
  height: calc(var(--app-datepicker-cell) * 6 + 1.5rem);
}
.app-datepicker-cell {
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--theme-menu-text);
  transition: background-color 120ms ease, color 120ms ease;
}
.app-datepicker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--theme-border);
}
.app-datepicker-action {
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-label);
  transition: background-color 120ms ease, color 120ms ease;
}
.app-datepicker-action--primary {
  color: var(--primary-color);
}
.app-datepicker-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.app-datepicker-action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Focusable approval rows (keyboard) */
tr.app-table-row-focusable:focus {
  outline: none;
}
tr.app-table-row-focusable:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   App standard data tables — use with class "app-table" on <table>
   (Reports excluded by convention; forms may use txnTableThCls for line grids.)
   -------------------------------------------------------------------------- */
table.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--app-table-body-bg);
  font-size: 0.875rem;
  line-height: 1.4;
}
table.app-table thead {
  background-color: var(--app-table-header-bg);
  color: var(--app-table-header-text);
}
table.app-table thead th {
  height: 3.25rem;
  padding: 1.05rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--app-table-header-text);
  vertical-align: middle;
  border-bottom: 1px solid var(--app-table-border);
  white-space: nowrap;
  text-align: start;
}
table.app-table thead th:first-child,
table.app-table tbody td:first-child { padding-inline-start: 1.25rem; }
table.app-table thead th:last-child,
table.app-table tbody td:last-child { padding-inline-end: 1.25rem; }
table.app-table tbody tr {
  background-color: var(--app-table-body-bg);
  transition: background-color 120ms var(--animation-ease, ease);
}
/* Zebra striping for scan-ability */
table.app-table tbody tr:nth-child(even) {
  background-color: var(--app-table-row-alt-bg);
}
/* Hover wins over zebra (declared after, equal specificity) */
table.app-table tbody tr:hover {
  background-color: var(--app-table-row-hover-bg);
}

/*
 * Inventory list chrome: viewport-bound page card so the table wrap scrolls
 * (min-height:0 / overflow containment). Prevents #app-main-content from
 * growing past a single wheel probe (KHL-Z-002 region-end-unreachable).
 */
.inv-list-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-height) - 3rem);
  max-height: calc(100dvh - var(--header-height) - 3rem);
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.inv-list-page__head {
  flex-shrink: 0;
}
.inv-list-page__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.inv-list-page__toolbar,
.inv-list-page__banner,
.inv-list-page__extras,
.inv-list-page__pager {
  flex-shrink: 0;
  min-width: 0;
}
.inv-list-page__table,
.inv-list-page__cards,
.inv-list-page__scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.inv-list-page__cards,
.inv-list-page__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Inventory: calm hover (background only — no lift, slide, or shadow) */
.inv-hover-row,
.inv-hover-card {
  transition: background-color 150ms ease;
}
.inv-hover-row:hover,
.inv-hover-card:hover {
  background-color: var(--app-table-row-hover-bg);
  box-shadow: none;
  transform: none;
  filter: none;
}
.inv-hover-card:hover {
  border-color: color-mix(in srgb, var(--primary-color) 18%, var(--theme-border));
}
table.app-table tbody td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--app-table-divider);
  text-align: start;
}
table.app-table thead th .dual-label,
table.app-table tbody td .dual-label {
  max-width: 100%;
}
table.app-table thead th .dual-label {
  flex-wrap: nowrap;
}
table.app-table thead th .app-table-sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}
table.app-table thead th span.app-table-sort {
  cursor: default;
}
table.app-table thead th.text-end .app-table-sort,
table.app-table thead th.app-col-actions .app-table-sort {
  justify-content: flex-end;
}
table.app-table tbody tr:last-child td { border-bottom: none; }
/* Column alignment by content type (applies to every .app-table):
   - amounts/numbers → right-aligned cells get tabular figures automatically
   - status/flags    → use `.text-center`
   - actions/icons   → use `.app-col-actions` for a compact, right, no-wrap column */
table.app-table th.text-right,
table.app-table td.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.app-table th.text-end,
table.app-table td.text-end {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
table.app-table th.text-center,
table.app-table td.text-center {
  text-align: center;
}
table.app-table th.app-col-actions,
table.app-table td.app-col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}
/* Code / reference columns read better as monospace-ish, non-wrapping */
table.app-table th.app-col-code,
table.app-table td.app-col-code {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.app-table thead.app-table__thead--sticky {
  position: sticky;
  top: 0;
  z-index: 11;
}
table.app-table thead.app-table__thead--sticky th {
  background-color: var(--app-table-header-bg);
  box-shadow: 0 1px 0 var(--app-table-border);
}
/* Compact density (transactions list + nested/modal tables) */
/* Mirrors report compact (.report-html--compact): every row is exactly header height, single line. */
table.app-table.app-table--dense thead th,
table.app-table.app-table--dense tbody td {
  height: 1.75rem;
  padding: 0 10px;
  line-height: 1.2;
  white-space: nowrap;
}
table.app-table.app-table--dense thead th {
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
}
table.app-table.app-table--dense tbody td {
  font-size: 0.71875rem;
}
table.app-table.app-table--dense thead th:first-child,
table.app-table.app-table--dense tbody td:first-child { padding-inline-start: 0.75rem; }
table.app-table.app-table--dense thead th:last-child,
table.app-table.app-table--dense tbody td:last-child { padding-inline-end: 0.75rem; }
table.app-table.app-table--dense tbody td .text-sm,
table.app-table.app-table--dense tbody td .text-xs { font-size: 0.71875rem; }
/* Multi-line cells collapse onto one line */
table.app-table.app-table--dense tbody td .txn-stack {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  white-space: nowrap;
}
table.app-table.app-table--dense tbody td .txn-stack.text-right { justify-content: flex-end; }
table.app-table.app-table--dense tbody td .btn-app-icon-expand--compact {
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0.1rem 0.25rem;
}
table.app-table.app-table--dense tbody td .btn-app-icon-expand--compact:hover:not(:disabled) {
  padding: 0.1rem 0.5rem 0.1rem 0.25rem;
}
table.app-table.app-table--dense tbody td .table-actions-cluster { min-height: 0; }
/* Comfortable (transactions list): tighter than the global default, roomier than compact */
table.app-table.app-table--cozy thead th {
  height: 2.5rem;
  padding: 0.5rem 1rem;
}
table.app-table.app-table--cozy tbody td {
  padding: 0.4rem 1rem;
}

/* Density toggle for app filter bars (mirrors report Comfortable / Compact control) */
.app-density-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 9.5rem;
}
/* Inline in the transactions filter bar: same height as the other controls, no label */
.app-filter-bar__row--transactions .app-density-toggle {
  align-self: center;
}
.app-filter-bar__row--transactions .app-density-toggle__seg {
  height: 2.25rem;
}
.app-density-toggle__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-muted);
  line-height: 1.2;
}
.app-density-toggle__seg {
  display: flex;
  gap: 3px;
  height: 30px;
  padding: 3px;
  background: color-mix(in srgb, var(--primary-color, var(--theme-button-bg)) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary-color, var(--theme-button-bg)) 28%, var(--theme-border));
  border-radius: 8px;
}
.app-density-toggle__seg button {
  flex: 1;
  height: 100%;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--theme-label);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.app-density-toggle__seg button[aria-pressed='true'] {
  color: var(--theme-button-text, #fff);
  background: var(--primary-color, var(--theme-button-bg));
}
/* Grid column header bar (Chart of Accounts–style) */
.app-table-columns-header {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--app-table-header-bg);
  border-top: 1px solid var(--app-table-border);
  border-bottom: 1px solid var(--app-table-border);
}
.app-table-columns-header__cell {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-table-header-text);
}
/* Chart of Accounts tree — uniform compact rows (with or without action buttons) */
.app-coa-tree-row {
  align-items: center;
  min-height: 2rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.25;
}
.app-coa-tree-row .table-actions-cluster {
  min-height: 1.5rem;
  align-items: center;
}
.app-coa-tree-row .btn-app-icon-expand.btn-app-icon-expand--compact {
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0.125rem;
}
.app-coa-tree-row .btn-app-icon-expand--compact:hover:not(:disabled) {
  padding: 0.125rem 0.35rem 0.125rem 0.125rem;
}
.app-coa-tree-row .btn-app-icon-expand--compact .btn-app-icon-expand__icon {
  width: 0.875rem;
  height: 0.875rem;
}
.app-table-columns-header.app-coa-tree-header {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  gap: 0.75rem;
}

/* Rounded frame for list tables — keeps table visually separate from toolbars/filters above */
.app-table-shell {
  border: 1px solid var(--app-table-border);
  border-radius: var(--app-table-shell-radius);
  /* Horizontal only — vertical scroll belongs on the page, not inside the table card. */
  overflow-x: auto;
  overflow-y: visible;
  /* LTR scroll mechanics so wheel/probe can reach the end under document RTL (INV-A-002). */
  direction: ltr;
  background-color: var(--app-table-body-bg);
}
/* Inventory list viewport shell: both-axis scroll on the table wrap (KHL-Z-002). */
.inv-list-page .app-table-shell.inv-list-page__table {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
html[dir='rtl'] .app-table-shell > table {
  direction: rtl;
}
.app-table-shell table.app-table thead {
  border-top: none;
}

/* Top pagination bar — same look everywhere; use with margin below table block (e.g. gap-3 on parent) */
.app-table-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background-color: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-menu-bg));
  border: 1px solid var(--app-table-border);
  border-radius: var(--app-table-shell-radius);
}

/* Create-menu left card: one column. col-span-2 children must not open a 2nd implicit track. */
.txn-left-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: 0;
  row-gap: 0.35rem;
  min-width: 0;
}
.txn-left-grid > * {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
}
.txn-left-grid > input,
.txn-left-grid > select,
.txn-left-grid > textarea {
  width: 100%;
  min-width: 0;
  margin-bottom: 0.65rem;
  box-sizing: border-box;
}
.txn-left-grid > input[type='date'] {
  width: 100%;
  min-width: 0;
}

/* Column header strip inside a shell: avoid double line with shell’s top edge */
.app-table-shell .app-table-columns-header {
  border-top: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--theme-surface, #f1f1f1);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-muted, #6b7280) 70%, transparent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-muted, #555);
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  border: 3px solid var(--theme-border, #f3f3f3);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}
.spinner.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-top-width: 2px;
}
.spinner-on-primary {
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-top-color: #fff !important;
}
.spinner-on-primary.spinner-sm {
  border-width: 2px;
  border-top-width: 2px;
}

/* Fade in animation - consistent duration and easing app-wide */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn var(--transition-duration, 200ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dashboard styles live beside the page: src/pages/Dashboard/Dashboard.css */

/* Login page - modern design */
.login-page {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-button-bg) 4%, #ffffff) 0%,
    color-mix(in srgb, var(--theme-button-bg) 8%, var(--theme-general-bg, #f9fafb)) 50%,
    color-mix(in srgb, var(--theme-button-bg) 12%, var(--theme-general-bg, #f9fafb)) 100%
  );
}

/* Geometric grid pattern - left panel */
.login-grid {
  background-image: 
    linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Dot pattern - right panel */
.login-dots {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--theme-button-bg) 15%, transparent) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
}

/* Floating orb animations */
@keyframes loginFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate(20px, -15px) scale(1.05); opacity: 0.8; }
  66% { transform: translate(-10px, 10px) scale(0.95); opacity: 0.5; }
}

@keyframes loginFloatSlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, 20px); }
}

@keyframes loginFloatSlower {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -10px); }
}

@keyframes loginPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.6; }
}

.login-float {
  animation: loginFloat 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.login-float-delayed {
  animation: loginFloat 7s cubic-bezier(0.4, 0, 0.6, 1) infinite 1s;
}

.login-float-slow {
  animation: loginFloatSlow 12s ease-in-out infinite;
}

.login-float-slower {
  animation: loginFloatSlower 15s ease-in-out infinite 2s;
}

.login-pulse {
  animation: loginPulse 8s ease-in-out infinite;
}

/* Content entrance - staggered */
@keyframes loginContentIn {
  from {
    opacity: 0;
    transform: translateX(-32px) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginFormIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginFeatureIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-content-in {
  animation: loginContentIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.login-card-in {
  animation: loginCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.login-form-in {
  animation: loginFormIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.login-feature {
  animation: loginFeatureIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Sign-in hand-over (Login.jsx). Runs only after the server accepts the sign-in:
   the button confirms, the card lifts away, and on desktop the brand panel narrows
   to exactly where the app sidebar is about to appear. Keep the total in step with
   LOGIN_EXIT_MS in Login.jsx.
   -------------------------------------------------------------------------- */
.login-page--leaving {
  background: var(--theme-surface);
  pointer-events: none;
}
.login-aside::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width-expanded);
  background: var(--sidebar-shell-gradient);
  opacity: 0;
  pointer-events: none;
}
@keyframes loginFadeOut {
  to { opacity: 0; }
}
@keyframes loginFadeIn {
  to { opacity: 1; }
}
@keyframes loginCardOut {
  to { opacity: 0; transform: translateY(-14px) scale(0.985); }
}
@keyframes loginAsideToRail {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 calc(100% - var(--sidebar-width-expanded)) 0 0); }
}
@keyframes loginAsideToRailRtl {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 calc(100% - var(--sidebar-width-expanded))); }
}
@keyframes loginCheckDraw {
  to { stroke-dashoffset: 0; }
}
.login-page--leaving .login-card-in {
  animation: loginCardOut 300ms cubic-bezier(0.4, 0, 1, 1) 200ms forwards;
}
.login-page--leaving .login-stage-decor {
  animation: loginFadeOut 240ms ease-in forwards;
}
.login-page--leaving .login-aside > * {
  animation: loginFadeOut 200ms ease-in forwards;
}
.login-page--leaving .login-aside {
  animation: loginAsideToRail 420ms cubic-bezier(0.65, 0, 0.35, 1) 80ms forwards;
}
html[dir='rtl'] .login-page--leaving .login-aside {
  animation-name: loginAsideToRailRtl;
}
.login-page--leaving .login-aside::after {
  animation: loginFadeIn 320ms ease-out 120ms forwards;
}
.login-page--leaving .otp-input__box,
.login-page--leaving .otp-input__box:disabled {
  opacity: 1;
  border-color: var(--theme-success);
  background: color-mix(in srgb, var(--theme-success) 6%, var(--theme-menu-bg));
}
.login-submit--verified,
.login-submit--verified:disabled {
  opacity: 1 !important;
  background: var(--theme-success) !important;
  border-color: var(--theme-success) !important;
  color: var(--theme-button-text) !important;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.login-check {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.login-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: loginCheckDraw 220ms cubic-bezier(0.65, 0, 0.35, 1) 40ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .login-page--leaving .login-card-in,
  .login-page--leaving .login-stage-decor,
  .login-page--leaving .login-aside,
  .login-page--leaving .login-aside::after,
  .login-page--leaving .login-aside > * {
    animation: none !important;
  }
  .login-check path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Legacy - keep for any other usage */
@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loginPanelSlide {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes loginOrbit {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -8px, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.login-container-animate { animation: fadeIn 0.4s ease-out; }
.login-card-animate { animation: loginFadeUp 0.5s ease-out; }
.login-panel-animate { animation: loginPanelSlide 0.6s ease-out; }
.login-orbit { animation: loginOrbit 8s ease-in-out infinite; }
.login-orbit-delayed { animation: loginOrbit 10s ease-in-out infinite 0.5s; }

/* --------------------------------------------------------------------------
   One-time-password entry (OtpInput.jsx) — one box per digit, theme-driven.
   -------------------------------------------------------------------------- */
.otp-input {
  display: flex;
  gap: clamp(0.375rem, 2.2vw, 0.625rem);
  width: 100%;
}
.otp-input__box {
  /* Fluid width so 6 boxes plus gaps always fit the card, even on a narrow phone,
     without a breakpoint: shrinks below the 3rem desktop size, never grows past it. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 3rem;
  aspect-ratio: 8 / 9;
  height: auto;
  border-radius: 0.75rem;
  border: 1.5px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-heading);
  text-align: center;
  font-size: clamp(1rem, 5.5vw, 1.375rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, transform 120ms ease;
}
.otp-input__box:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--theme-border));
}
.otp-input__box:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.otp-input__box--filled {
  background: color-mix(in srgb, var(--primary-color) 4%, var(--theme-menu-bg));
}
.otp-input__box:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.otp-input__box--error {
  border-color: var(--theme-error);
}
.otp-input__box--error:focus {
  border-color: var(--theme-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-error) 20%, transparent);
}
@keyframes otpBoxPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.otp-input__box--filled {
  animation: otpBoxPop 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .otp-input__box {
    transition: none;
    animation: none !important;
  }
}

/* Sidebar scrollbar styling */
.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   App sidebar — theme-linked navigation (Sidebar.jsx + sidebarTokens.js)
   -------------------------------------------------------------------------- */
:root {
  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 4rem;
  --sidebar-item-radius: 0.625rem;
  --sidebar-item-hover-bg: color-mix(in srgb, var(--theme-sidebar-text) 11%, transparent);
  --sidebar-item-hover-border: color-mix(in srgb, var(--theme-sidebar-text) 18%, transparent);
  --sidebar-sub-hover-bg: color-mix(in srgb, var(--theme-sidebar-text) 9%, transparent);
  --sidebar-active-indicator: var(--theme-button-bg);
  --sidebar-active-shadow: 0 2px 8px color-mix(in srgb, #000 18%, transparent);
  --sidebar-brand-border: color-mix(in srgb, var(--theme-sidebar-text) 16%, transparent);
  --sidebar-focus-ring: color-mix(in srgb, var(--theme-sidebar-text) 88%, transparent);
  --sidebar-heading-color: color-mix(in srgb, var(--theme-sidebar-text) 72%, transparent);
  /* Theme-driven shell: deepen the configured sidebar color (no brand-locked purple). */
  --sidebar-shell-gradient: linear-gradient(
    168deg,
    color-mix(in srgb, #000 28%, var(--theme-sidebar-bg)) 0%,
    var(--theme-sidebar-bg) 48%,
    color-mix(in srgb, #fff 8%, var(--theme-sidebar-bg)) 100%
  );
}

.app-sidebar__shell {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 30;
  width: min(var(--sidebar-width-expanded), calc(100vw - 3rem));
  max-width: 100vw;
  transform: translateX(-100%);
  transition:
    transform var(--transition-duration-slow, 300ms) var(--animation-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    width var(--transition-duration-slow, 300ms) var(--animation-ease, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow:
    4px 0 24px color-mix(in srgb, #000 22%, transparent),
    1px 0 0 color-mix(in srgb, var(--theme-sidebar-text) 8%, transparent);
}
html[dir='rtl'] .app-sidebar__shell {
  transform: translateX(100%);
  box-shadow:
    -4px 0 24px color-mix(in srgb, #000 22%, transparent),
    -1px 0 0 color-mix(in srgb, var(--theme-sidebar-text) 8%, transparent);
}
@media (min-width: 1024px) {
  .app-sidebar__shell {
    width: var(--sidebar-width-expanded);
    max-width: none;
    transform: translateX(0);
  }
  html[dir='rtl'] .app-sidebar__shell {
    transform: translateX(0);
  }
  .app-sidebar__shell--open {
    transform: translateX(0);
  }
  .app-sidebar__shell--collapsed {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    max-width: var(--sidebar-width-collapsed);
  }
}
.app-sidebar__shell--open {
  transform: translateX(0);
  z-index: 60;
}
html[dir='rtl'] .app-sidebar__shell--open {
  transform: translateX(0);
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: var(--theme-sidebar-text);
  background: var(--sidebar-shell-gradient);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--theme-sidebar-text) 6%, transparent);
  position: relative;
  overflow: hidden;
}
html[dir='rtl'] .app-sidebar {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--theme-sidebar-text) 6%, transparent);
}
.app-sidebar::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 130px at 28px -24px, color-mix(in srgb, var(--theme-button-bg) 45%, transparent), transparent 70%),
    radial-gradient(circle 120px at calc(100% + 48px) calc(100% - 140px), color-mix(in srgb, var(--theme-sidebar-text) 12%, transparent), transparent 70%);
  opacity: 1;
}
.app-sidebar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-sidebar__brand {
  flex-shrink: 0;
  position: relative;
  padding: 1.375rem 1.25rem 1.125rem;
  border-bottom: none;
}
/* Logo brand sits on the themed sidebar shell — no light card */
.app-sidebar__brand--with-logo {
  margin: 0;
  padding: 1.375rem 1.25rem 1.125rem;
  border-radius: 0;
  background: transparent;
  color: var(--theme-sidebar-text);
  box-shadow: none;
}
.app-sidebar__brand--with-logo .app-sidebar__brand-open {
  width: auto;
  max-width: 100%;
  padding: 0;
}
.app-sidebar__brand--with-logo .app-sidebar__brand-row {
  align-items: center;
}
.app-sidebar__brand--with-logo .app-sidebar__brand-open:hover,
.app-sidebar__brand--with-logo .app-sidebar__brand-open:active {
  background: transparent;
}
.app-sidebar__brand--with-logo .app-sidebar__brand-open:focus-visible {
  outline-color: color-mix(in srgb, var(--theme-sidebar-text) 40%, transparent);
}
.app-sidebar__brand--with-logo .app-sidebar__brand-name,
.app-sidebar__brand--with-logo .app-sidebar__brand-sub {
  color: var(--theme-sidebar-text);
}
.app-sidebar__brand--with-logo .app-sidebar__brand-sub {
  color: color-mix(in srgb, var(--theme-sidebar-text) 72%, transparent);
}
.app-sidebar__brand--with-logo .app-sidebar__brand-close {
  color: var(--theme-sidebar-text);
}
.app-sidebar__brand--with-logo .app-sidebar__brand-close:hover {
  background: color-mix(in srgb, var(--theme-sidebar-text) 12%, transparent);
}
.app-sidebar__shell--collapsed .app-sidebar__brand {
  padding: 0.875rem 0.5rem;
  display: flex;
  justify-content: center;
}
.app-sidebar__shell--collapsed .app-sidebar__brand--with-logo {
  margin: 0;
  padding: 0.875rem 0.5rem;
  width: 100%;
}
.app-sidebar__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-row {
  justify-content: center;
}
.app-sidebar__brand-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--theme-sidebar-text);
  line-height: 1.2;
}
.app-sidebar__brand-close {
  transition: background-color 160ms ease;
}
.app-sidebar__brand-close:hover {
  background: color-mix(in srgb, var(--theme-sidebar-text) 15%, transparent);
}

/* Modern brand lockup: frosted mark + wordmark (Seulah shell) */
.app-sidebar__brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-width: 0;
}
.app-sidebar__brand-lockup--logo {
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 0.8125rem;
}
.app-sidebar__brand-logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem;
  border-radius: 0.875rem;
  background: linear-gradient(
    150deg,
    #ffffff 0%,
    color-mix(in srgb, var(--theme-button-bg) 14%, #ffffff) 100%
  );
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-sidebar-bg) 55%, transparent);
}
.app-sidebar__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.875rem;
  color: var(--theme-button-bg);
  background: linear-gradient(
    150deg,
    #ffffff 0%,
    color-mix(in srgb, var(--theme-button-bg) 14%, #ffffff) 100%
  );
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-sidebar-bg) 55%, transparent);
}
.app-sidebar__brand-word {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  line-height: 1.1;
}
.app-sidebar__brand-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--theme-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar__brand-name--product {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
.app-sidebar__brand--with-logo .app-sidebar__brand-name--product {
  position: static;
  padding-bottom: 0;
  color: var(--theme-sidebar-text);
}
.app-sidebar__brand--with-logo .app-sidebar__brand-name--product::after {
  content: none;
}
.app-sidebar__brand-sub {
  font-size: 0.59375rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-sidebar-text) 72%, transparent);
  white-space: nowrap;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-lockup {
  justify-content: center;
  gap: 0;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-lockup--logo {
  width: auto;
  flex-direction: row;
  align-items: center;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-logo-frame {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  max-width: 2.5rem;
  padding: 0.25rem;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-word {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.app-sidebar__brand-logo {
  height: 100%;
  width: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-logo {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-sidebar__brand-open {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0.25rem 0.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: background-color 160ms ease;
}
.app-sidebar__brand-open:hover,
.app-sidebar__brand-open:active {
  background: color-mix(in srgb, var(--theme-sidebar-text) 12%, transparent);
  box-shadow: none;
  transform: none;
  filter: none;
}
.app-sidebar__brand-open:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-sidebar-text) 45%, transparent);
  outline-offset: 1px;
}
.app-sidebar__shell--collapsed .app-sidebar__brand-open {
  justify-content: center;
  padding: 0.2rem;
}

.app-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.875rem 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --------------------------------------------------------------------------
   Sidebar drill-in panes (root list  <->  module sub-panel)
   -------------------------------------------------------------------------- */
.app-sidebar__nav-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: filter 200ms var(--animation-ease), opacity 200ms var(--animation-ease);
}
/* Soft-focus the sidebar behind the (portaled) Create popup */
.app-sidebar__nav-shell--blur {
  filter: blur(2.5px);
  opacity: 0.55;
}
.app-sidebar__panes {
  position: relative;
  flex: 1;
  min-height: 0;
}
.app-sidebar__pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* No persistent will-change: a permanent compositor layer re-rasterizes on every
     navigation re-render (visible flicker). Framer Motion adds will-change only while
     a pane is actually animating (module enter/exit), which is all we want. */
}
.app-sidebar__pane-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.875rem 0.75rem 1.25rem;
}
.app-sidebar__rail-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.875rem 0.5rem 1.25rem;
}

/* Module sub-panel */
.app-sidebar__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0.875rem 0.75rem 0.5rem;
}
/* Row 1: the way back (and home). Row 2: which module this menu belongs to. */
.app-sidebar__panel-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}
.app-sidebar__panel-back,
.app-sidebar__panel-home {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  border-radius: var(--sidebar-item-radius);
  border: 1px solid color-mix(in srgb, var(--theme-sidebar-text) 16%, transparent);
  background: color-mix(in srgb, var(--theme-sidebar-text) 7%, transparent);
  color: var(--theme-sidebar-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-duration, 200ms) var(--animation-ease),
    border-color var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__panel-back {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.375rem;
  padding: 0 0.75rem 0 0.5rem;
  text-align: start;
}
html[dir='rtl'] .app-sidebar__panel-back {
  padding: 0 0.5rem 0 0.75rem;
}
.app-sidebar__panel-back svg {
  flex-shrink: 0;
  transition: transform var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__panel-home {
  flex: 0 0 auto;
  justify-content: center;
  width: 2.25rem;
}
.app-sidebar__panel-back:not(:disabled):hover,
.app-sidebar__panel-home:not(:disabled):hover {
  background: color-mix(in srgb, var(--theme-sidebar-text) 15%, transparent);
  border-color: color-mix(in srgb, var(--theme-sidebar-text) 30%, transparent);
  filter: none;
  box-shadow: none;
  transform: none;
}
.app-sidebar__panel-back:hover svg {
  transform: translateX(-2px);
}
html[dir='rtl'] .app-sidebar__panel-back:hover svg {
  transform: translateX(2px) rotate(180deg);
}
.app-sidebar__panel-back:focus-visible,
.app-sidebar__panel-home:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: 2px;
}
.app-sidebar__panel-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0 0.25rem 0.875rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-sidebar-text) 14%, transparent);
}
.app-sidebar__panel-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--theme-sidebar-selected-bg);
  color: var(--theme-sidebar-selected-text);
  box-shadow: var(--sidebar-active-shadow);
}
.app-sidebar__panel-mark svg {
  width: 1.25rem;
  height: 1.25rem;
}
.app-sidebar__panel-heading {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.app-sidebar__panel-title {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--theme-sidebar-text);
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar__panel-sub {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--sidebar-heading-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.app-sidebar__panel-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app-sidebar__panel-viewport {
  width: 100%;
  height: 100%;
}
.app-sidebar__panel-group + .app-sidebar__panel-group {
  margin-top: 0.5rem;
}
.app-sidebar__panel-group-title {
  padding: 0.4rem 0.5rem 0.25rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-heading-color);
}
html[dir='rtl'] .app-sidebar__panel-group-title {
  letter-spacing: 0;
}
.app-sidebar__panel-overview {
  margin-top: 0.5rem;
}
.app-sidebar__panel-overview .app-sidebar__viewall-arrow {
  margin-inline-start: auto;
  display: inline-flex;
  opacity: 0.85;
  transition: transform var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__panel-overview:hover .app-sidebar__viewall-arrow {
  transform: translateX(2px);
}
html[dir='rtl'] .app-sidebar__panel-overview:hover .app-sidebar__viewall-arrow {
  transform: translateX(-2px);
}

/* Radix ScrollArea scrollbar (themed) */
.app-sidebar__scrollbar {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  padding: 2px;
  width: 8px;
}
.app-sidebar__scrollthumb {
  flex: 1;
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-sidebar-text) 26%, transparent);
}
.app-sidebar__scrollthumb:hover {
  background: color-mix(in srgb, var(--theme-sidebar-text) 40%, transparent);
}

/* Collapsed-rail icon tooltip (Radix) */
.app-sidebar__tip {
  z-index: 60;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--theme-sidebar-text);
  background: color-mix(in srgb, var(--theme-sidebar-bg) 90%, #000);
  border: 1px solid color-mix(in srgb, var(--theme-sidebar-text) 14%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 30%, transparent);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.app-sidebar__tip-arrow {
  fill: color-mix(in srgb, var(--theme-sidebar-bg) 90%, #000);
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar__pane {
    transition: none !important;
  }
  .app-sidebar__enter,
  .app-sidebar__flyout,
  .app-sidebar__item-badge,
  .app-sidebar__loading-row {
    animation: none !important;
  }
  .app-sidebar__item-chevron,
  .app-sidebar__panel-back svg {
    transition: none !important;
  }
}

/* Top-level sections: a quiet heading, then the links and modules that belong to it. */
.app-sidebar__section {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.app-sidebar__section + .app-sidebar__section {
  margin-top: 1.125rem;
}
.app-sidebar__section--pinned .app-sidebar__group {
  gap: 0.5rem;
}
.app-sidebar__section-title {
  margin: 0;
  padding: 0 0.75rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Arabic script joins its letters; tracking would pull them apart. */
html[dir='rtl'] .app-sidebar__section-title {
  letter-spacing: 0;
  font-size: 0.75rem;
}
/* Icon rail: the heading has no room, so a rule marks where each section starts. */
.app-sidebar__section-rule {
  display: block;
  height: 1px;
  margin: 0 0.625rem 0.625rem;
  background: color-mix(in srgb, var(--theme-sidebar-text) 18%, transparent);
}
.app-sidebar__shell--collapsed .app-sidebar__section + .app-sidebar__section {
  margin-top: 0.625rem;
}
.app-sidebar__create-slot {
  width: 100%;
}
.app-sidebar__panel .app-sidebar__create-slot {
  margin-bottom: 0.375rem;
}

.app-sidebar__divider {
  height: 1px;
  flex-shrink: 0;
  margin: 0.625rem 0.25rem;
  background: color-mix(in srgb, var(--theme-sidebar-text) 18%, transparent);
  border: none;
}

.app-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

/* Staggered mount animation */
@keyframes sidebarItemIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.app-sidebar__enter {
  animation: sidebarItemIn 0.38s var(--animation-ease, cubic-bezier(0.4, 0, 0.2, 1)) backwards;
}
.app-sidebar__enter--0 { animation-delay: 0ms; }
.app-sidebar__enter--1 { animation-delay: 35ms; }
.app-sidebar__enter--2 { animation-delay: 70ms; }
.app-sidebar__enter--3 { animation-delay: 105ms; }
.app-sidebar__enter--4 { animation-delay: 140ms; }
.app-sidebar__enter--5 { animation-delay: 175ms; }
.app-sidebar__enter--6 { animation-delay: 210ms; }
.app-sidebar__enter--7 { animation-delay: 245ms; }
.app-sidebar__enter--8 { animation-delay: 280ms; }
.app-sidebar__enter--9 { animation-delay: 315ms; }
.app-sidebar__enter--10 { animation-delay: 350ms; }
.app-sidebar__enter--11 { animation-delay: 385ms; }
.app-sidebar__enter--12 { animation-delay: 420ms; }

/* Loading skeleton */
@keyframes sidebarShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.app-sidebar__loading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0.125rem;
}
.app-sidebar__loading-row {
  height: 2.5rem;
  border-radius: var(--sidebar-item-radius);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--theme-sidebar-text) 8%, transparent) 25%,
    color-mix(in srgb, var(--theme-sidebar-text) 16%, transparent) 50%,
    color-mix(in srgb, var(--theme-sidebar-text) 8%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: sidebarShimmer 1.4s ease-in-out infinite;
}
.app-sidebar__loading-row--short {
  width: 72%;
  margin-left: 1rem;
}

.app-sidebar__item,
.app-sidebar__sub-item,
.app-sidebar__flyout-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  position: relative;
  transition: background-color 150ms ease;
}
.app-sidebar__item {
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--sidebar-item-radius);
  justify-content: space-between;
  min-height: 2.625rem;
}
.app-sidebar__item--collapsed {
  justify-content: center;
  padding-inline: 0.5rem;
}
.app-sidebar__footer {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--sidebar-border, color-mix(in srgb, currentColor 10%, transparent));
}
.app-sidebar__customize-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: var(--sidebar-item-radius);
  border: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--transition-duration, 200ms) var(--animation-ease),
    background-color var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__customize-btn:hover {
  opacity: 1;
  background: var(--sidebar-item-hover-bg);
}
.app-sidebar__customize-btn--collapsed {
  justify-content: center;
}
/* Sidebar customization: density / row-height presets applied via a wrapper class on .app-sidebar__group. */
.app-sidebar__group--compact .app-sidebar__item {
  padding-block: 0.375rem;
  min-height: 2.125rem;
}
.app-sidebar__group--comfortable .app-sidebar__item {
  padding-block: 0.9rem;
  min-height: 3.25rem;
}
.app-sidebar__item:not(.app-sidebar__item--active):not(.app-sidebar__item--parent-active):hover,
.app-sidebar__sub-item:not(.app-sidebar__sub-item--active):hover,
.app-sidebar__flyout-item:not(.app-sidebar__flyout-item--active):hover {
  background: var(--sidebar-item-hover-bg);
  border-color: var(--sidebar-item-hover-border);
}
.app-sidebar__item--active,
.app-sidebar__item--parent-active {
  background: var(--theme-sidebar-selected-bg);
  color: var(--theme-sidebar-selected-text);
  box-shadow: var(--sidebar-active-shadow);
  border-color: color-mix(in srgb, var(--theme-sidebar-selected-text) 12%, transparent);
}
.app-sidebar__item--active::before,
.app-sidebar__item--parent-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 58%;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-indicator);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sidebar-active-indicator) 45%, transparent);
}
html[dir='rtl'] .app-sidebar__item--active::before,
html[dir='rtl'] .app-sidebar__item--parent-active::before {
  border-radius: 3px 0 0 3px;
}
.app-sidebar__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 0.5rem;
  background: transparent;
  transition:
    background-color var(--transition-duration, 200ms) var(--animation-ease),
    color var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__item-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2;
}
.app-sidebar__item--active .app-sidebar__item-icon,
.app-sidebar__item--parent-active .app-sidebar__item-icon {
  background: color-mix(in srgb, var(--theme-sidebar-selected-text) 12%, var(--theme-sidebar-selected-bg));
}
/* A module is a place with its own menu: tiled icon, stronger label, chevron.
   A link is a single page: bare icon, regular label. */
.app-sidebar__item--module .app-sidebar__item-icon {
  background: color-mix(in srgb, var(--theme-sidebar-text) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-sidebar-text) 16%, transparent);
}
.app-sidebar__item--module .app-sidebar__item-label {
  font-weight: 600;
}
.app-sidebar__item--module:not(.app-sidebar__item--collapsed) {
  padding-inline-end: 0.5rem;
}
/* Links and modules share one row height: a link's icon box is only as tall as its glyph,
   and a module gives up padding to make room for its tile. */
.app-sidebar__item--link .app-sidebar__item-icon {
  height: 1.25rem;
}
.app-sidebar__item--module {
  padding-block: 0.375rem;
}
.app-sidebar__group--compact .app-sidebar__item--module {
  padding-block: 0.1875rem;
}
.app-sidebar__group--compact .app-sidebar__item--module .app-sidebar__item-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-inline: 0.125rem;
}
/* The current page sits inside this module: mark it, but keep the filled pill for pages. */
.app-sidebar__item--parent-active {
  background: color-mix(in srgb, var(--theme-sidebar-text) 10%, transparent);
  color: inherit;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--theme-sidebar-text) 20%, transparent);
}
.app-sidebar__item--parent-active:hover {
  background: color-mix(in srgb, var(--theme-sidebar-text) 16%, transparent);
}
.app-sidebar__item--parent-active::before {
  background: var(--theme-sidebar-text);
  box-shadow: none;
}
.app-sidebar__item--parent-active .app-sidebar__item-icon {
  background: var(--theme-sidebar-selected-bg);
  color: var(--theme-sidebar-selected-text);
  box-shadow: none;
}
.app-sidebar__item--active .app-sidebar__item-label {
  font-weight: 600;
}
.app-sidebar__item:focus-visible,
.app-sidebar__customize-btn:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: 2px;
}
.app-sidebar__flyout-item:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: -2px;
}
@media (pointer: coarse) {
  .app-sidebar__item,
  .app-sidebar__create-btn {
    min-height: 2.75rem;
  }
}
.app-sidebar__item-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.app-sidebar__item-label .dual-label {
  max-width: 100%;
}
.app-sidebar__shell--collapsed .app-sidebar__item-label,
.app-sidebar__shell--collapsed .app-sidebar__item-chevron {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.app-sidebar__item-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  opacity: 0.7;
  transition:
    transform var(--transition-duration, 200ms) var(--animation-ease),
    opacity var(--transition-duration, 200ms) var(--animation-ease),
    background-color var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__item--module:hover .app-sidebar__item-chevron,
.app-sidebar__item--module:focus-visible .app-sidebar__item-chevron {
  opacity: 1;
  background: color-mix(in srgb, var(--theme-sidebar-text) 14%, transparent);
  transform: translateX(2px);
}
html[dir='rtl'] .app-sidebar__item--module:hover .app-sidebar__item-chevron,
html[dir='rtl'] .app-sidebar__item--module:focus-visible .app-sidebar__item-chevron {
  transform: translateX(-2px) rotate(180deg);
}
.app-sidebar__item-chevron--open {
  transform: rotate(90deg);
}
.app-sidebar__item-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.app-sidebar__shell--collapsed .app-sidebar__item-main {
  justify-content: center;
  gap: 0;
}

@keyframes sidebarBadgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.92; }
}
.app-sidebar__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  background: var(--theme-danger);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-sidebar-bg) 70%, transparent);
  animation: sidebarBadgePulse 2.2s ease-in-out infinite;
}
.app-sidebar__item-badge--rail {
  position: absolute;
  top: -0.2rem;
  inset-inline-end: -0.35rem;
  min-width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
}
.app-sidebar__shell--collapsed .app-sidebar__item-badge--inline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-sidebar__sub-list {
  margin-block: 0.375rem 0.125rem;
  margin-inline-start: 1rem;
  margin-inline-end: 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--theme-sidebar-text) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  animation: sidebarSubExpand 0.22s var(--animation-ease, cubic-bezier(0.4, 0, 0.2, 1));
  overflow: hidden;
}
@keyframes sidebarSubExpand {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    max-height: 24rem;
    transform: translateY(0);
  }
}
.app-sidebar__sub-item {
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--sidebar-item-radius) - 2px);
  font-size: 0.8125rem;
  min-height: 2.25rem;
}
.app-sidebar__sub-item--active {
  background: var(--theme-sidebar-selected-bg);
  color: var(--theme-sidebar-selected-text);
  box-shadow: 0 1px 4px color-mix(in srgb, #000 14%, transparent);
  font-weight: 600;
}
.app-sidebar__sub-item--active::before {
  content: '';
  position: absolute;
  inset-inline-start: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sidebar-active-indicator);
}

/* "View all" overview link at the foot of an expanded collapsible group */
.app-sidebar__viewall {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.4rem 0.625rem;
  border-radius: calc(var(--sidebar-item-radius) - 2px);
  border: 1px dashed color-mix(in srgb, var(--theme-sidebar-text) 24%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--theme-sidebar-text) 76%, transparent);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--transition-duration, 200ms) var(--animation-ease),
    color var(--transition-duration, 200ms) var(--animation-ease),
    border-color var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__viewall:hover {
  background: var(--sidebar-sub-hover-bg);
  color: var(--theme-sidebar-text);
  border-color: color-mix(in srgb, var(--theme-sidebar-text) 40%, transparent);
}
.app-sidebar__viewall:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-sidebar-text) 55%, transparent);
  outline-offset: 2px;
}
.app-sidebar__viewall--active {
  background: var(--theme-sidebar-selected-bg);
  color: var(--theme-sidebar-selected-text);
  border-style: solid;
  border-color: color-mix(in srgb, var(--theme-sidebar-selected-text) 14%, transparent);
}
.app-sidebar__viewall-arrow {
  margin-inline-start: auto;
  display: inline-flex;
  transition: transform var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__viewall:hover .app-sidebar__viewall-arrow {
  transform: translateX(2px);
}
html[dir='rtl'] .app-sidebar__viewall:hover .app-sidebar__viewall-arrow {
  transform: translateX(-2px);
}

/* Create is the sidebar's single action, so it is the only filled control: the sidebar's
   own text and background colors swapped, which stays legible under any theme. */
.app-sidebar__create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  min-height: 2.625rem;
  border-radius: var(--sidebar-item-radius);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-sidebar-bg);
  background: var(--theme-sidebar-text);
  border: 1px solid transparent;
  box-shadow: var(--sidebar-active-shadow);
  cursor: pointer;
  transition:
    background-color var(--transition-duration, 200ms) var(--animation-ease),
    box-shadow var(--transition-duration, 200ms) var(--animation-ease);
}
.app-sidebar__create-btn .app-sidebar__item-main {
  gap: 0.5rem;
}
.app-sidebar__create-btn:hover {
  background: color-mix(in srgb, var(--theme-sidebar-text) 90%, var(--theme-sidebar-bg));
}
.app-sidebar__create-btn:active,
.app-sidebar__create-btn--open {
  background: color-mix(in srgb, var(--theme-sidebar-text) 82%, var(--theme-sidebar-bg));
}
.app-sidebar__create-btn--collapsed {
  padding-inline: 0.5rem;
}
.app-sidebar__create-btn:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: 2px;
}

.app-sidebar__flyout {
  display: none;
  position: fixed;
  z-index: 45;
  inset-inline-start: var(--sidebar-width-collapsed);
  width: 14rem;
  max-height: min(calc(100vh - 1rem), 520px);
  overflow-y: auto;
  flex-direction: column;
  padding: 0.375rem 0;
  border-start-end-radius: 0.625rem;
  border-end-end-radius: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--theme-sidebar-text) 16%, transparent);
  background: color-mix(in srgb, var(--theme-sidebar-bg) 92%, #000);
  color: var(--theme-sidebar-text);
  box-shadow:
    8px 8px 28px color-mix(in srgb, #000 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--theme-sidebar-text) 6%, transparent);
  animation: sidebarFlyoutIn 0.2s var(--animation-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
@media (min-width: 1024px) {
  .app-sidebar__flyout--visible {
    display: flex;
  }
}
@keyframes sidebarFlyoutIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
html[dir='rtl'] .app-sidebar__flyout {
  animation-name: sidebarFlyoutInRtl;
}
@keyframes sidebarFlyoutInRtl {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.app-sidebar__flyout-header {
  padding: 0.5rem 0.875rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-sidebar-text) 65%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--theme-sidebar-text) 12%, transparent);
}
.app-sidebar__flyout-item {
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
}
.app-sidebar__flyout-item--active {
  background: var(--theme-sidebar-selected-bg);
  color: var(--theme-sidebar-selected-text);
  font-weight: 600;
}

.app-sidebar__overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: color-mix(in srgb, #000 40%, transparent);
  animation: fadeIn 0.2s var(--animation-ease);
}
@media (min-width: 1024px) {
  .app-sidebar__overlay {
    display: none;
    pointer-events: none;
  }
}

/* Sidebar nav items: suppress global button hover filter/shadow/slide */
.app-sidebar__item:not(:disabled):hover,
.app-sidebar__sub-item:not(:disabled):hover,
.app-sidebar__flyout-item:not(:disabled):hover,
.app-sidebar__create-btn:not(:disabled):hover {
  filter: none;
}
.app-sidebar__item:not(:disabled):hover,
.app-sidebar__sub-item:not(:disabled):hover,
.app-sidebar__flyout-item:not(:disabled):hover {
  box-shadow: none;
  transform: none;
}
.app-sidebar__item:not(:disabled):active,
.app-sidebar__sub-item:not(:disabled):active,
.app-sidebar__flyout-item:not(:disabled):active {
  transform: none;
  box-shadow: none;
}

:root {
  --primary-color: rgb(108, 57, 173);
  --primary-color-channels: 108 57 173;
  --primary-hover: rgb(88, 47, 153);
  --primary-text-color: #111827;
  --body-text-color: #4b5563;
  --background-color: #f9fafb;
  --sidebar-bg-color: rgb(108, 57, 173);
  --sidebar-text-color: #ffffff;
  --button-primary-color: rgb(108, 57, 173);
  --button-text-color: #ffffff;
  --menu-selection-color: color-mix(in srgb, var(--button-primary-color) 14%, #fff);
  --sidebar-width: 280px;
  --header-height: 64px;
  /* Consistent transitions across app (layouts, buttons, popups) */
  --transition-duration: 200ms;
  --transition-duration-slow: 300ms;
  --animation-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Single scroll: main content scrolls; modals scroll internally */
body { overflow-x: hidden; }
.modal-content-scroll {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Theme-driven semantic colors (Transactions, status, approve/reject) */
.bg-success {
  background-color: var(--theme-success) !important;
}
.text-success {
  color: var(--theme-success) !important;
}
.bg-danger {
  background-color: var(--theme-danger) !important;
}
.hover\:bg-success:hover {
  background-color: var(--theme-success-hover, #15803d) !important;
}
.hover\:bg-danger:hover {
  background-color: var(--theme-danger-hover, #b91c1c) !important;
}
.text-danger {
  color: var(--theme-danger) !important;
}
.bg-warning {
  background-color: var(--theme-warning) !important;
}
.text-warning {
  color: var(--theme-warning) !important;
}
.border-warning {
  border-color: var(--theme-warning) !important;
}
.bg-error {
  background-color: var(--theme-error) !important;
}
.text-error {
  color: var(--theme-error) !important;
}
.border-error {
  border-color: var(--theme-error) !important;
}
.bg-error-muted {
  background-color: #fecaca !important; /* fallback for older browsers */
}
@supports (background-color: color-mix(in srgb, red 12%, transparent)) {
  .bg-error-muted {
    background-color: color-mix(in srgb, var(--theme-error) 12%, transparent) !important;
  }
}
.bg-warning-muted {
  background-color: #fef3c7 !important; /* fallback for older browsers */
}
@supports (background-color: color-mix(in srgb, red 12%, transparent)) {
  .bg-warning-muted {
    background-color: color-mix(in srgb, var(--theme-warning) 12%, transparent) !important;
  }
}
/* Success counterparts of the error / warning pair above (same recipe, --theme-success). */
.border-success {
  border-color: var(--theme-success) !important;
}
.bg-success-muted {
  background-color: #dcfce7 !important; /* fallback for older browsers */
}
@supports (background-color: color-mix(in srgb, red 12%, transparent)) {
  .bg-success-muted {
    background-color: color-mix(in srgb, var(--theme-success) 12%, transparent) !important;
  }
}

/* Theme surfaces (labels, borders, muted text) */
.bg-theme-surface { background-color: var(--theme-surface) !important; }
/* No color-mix: html2canvas / some PDF raster paths fail on color-mix(); overlay approximates tint */
.bg-theme-surface\/80 {
  background-color: var(--theme-surface) !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) !important;
}
.bg-theme-surface\/50 {
  background-color: var(--theme-surface) !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)) !important;
}
/* Header search dropdown (GlobalSearchBar): popup surface and a soft, theme-tinted elevation. */
.app-search-panel {
  background: var(--theme-popup-bg);
  border: 1px solid var(--theme-border);
  box-shadow:
    0 2px 5px color-mix(in srgb, var(--theme-general-heading) 6%, transparent),
    0 18px 40px color-mix(in srgb, var(--theme-general-heading) 16%, transparent);
}
.border-theme-border { border-color: var(--theme-border) !important; }
/* Focus border on themed inputs: the rule above is !important, so the plain Tailwind
   focus variant never applied. :where() keeps specificity equal, so the validation
   borders declared below still win over focus. */
.focus\:border-primary:where(:focus),
.focus-visible\:border-primary:where(:focus-visible),
.focus-within\:border-primary:where(:focus-within) {
  border-color: rgb(var(--primary-color-channels)) !important;
}
/* Validation / state borders are declared again after the default themed border: both are
   !important with equal specificity, so source order decides, and a field that carries
   `border-theme-border border-error` must show the error colour. */
.border-error { border-color: var(--theme-error) !important; }
.border-danger { border-color: var(--theme-danger) !important; }
.border-warning { border-color: var(--theme-warning) !important; }
.border-success { border-color: var(--theme-success) !important; }
/* Neutral fill one step stronger than the surface (total rows, tracks, neutral chips).
   Same capture-safe recipe as bg-theme-surface/50: no color-mix. */
.bg-theme-border\/50 {
  background-color: var(--theme-border) !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) !important;
}
.text-theme-muted { color: var(--theme-muted) !important; }
.text-theme-label { color: var(--theme-label) !important; }
.text-theme-heading { color: var(--theme-general-heading) !important; }
/* Page / chrome aligned with Settings > Appearance > General background */
.bg-theme-general {
  background-color: var(--theme-general-bg) !important;
}
/* Modal / dialog surfaces (Settings > Appearance > Popup) */
.bg-theme-popup {
  background-color: var(--theme-popup-bg) !important;
}
.text-theme-popup-heading {
  color: var(--theme-popup-heading-color) !important;
}
/* Dividers (e.g. table rows) */
.divide-theme-border > * + * { border-color: var(--theme-border); }

/* Status badges (Transactions list and views) - theme-driven */
.status-badge-success {
  background-color: #dcfce7; /* fallback for older browsers */
  color: var(--theme-success);
}
.status-badge-danger {
  background-color: #fee2e2; /* fallback for older browsers */
  color: var(--theme-danger);
}
.status-badge-warning {
  background-color: #fef3c7; /* fallback for older browsers */
  color: var(--theme-warning);
}
.status-badge-neutral {
  background-color: var(--theme-surface);
  color: var(--theme-muted);
}
.status-badge-info {
  background-color: #dbeafe; /* fallback for older browsers */
  color: var(--primary-color);
}
@supports (background-color: color-mix(in srgb, red 15%, transparent)) {
  .status-badge-success {
    background-color: color-mix(in srgb, var(--theme-success) 15%, transparent);
  }
  .status-badge-danger {
    background-color: color-mix(in srgb, var(--theme-danger) 15%, transparent);
  }
  .status-badge-warning {
    background-color: color-mix(in srgb, var(--theme-warning) 15%, transparent);
  }
  .status-badge-info {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  }
}

/* Create dropdown menu item hover - uses Settings > Appearance > Menu selection color */
.create-menu-item:hover {
  background-color: var(--menu-selection-color) !important;
  color: var(--primary-color) !important;
}

.create-menu-item {
  color: var(--theme-menu-text, #000);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Create dropdown popup (portaled to <body>; theme-aware, modern)
   -------------------------------------------------------------------------- */
@keyframes createMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-create-menu {
  padding: 0.875rem 1rem 1rem;
  border-radius: 1rem;
  background: var(--theme-popup-bg, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  box-shadow:
    0 24px 60px color-mix(in srgb, #0f172a 28%, transparent),
    0 2px 8px color-mix(in srgb, #0f172a 12%, transparent);
  transform-origin: top left;
  animation: createMenuIn 180ms var(--animation-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.app-create-menu__head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 0.25rem 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
}
.app-create-menu__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  flex-shrink: 0;
}
.app-create-menu__head-label {
  min-width: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--primary-color);
  /* Keep category titles on one line when possible; wrap evenly if needed */
  overflow-wrap: anywhere;
}
.app-create-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: start;
  color: var(--theme-menu-text, #111827);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  transition:
    background-color 150ms var(--animation-ease),
    border-color 150ms var(--animation-ease),
    color 150ms var(--animation-ease),
    transform 150ms var(--animation-ease);
}
.app-create-menu__item-label {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.app-create-menu__item-label .dual-label,
.app-create-menu__head-label .dual-label {
  display: inline;
  max-width: 100%;
  white-space: inherit;
}
.app-create-menu__item-label .dual-label__primary,
.app-create-menu__item-label .dual-label__pair,
.app-create-menu__item-label .dual-label__secondary {
  white-space: inherit;
  overflow: visible;
  text-overflow: unset;
}
.app-create-menu__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--theme-border) 45%, transparent);
  color: var(--theme-muted, #6b7280);
  transition: background-color 150ms var(--animation-ease), color 150ms var(--animation-ease);
}
.app-create-menu__item:hover,
.app-create-menu__item:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 18%, var(--theme-border));
  color: var(--primary-color);
}
.app-create-menu__item:hover .app-create-menu__item-icon,
.app-create-menu__item:focus-visible .app-create-menu__item-icon {
  background: color-mix(in srgb, var(--primary-color) 16%, transparent);
  color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   Create transaction modal (header Create + Ctrl+Alt+N)
   -------------------------------------------------------------------------- */
body.app-create-modal-open #root {
  filter: blur(7px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@keyframes createModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-create-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: color-mix(in srgb, #0f172a 38%, transparent);
}
.app-create-modal {
  display: flex;
  flex-direction: column;
  width: min(96vw, 72rem);
  height: min(88vh, 42rem);
  background: var(--theme-popup-bg, #fff);
  color: var(--theme-menu-text, #111827);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 1.25rem;
  box-shadow:
    0 28px 80px color-mix(in srgb, #0f172a 32%, transparent),
    0 2px 8px color-mix(in srgb, #0f172a 10%, transparent);
  overflow: hidden;
  animation: createModalIn 180ms var(--animation-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.app-create-modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
}
.app-create-modal__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 0 1 16rem;
}
.app-create-modal__brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  color: var(--primary-color);
  flex-shrink: 0;
}
.app-create-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--theme-heading, #111827);
}
.app-create-modal__subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 28rem;
  margin-inline: auto;
}
.app-create-modal__search-icon {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--theme-muted, #6b7280);
  pointer-events: none;
}
.app-create-modal__search {
  width: 100%;
  height: 2.5rem;
  padding-inline: 2.25rem 2.5rem;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 0.75rem;
  background: var(--theme-surface, #f9fafb);
  color: var(--theme-heading, #111827);
  font-size: 0.875rem;
  outline: none;
}
.app-create-modal__search:focus {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--theme-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
  background: var(--theme-popup-bg, #fff);
}
.app-create-modal__search-kbd,
.app-create-modal__keys kbd,
.app-header-create-btn__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-popup-bg, #fff);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--theme-muted, #6b7280);
  line-height: 1;
}
.app-create-modal__search-kbd {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
}
.app-create-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-popup-bg, #fff);
  color: var(--theme-muted, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
}
.app-create-modal__close:hover,
.app-create-modal__close:focus-visible {
  color: var(--theme-heading, #111827);
  background: color-mix(in srgb, var(--theme-heading, #111827) 6%, #fff);
  border-color: color-mix(in srgb, var(--primary-color) 30%, var(--theme-border));
  outline: none;
}
.app-create-modal__body {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr) 14.5rem;
  flex: 1 1 auto;
  min-height: 0;
}
/* Inventory-scoped Create has no category rail — keep main wide + pins. */
.app-create-modal__body--no-cats {
  grid-template-columns: minmax(0, 1fr) 14.5rem;
}
.app-create-modal__cats,
.app-create-modal__pins {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.875rem 0.75rem;
  background: color-mix(in srgb, var(--theme-surface, #f8fafc) 88%, #fff);
}
.app-create-modal__cats {
  border-inline-end: 1px solid var(--theme-border, #e5e7eb);
}
.app-create-modal__pins {
  border-inline-start: 1px solid var(--theme-border, #e5e7eb);
}
.app-create-modal__aside-label {
  margin: 0 0 0.5rem;
  padding-inline: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__cat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--theme-heading, #111827);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.app-create-modal__cat:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.app-create-modal__cat.is-active {
  background: var(--primary-color);
  color: var(--theme-button-text, #fff);
}
.app-create-modal__cat-count {
  margin-inline-start: auto;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-create-modal__main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.25rem 1rem;
}
.app-create-modal__main-head {
  margin-bottom: 0.9rem;
}
.app-create-modal__main-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-heading, #111827);
}
.app-create-modal__main-desc {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.app-create-modal__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: 5.25rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 0.85rem;
  background: var(--theme-popup-bg, #fff);
  text-align: start;
  cursor: pointer;
  position: relative;
}
.app-create-modal__card:hover,
.app-create-modal__card.is-focused {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--theme-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.app-create-modal__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  flex-shrink: 0;
}
.app-create-modal__card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding-inline-end: 3.25rem;
}
.app-create-modal__card-title {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--theme-heading, #111827);
}
.app-create-modal__card-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--theme-muted, #6b7280);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.app-create-modal__card-action {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--primary-color);
  color: var(--theme-button-text, #fff);
  font-size: 0.6875rem;
  font-weight: 700;
}
.app-create-modal__empty {
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__empty--aside {
  margin: 0.5rem 0.5rem 1rem;
  font-size: 0.75rem;
}
.app-create-modal__pin-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.app-create-modal__pin {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.app-create-modal__pin:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.app-create-modal__pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  flex-shrink: 0;
}
.app-create-modal__pin-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--theme-heading, #111827);
}
.app-create-modal__pin-meta {
  display: block;
  font-size: 0.6875rem;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--theme-border));
  background: var(--theme-popup-bg, #fff);
  color: var(--primary-color);
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.app-create-modal__manage:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, #fff);
}
.app-create-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--theme-border, #e5e7eb);
  background: color-mix(in srgb, var(--theme-surface, #f8fafc) 80%, #fff);
}
.app-create-modal__tip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__keys {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.75rem;
  color: var(--theme-muted, #6b7280);
}
.app-create-modal__keys span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.app-create-modal__manage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 22rem;
  overflow: auto;
}
.app-create-modal__manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid var(--theme-border, #e5e7eb);
}
.app-create-modal__manage-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  min-width: 0;
}
.app-create-modal__manage-move {
  display: inline-flex;
  gap: 0.25rem;
}
.app-create-modal__manage-move button {
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-popup-bg, #fff);
  border-radius: 0.4rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.6875rem;
  cursor: pointer;
}
.app-create-modal__manage-move button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--theme-heading, #111827) 6%, #fff);
}
.app-create-modal__manage-move button:disabled {
  opacity: 0.4;
  cursor: default;
}
.app-create-modal__manage-actions {
  margin-top: 0.9rem;
}
.app-header-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.7rem 0 0.65rem;
  border: 0;
  border-radius: 0.65rem;
  background: var(--primary-color);
  color: var(--theme-button-text, #fff);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 32%, transparent);
  cursor: pointer;
  flex-shrink: 0;
}
.app-header-create-btn:hover,
.app-header-create-btn--open {
  filter: brightness(1.06);
}
.app-header-create-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 55%, #fff);
  outline-offset: 2px;
}
.app-header-create-btn__kbd {
  background: color-mix(in srgb, #fff 18%, transparent);
  border-color: color-mix(in srgb, #fff 28%, transparent);
  color: inherit;
  opacity: 0.9;
}
.app-create-fab-wrap {
  position: fixed;
  inset-inline-end: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 30;
}
html.app-nav-drawer-open .app-create-fab-wrap {
  visibility: hidden;
  pointer-events: none;
}
.app-create-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 9999px;
  background: var(--primary-color);
  color: var(--theme-button-text, #fff);
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary-color) 38%, transparent),
    0 2px 6px color-mix(in srgb, #0f172a 18%, transparent);
  cursor: pointer;
}
.app-create-fab:hover,
.app-create-fab--open {
  filter: brightness(1.06);
}
.app-create-fab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 55%, #fff);
  outline-offset: 3px;
}
body.app-create-modal-open .app-create-fab-wrap {
  visibility: hidden;
}
@media (max-width: 1100px) {
  .app-create-modal__body {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
  .app-create-modal__body--no-cats {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-create-modal__pins {
    display: none;
  }
}
@media (max-width: 760px) {
  .app-create-modal {
    height: min(94vh, 46rem);
  }
  .app-create-modal__body {
    grid-template-columns: 1fr;
  }
  .app-create-modal__cats {
    display: none;
  }
  .app-create-modal__header {
    flex-wrap: wrap;
  }
  .app-create-modal__search-wrap {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }
  .app-create-modal__grid {
    grid-template-columns: 1fr;
  }
  .app-header-create-btn__kbd {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-create-modal {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Header — user menu + notifications (theme-aware)
   -------------------------------------------------------------------------- */
@keyframes headerUserMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.app-header-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.25rem;
  padding-inline: 0.25rem 0.625rem;
  border: 1px solid var(--theme-border);
  border-radius: 9999px;
  background: var(--theme-menu-bg);
  color: var(--theme-heading);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 2.5rem;
  max-width: 16.5rem;
}
.app-header-user-trigger:hover {
  background: color-mix(in srgb, var(--primary-color) 6%, var(--theme-menu-bg));
  border-color: color-mix(in srgb, var(--primary-color) 22%, var(--theme-border));
}
.app-header-user-trigger--open {
  background: color-mix(in srgb, var(--primary-color) 10%, var(--theme-menu-bg));
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--theme-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.app-header-user-trigger__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.0625rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: start;
  line-height: 1.15;
}
.app-header-user-trigger__name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--theme-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-user-trigger__role {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--theme-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-user-trigger__chevron {
  flex-shrink: 0;
  color: var(--theme-muted);
  transition: transform 0.2s ease, color 0.15s ease;
}
.app-header-user-trigger--open .app-header-user-trigger__chevron {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.app-header-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(
    145deg,
    var(--primary-color) 0%,
    color-mix(in srgb, var(--primary-color) 72%, var(--theme-heading, #111827)) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  flex-shrink: 0;
}
.app-header-user-avatar--lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9375rem;
}

.app-header-user-menu {
  width: min(92vw, 17.5rem);
  padding: 0.5rem;
  border-radius: 0.875rem;
  background: var(--theme-popup-bg);
  border: 1px solid color-mix(in srgb, var(--theme-border) 90%, transparent);
  box-shadow:
    0 24px 60px color-mix(in srgb, #0f172a 28%, transparent),
    0 2px 8px color-mix(in srgb, #0f172a 12%, transparent);
  transform-origin: top inline-end;
  animation: headerUserMenuIn 180ms var(--animation-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.app-header-user-menu__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--primary-color) 8%, var(--theme-menu-bg));
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.app-header-user-menu__head-text {
  min-width: 0;
  flex: 1;
}
.app-header-user-menu__head-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-heading);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-user-menu__head-meta {
  font-size: 0.75rem;
  color: var(--theme-muted);
  line-height: 1.3;
  margin-top: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-user-menu__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-label);
  text-align: start;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-header-user-menu__item:hover,
.app-header-user-menu__item:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
  color: var(--primary-color);
  outline: none;
}
.app-header-user-menu__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--theme-border) 45%, transparent);
  color: var(--theme-muted);
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.app-header-user-menu__item:hover .app-header-user-menu__item-icon,
.app-header-user-menu__item:focus-visible .app-header-user-menu__item-icon {
  background: color-mix(in srgb, var(--primary-color) 16%, transparent);
  color: var(--primary-color);
}
.app-header-user-menu__item--danger {
  color: var(--theme-danger);
}
.app-header-user-menu__item--danger:hover,
.app-header-user-menu__item--danger:focus-visible {
  background: color-mix(in srgb, var(--theme-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--theme-danger) 22%, transparent);
  color: var(--theme-danger);
}
.app-header-user-menu__item--danger:hover .app-header-user-menu__item-icon,
.app-header-user-menu__item--danger:focus-visible .app-header-user-menu__item-icon {
  background: color-mix(in srgb, var(--theme-danger) 14%, transparent);
  color: var(--theme-danger);
}
.app-header-user-menu__divider {
  height: 1px;
  margin: 0.375rem 0.5rem;
  background: var(--theme-border);
}

/* Notify bell: keep badge in the corner so counts like 99+ never cover the icon */
.btn-icon.btn-icon--notify {
  overflow: visible;
}
.btn-icon.btn-icon--notify-active {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.btn-icon__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 0.25rem;
  border-radius: 9999px;
  background: var(--theme-danger, #dc2626);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--theme-surface, #fff);
  transform: translate(35%, -35%);
}
[dir="rtl"] .btn-icon__badge {
  transform: translate(-35%, -35%);
}

/* --------------------------------------------------------------------------
   App button system — theme-linked; use .btn-app + variant across the app.
   Type 1: .btn-app-outline-primary (border primary, inset hover)
   Type 2: .btn-app-outline-neutral (neutral border → primary on hover)
   Type 3: .btn-app-icon-expand (icon; label expands on hover — see markup)
   Solid / semantic: .btn-app-solid, .btn-app-ghost, .btn-app-danger, .btn-app-success, .btn-app-link
   -------------------------------------------------------------------------- */
.btn-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-btn-gap);
  min-height: var(--app-btn-height);
  padding: 0 var(--app-btn-padding-x);
  font-size: var(--app-btn-font-size);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  border-radius: var(--app-btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    opacity 0.15s ease;
}
.btn-app:focus-visible {
  outline: 2px solid var(--theme-button-bg);
  outline-offset: 2px;
}
.btn-app:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Filled primary (Save, Add, submit) */
.btn-app-solid {
  background-color: var(--theme-button-bg);
  color: var(--theme-button-text);
  border-color: color-mix(in srgb, var(--theme-button-bg) 88%, #000);
}
.btn-app-solid:hover:not(:disabled) {
  filter: brightness(0.96);
}
.btn-app-solid:active:not(:disabled) {
  filter: brightness(0.92);
}
/* Type 1 — outline primary + light inset on hover (e.g. Refresh) */
.btn-app-outline-primary {
  background-color: color-mix(in srgb, var(--theme-button-bg) 6%, var(--theme-menu-bg));
  color: var(--theme-button-bg);
  border-color: var(--theme-button-bg);
}
.btn-app-outline-primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-button-bg) 14%, var(--theme-menu-bg));
  box-shadow: inset 0 1px 3px color-mix(in srgb, #000 12%, transparent);
  filter: none;
  transform: none;
}
.btn-app-outline-primary:active:not(:disabled) {
  box-shadow: inset 0 2px 4px color-mix(in srgb, #000 16%, transparent);
}
.btn-app-outline-primary:disabled {
  border-color: var(--theme-border);
  color: var(--theme-muted);
  background-color: var(--theme-surface);
  box-shadow: none;
}
/* Type 2 — neutral border; hover → primary (e.g. Import template, Export) */
.btn-app-outline-neutral {
  background-color: var(--theme-menu-bg);
  color: var(--theme-label);
  border-color: var(--theme-border);
}
.btn-app-outline-neutral:hover:not(:disabled) {
  border-color: var(--theme-button-bg);
  color: var(--theme-button-bg);
  background-color: color-mix(in srgb, var(--theme-button-bg) 8%, var(--theme-menu-bg));
  filter: none;
  transform: none;
}
.btn-app-outline-neutral:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Cancel / secondary bordered */
.btn-app-ghost {
  background-color: var(--theme-menu-bg);
  color: var(--theme-label);
  border-color: var(--theme-border);
}
.btn-app-ghost:hover:not(:disabled) {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  filter: none;
  transform: none;
}
.btn-app-danger {
  background-color: var(--theme-danger);
  color: #fff;
  border-color: color-mix(in srgb, var(--theme-danger) 85%, #000);
}
.btn-app-danger:hover:not(:disabled) {
  background-color: var(--theme-danger-hover);
  filter: none;
  transform: none;
}
.btn-app-success {
  background-color: var(--theme-success);
  color: #fff;
  border-color: color-mix(in srgb, var(--theme-success) 85%, #000);
}
.btn-app-success:hover:not(:disabled) {
  background-color: var(--theme-success-hover);
  filter: none;
  transform: none;
}
/* Text button (Reverse, inline actions) */
.btn-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--app-btn-height);
  padding: 0 0.25rem;
  font-size: var(--app-btn-font-size);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  border: none;
  border-radius: var(--app-btn-radius);
  background: transparent;
  color: var(--theme-button-bg);
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease, -webkit-text-decoration 0.15s ease;
  transition: color 0.15s ease, text-decoration 0.15s ease, opacity 0.15s ease;
  transition: color 0.15s ease, text-decoration 0.15s ease, opacity 0.15s ease, -webkit-text-decoration 0.15s ease;
}
.btn-app-link:hover:not(:disabled) {
  text-decoration: underline;
  filter: none;
  transform: none;
  box-shadow: none;
}
.btn-app-link:disabled {
  color: var(--theme-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
/* Type 3 — borderless icon action; label expands after delay; tone = icon color */
.btn-app-icon-expand {
  --icon-expand-label-delay: 0.5s;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  flex-shrink: 0;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.2rem 0.5rem;
  font-size: var(--app-btn-font-size);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  border-radius: var(--app-btn-radius);
  border: none;
  background-color: transparent;
  color: var(--theme-label);
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    padding 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    gap 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  box-shadow: none;
}
.btn-app-icon-expand:hover:not(:disabled) {
  filter: none;
  transform: none;
  box-shadow: none;
  /* Extra horizontal inset when label shows; delayed with label so the chip doesn’t look empty early */
  padding: 0.22rem 0.85rem 0.22rem 0.55rem;
  gap: 0.4rem;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    padding 0.22s cubic-bezier(0.4, 0, 0.2, 1) var(--icon-expand-label-delay, 0.5s),
    gap 0.22s cubic-bezier(0.4, 0, 0.2, 1) var(--icon-expand-label-delay, 0.5s);
}
.btn-app-icon-expand:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-app-icon-expand:focus-visible {
  outline: 2px solid var(--theme-button-bg);
  outline-offset: 2px;
}
/* Optical centering for react-icons (stroke icons) next to label text */
.btn-app-icon-expand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125em;
  height: 1.125em;
  line-height: 0;
  color: inherit;
}
.btn-app-icon-expand__icon svg {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
}
.btn-app-icon-expand__label {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.25;
  padding-right: 0.125rem;
  /* Collapse quickly when hover ends (no delay) */
  transition:
    max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    opacity 0.12s ease 0s;
  color: inherit;
}
.btn-app-icon-expand:hover:not(:disabled) .btn-app-icon-expand__label {
  max-width: 12rem;
  opacity: 1;
  padding-right: 0.2rem;
  /* Wait --icon-expand-label-delay before growing (avoids jitter moving between icons) */
  transition:
    max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1) var(--icon-expand-label-delay, 0.5s),
    opacity 0.18s ease var(--icon-expand-label-delay, 0.5s),
    padding 0.2s ease var(--icon-expand-label-delay, 0.5s);
}
.btn-app-icon-expand--compact {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.45rem;
  font-size: 0.8125rem;
  gap: 0.3rem;
}
.btn-app-icon-expand--compact:hover:not(:disabled) {
  padding: 0.18rem 0.7rem 0.18rem 0.45rem;
  gap: 0.35rem;
}
.btn-app-icon-expand--compact .btn-app-icon-expand__icon {
  width: 1.1em;
  height: 1.1em;
}

/* Tight row of type-3 buttons: no flex gap (gaps cause hover flicker between targets) */
.table-actions-cluster {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  max-width: 100%;
  vertical-align: middle;
}
/* Space between controls without flex gap (avoids hover dead zones between icons). */
.table-actions-cluster > * + * {
  margin-left: 0.375rem;
}

/* Document line grids: keep +/− and fields on the same top baseline as h-9 inputs
   (SKU/qty note slots make the row taller than the control). */
[data-txn-line-grid] > table > tbody > tr > td {
  vertical-align: top;
}
[data-txn-line-actions] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  white-space: nowrap;
}
/* Optional opt-out for actions that should stay icon-only (used by Reverse in Transactions list). */
.btn-app-icon-expand--no-expand:hover:not(:disabled) {
  padding: 0.2rem 0.5rem;
  gap: 0.35rem;
}
.btn-app-icon-expand--no-expand.btn-app-icon-expand--compact:hover:not(:disabled) {
  padding: 0.15rem 0.4rem;
  gap: 0.3rem;
}
.btn-app-icon-expand--no-expand .btn-app-icon-expand__label,
.btn-app-icon-expand--no-expand:hover:not(:disabled) .btn-app-icon-expand__label {
  max-width: 0 !important;
  opacity: 0 !important;
  padding-right: 0 !important;
  transition: none !important;
}

/* Reserved width for tables so one expanded label does not squeeze other columns */
.col-actions-reserved--xl {
  width: 26rem;
  min-width: 26rem;
  box-sizing: border-box;
}
.col-actions-reserved--lg {
  width: 20rem;
  min-width: 20rem;
  box-sizing: border-box;
}
.col-actions-reserved--md {
  width: 15rem;
  min-width: 15rem;
  box-sizing: border-box;
}
.col-actions-reserved--sm {
  width: 11rem;
  min-width: 11rem;
  box-sizing: border-box;
}
.btn-app-icon-expand--primary {
  color: var(--theme-button-bg);
}
.btn-app-icon-expand--primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-button-bg) 12%, transparent);
  color: var(--theme-button-bg);
}
.btn-app-icon-expand--neutral {
  color: var(--theme-label);
}
.btn-app-icon-expand--neutral:hover:not(:disabled) {
  background-color: var(--theme-surface);
  color: var(--theme-heading);
}
.btn-app-icon-expand--danger {
  color: var(--theme-danger);
}
.btn-app-icon-expand--danger:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-danger) 14%, transparent);
  color: var(--theme-danger);
}
.btn-app-icon-expand--success {
  color: var(--theme-success);
}
.btn-app-icon-expand--success:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-success) 14%, transparent);
  color: var(--theme-success);
}
.btn-app-icon-expand--warning {
  color: var(--theme-warning);
}
.btn-app-icon-expand--warning:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-warning) 14%, transparent);
  color: var(--theme-warning);
}
/* Secondary / info actions — primary wash (not a fixed indigo) */
.btn-app-icon-expand--info {
  color: var(--primary-color);
}
.btn-app-icon-expand--info:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: color-mix(in srgb, var(--primary-color) 82%, #000);
}
/* Toolbar: compact icon+text same height */
.btn-app.btn-app--compact {
  min-height: calc(var(--app-btn-height) - 2px);
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}
.btn-app.btn-app--sm {
  min-height: 2rem;
  padding: 0 0.65rem;
  font-size: 0.75rem;
}
.btn-app.btn-app--icon-only {
  width: var(--app-btn-height);
  min-width: var(--app-btn-height);
  padding: 0;
  gap: 0;
}

/* Shared button styles for consistency (forms, headers, modals) */
.btn-primary {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: var(--button-primary-color) !important;
  color: var(--button-text-color) !important;
  transition: opacity var(--transition-duration), background-color var(--transition-duration), transform var(--transition-duration);
}
.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-outline {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-label);
  transition: background-color var(--transition-duration), border-color var(--transition-duration), color var(--transition-duration);
}
.btn-outline:hover {
  background-color: var(--theme-surface);
  border-color: color-mix(in srgb, var(--theme-muted) 60%, var(--theme-border));
}

.btn-plain {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.btn-plain:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 6%, transparent);
  box-shadow: none;
  filter: none;
}
.btn-plain:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 10%, transparent);
  transform: none;
  box-shadow: none;
}

/* Buttons stay flat on hover. Families below (btn-toggle, btn-icon, btn-app) add a wash. */
button:not(:disabled) {
  transition: background-color var(--transition-duration, 200ms), color var(--transition-duration, 200ms),
    border-color var(--transition-duration, 200ms), box-shadow var(--transition-duration, 200ms),
    transform var(--transition-duration, 200ms), opacity var(--transition-duration, 200ms),
    filter var(--transition-duration, 200ms);
}

/* Enable/disable switch: icon + label in one pill, wash on hover (no lift/shadow chip). */
.btn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.btn-toggle:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 7%, transparent);
  box-shadow: none;
  filter: none;
}
.btn-toggle:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 11%, transparent);
  transform: none;
  box-shadow: none;
}
.btn-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-toggle:focus-visible {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: 2px;
}

/* Link-style buttons (icon + text, no border): no shadow/filter on hover, underline for affordance */
button.btn-app-link:not(:disabled):hover,
button.btn-link:not(:disabled):hover {
  box-shadow: none;
  filter: none;
  text-decoration: underline;
}
button.btn-app-link:not(:disabled):active,
button.btn-link:not(:disabled):active {
  transform: none;
  box-shadow: none;
}

/* Icon-only buttons: circular hover so it matches the icon (no square popup) */
.btn-icon {
  border-radius: 9999px !important;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover {
  border-radius: 9999px !important;
}

/* Keep icon taps subtle: circular wash, no card-like popup or scale squash. */
button.btn-icon:not(:disabled):hover {
  box-shadow: none;
  filter: none;
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 8%, transparent);
}
button.btn-icon:not(:disabled):active {
  transform: none;
  box-shadow: none;
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 12%, transparent);
}

/* Tab headers should feel like segmented controls, not raised buttons. */
button.tab-header-btn:not(:disabled):hover,
button[role="tab"]:not(:disabled):hover,
button.app-tab:not(:disabled):hover {
  box-shadow: none;
  filter: none;
}
button.tab-header-btn:not(:disabled):active,
button[role="tab"]:not(:disabled):active,
button.app-tab:not(:disabled):active {
  transform: none;
  box-shadow: none;
}

/* App tab section — card shell: header strip + content panel (accounting-style). */
.app-tab-section {
  border: 1px solid var(--theme-border);
  border-radius: 0.75rem;
  background-color: var(--theme-menu-bg);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.07),
    0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.app-tab-section__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  /* Match .app-page-card__head so headers sit at the same position/spacing across page types */
  padding: 1.1rem 1.5rem 0.95rem;
  background: color-mix(in srgb, var(--theme-border) 10%, var(--theme-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 65%, transparent);
}
.app-tab-section__toolbar--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-tab-section__sticky-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--theme-menu-bg);
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.18);
}
.app-tab-section__sticky-head .app-tabs {
  border-bottom: 1px solid var(--theme-border);
}

/* Tab header strip — segmented pill control inside the section card. */
.app-tab-section .app-tabs,
.app-tabs {
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent);
  border-radius: 0;
  overflow: visible;
  padding: 1rem 1.25rem 1.125rem;
}
.app-tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--theme-border) 14%, var(--theme-surface));
  border: 1px solid color-mix(in srgb, var(--theme-border) 55%, transparent);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-tabs__list--equal {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0.125rem;
}
.app-tabs__list--equal .app-tabs__tooltip-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.app-tab.app-tab--equal-width {
  width: 100%;
  min-width: 0;
}
.app-tab {
  position: relative;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--theme-tab-inactive-text);
  box-sizing: border-box;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.app-tabs__list--equal .app-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0.75rem;
  min-height: 2.375rem;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}
.app-tab .dual-label {
  max-width: 100%;
  min-width: 0;
}
.app-tab:hover:not([aria-selected='true']) {
  color: var(--theme-general-heading);
  background: color-mix(in srgb, var(--theme-menu-bg) 45%, transparent);
}
.app-tab[aria-selected='true'] {
  color: var(--primary-color);
  font-weight: 600;
  background: var(--theme-menu-bg);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 1px 3px rgba(15, 23, 42, 0.08);
  z-index: 1;
}
.app-tab[aria-selected='true']::before {
  display: none;
}
.app-tab:focus {
  outline: none;
}
.app-tab:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Tab content panel — default card; flush when direct child of `.app-tab-section`. */
.app-tab-panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--theme-border);
  border-radius: 0.75rem;
  background-color: var(--theme-menu-bg);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.07),
    0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-tab-section > .app-tab-panel {
  margin-top: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Consistent hover for interactive elements (nav items, dropdown items, links) */
.interactive-hover {
  transition: background-color var(--transition-duration, 200ms), color var(--transition-duration, 200ms),
    border-color var(--transition-duration, 200ms), box-shadow var(--transition-duration, 200ms);
}
.interactive-hover:hover {
  background-color: color-mix(in srgb, var(--theme-heading, #111827) 6%, transparent);
}

/* --------------------------------------------------------------------------
   Tabular numbers (Tailwind `tabular-nums` = `font-variant-numeric: tabular-nums` only).
   With locale-grouped amounts (e.g. 16,145.00), some system/variable fonts render
   overlapping digits in Chrome/Edge. Use lining + tabular figures together.
   Applies anywhere `.tabular-nums` is used (transactions list, reports, dashboards).
   -------------------------------------------------------------------------- */
.tabular-nums {
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
}

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  .report-print-a4 {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .report-print-a4 table {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .report-print-a4 thead {
    display: table-header-group;
  }

  .report-print-a4 tfoot {
    display: table-footer-group;
  }

  .report-print-a4 tr,
  .report-print-a4 td,
  .report-print-a4 th {
    page-break-inside: avoid;
  }

  .report-print-group {
    break-inside: avoid-page;
    page-break-inside: avoid;
    margin-bottom: 8mm !important;
  }
}

/* ==========================================================================
   Reports index — hero, quick jump, recently viewed, group cards
   Same gradient/dot-pattern grammar as .dash-hero, tuned for a listing page.
   ========================================================================== */
.reports-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
  color: #fff;
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, #fff 20%, transparent) 0%, transparent 45%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color) 92%, #000 0%) 0%,
      color-mix(in srgb, var(--primary-color) 76%, #000 24%) 100%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.reports-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14% 130%, color-mix(in srgb, #fff 14%, transparent), transparent 42%),
    radial-gradient(circle, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  opacity: 0.5;
}
.reports-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #fff 20%, transparent);
  border: 1px solid color-mix(in srgb, #fff 32%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent);
  backdrop-filter: blur(4px);
}

/* Recently viewed rail: single scrollable row, gone entirely with no history. */
.reports-recents {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.125rem;
}
.reports-recents::-webkit-scrollbar {
  height: 5px;
}
.reports-recents::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-border) 80%, transparent);
  border-radius: 9999px;
}
.reports-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--theme-border);
  background: var(--theme-menu-bg);
  color: var(--theme-label);
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.reports-recent-chip:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--theme-border));
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 6%, var(--theme-menu-bg));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

/* Search field: a slow conic ring appears only while the field has focus. */
.reports-search {
  position: relative;
  border-radius: 0.75rem;
}
.reports-search::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--reports-search-angle, 0deg),
    transparent 0deg,
    transparent 250deg,
    color-mix(in srgb, var(--primary-color) 85%, transparent) 300deg,
    color-mix(in srgb, var(--primary-color) 85%, transparent) 330deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.reports-search:focus-within::before {
  opacity: 1;
  animation: reports-search-spin 2.4s linear infinite;
}
@property --reports-search-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes reports-search-spin {
  to { --reports-search-angle: 360deg; }
}

/* Quick jump: same inactive/active tokens as the app tab bar, own markup (nav + aria-current). */
.reports-quickjump {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.reports-quickjump::-webkit-scrollbar {
  display: none;
}
.reports-quickjump__pill {
  position: relative;
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--theme-tab-inactive-text);
  transition: color 150ms ease;
}
.reports-quickjump__pill:hover {
  color: var(--theme-general-heading);
}
.reports-quickjump__pill[aria-current='true'] {
  color: var(--theme-tab-active-text);
  font-weight: 600;
}
.reports-quickjump__indicator {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--theme-tab-active-bg);
  z-index: -1;
}

/* Group card: a flat, full width section shell (a top accent strip carries the section color,
   see the inline gradient bar in markup) instead of a colored card competing with its own rows. */
.reports-group-card {
  transition: box-shadow 200ms ease;
}
.reports-group-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* Report tile: neutral at rest (the icon badge is the only color until you interact), a
   cursor-tracked glow plus a lift and colored border on hover. --mx/--my are written by
   onMouseMove in ReportsGroupedIndex.jsx, one write per animation frame. */
.reports-link {
  position: relative;
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.reports-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--report-accent, var(--primary-color)) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.reports-link:hover {
  border-color: color-mix(in srgb, var(--report-accent, var(--primary-color)) 45%, var(--theme-border));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--report-accent, var(--primary-color)) 14%, transparent);
}
.reports-link:hover::before {
  opacity: 1;
}
.reports-link:active {
  transform: translateY(0);
}
.reports-link__icon {
  position: relative;
  transition: transform 160ms ease;
}
.reports-link:hover .reports-link__icon {
  transform: scale(1.08);
}
/* Not Tailwind's `.text-theme-muted` here: an existing global rule marks that utility
   `!important`, which would beat this hover override regardless of specificity. */
.reports-link__arrow {
  color: var(--theme-muted);
  transition: color 150ms ease, transform 150ms ease;
}
.reports-link:hover .reports-link__arrow {
  color: var(--report-accent, var(--primary-color));
}
/* Keyboard focus ring in the report's own accent color, not a fixed brand hue, so it stays
   correct under any company theme. Tailwind's `ring-primary` utility is a static color and
   would not follow --primary-color here. */
.reports-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--report-accent, var(--primary-color)) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .reports-search::before {
    animation: none !important;
    transition: none !important;
  }
  .reports-group-card,
  .reports-link,
  .reports-link::before,
  .reports-link__icon,
  .reports-recent-chip {
    transition: none !important;
  }
  .reports-link:hover,
  .reports-recent-chip:hover {
    transform: none !important;
  }
  .reports-link:hover::before {
    opacity: 0 !important;
  }
}

.selection\:\!bg-transparent *::-moz-selection {
  background-color: transparent !important;
}

.selection\:\!bg-transparent *::selection {
  background-color: transparent !important;
}

.selection\:\!text-transparent *::-moz-selection {
  color: transparent !important;
}

.selection\:\!text-transparent *::selection {
  color: transparent !important;
}

.selection\:\!bg-transparent::-moz-selection {
  background-color: transparent !important;
}

.selection\:\!bg-transparent::selection {
  background-color: transparent !important;
}

.selection\:\!text-transparent::-moz-selection {
  color: transparent !important;
}

.selection\:\!text-transparent::selection {
  color: transparent !important;
}

.placeholder\:font-semibold::-moz-placeholder {
  font-weight: 600;
}

.placeholder\:font-semibold::placeholder {
  font-weight: 600;
}

.placeholder\:\!text-transparent::-moz-placeholder {
  color: transparent !important;
}

.placeholder\:\!text-transparent::placeholder {
  color: transparent !important;
}

.placeholder\:text-theme-muted::-moz-placeholder {
  color: var(--theme-muted);
}

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

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

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

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

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

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

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

.after\:border-theme-border::after {
  content: var(--tw-content);
  border-color: var(--theme-border);
}

.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

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

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:rounded-t-lg:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:rounded-b-lg:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

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

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

.read-only\:bg-theme-surface:-moz-read-only {
  background-color: var(--theme-surface);
}

.read-only\:bg-theme-surface:read-only {
  background-color: var(--theme-surface);
}

.empty\:hidden:empty {
  display: none;
}

.focus-within\:border-primary:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--primary-color-channels) / var(--tw-border-opacity, 1));
}

.focus-within\:ring-1:focus-within {
  --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-within\:ring-2:focus-within {
  --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-within\:ring-primary:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--primary-color-channels) / var(--tw-ring-opacity, 1));
}

.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--primary-color-channels) / var(--tw-border-opacity, 1));
}

.hover\:border-primary\/40:hover {
  border-color: rgb(var(--primary-color-channels) / 0.4);
}

.hover\:border-theme-border:hover {
  border-color: var(--theme-border);
}

.hover\:border-theme-muted:hover {
  border-color: var(--theme-muted);
}

.hover\:bg-danger:hover {
  background-color: var(--theme-danger);
}

.hover\:bg-error-muted:hover {
  background-color: color-mix(in srgb, var(--theme-error) 12%, transparent);
}

.hover\:bg-primary\/5:hover {
  background-color: rgb(var(--primary-color-channels) / 0.05);
}

.hover\:bg-theme-menu-bg:hover {
  background-color: var(--theme-menu-bg);
}

.hover\:bg-theme-popup:hover {
  background-color: var(--theme-popup-bg);
}

.hover\:bg-theme-surface:hover {
  background-color: var(--theme-surface);
}

.hover\:text-danger:hover {
  color: var(--theme-danger);
}

.hover\:text-error:hover {
  color: var(--theme-error);
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--primary-color-channels) / var(--tw-text-opacity, 1));
}

.hover\:text-theme-heading:hover {
  color: var(--theme-general-heading);
}

.hover\:text-theme-label:hover {
  color: var(--theme-label);
}

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

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

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:fixed:focus {
  position: fixed;
}

.focus\:start-3:focus {
  inset-inline-start: 0.75rem;
}

.focus\:top-3:focus {
  top: 0.75rem;
}

.focus\:z-\[100\]:focus {
  z-index: 100;
}

.focus\:rounded-lg:focus {
  border-radius: 0.5rem;
}

.focus\:\!border-0:focus {
  border-width: 0px !important;
}

.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--primary-color-channels) / var(--tw-border-opacity, 1));
}

.focus\:border-primary\/50:focus {
  border-color: rgb(var(--primary-color-channels) / 0.5);
}

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

.focus\:bg-theme-popup:focus {
  background-color: var(--theme-popup-bg);
}

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

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

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

.focus\:font-medium:focus {
  font-weight: 500;
}

.focus\:text-theme-heading:focus {
  color: var(--theme-general-heading);
}

.focus\:shadow-lg:focus {
  --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);
}

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

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

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

.focus\:ring-0: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(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);
}

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

.focus\:ring-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--primary-color-channels) / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary\/30:focus {
  --tw-ring-color: rgb(var(--primary-color-channels) / 0.3);
}

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

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

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

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

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

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

.focus-visible\:outline-\[var\(--primary-color\)\]:focus-visible {
  outline-color: var(--primary-color);
}

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

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

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

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

.disabled\:\!cursor-default:disabled {
  cursor: default !important;
}

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

.disabled\:bg-theme-surface:disabled {
  background-color: var(--theme-surface);
}

.disabled\:\!opacity-100:disabled {
  opacity: 1 !important;
}

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

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

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

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

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

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

.group[open] .group-open\: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));
}

.group:focus-within .group-focus-within\:text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--primary-color-channels) / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--primary-color-channels) / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:translate-x-5 {
  --tw-translate-x: 1.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));
}

.peer:checked ~ .peer-checked\:bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--primary-color-channels) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  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));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

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

.peer:focus ~ .peer-focus\:ring-4 {
  --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);
}

.peer:focus ~ .peer-focus\:ring-primary\/20 {
  --tw-ring-color: rgb(var(--primary-color-channels) / 0.2);
}

@media not all and (min-width: 640px) {

  .max-sm\:fixed {
    position: fixed;
  }

  .max-sm\:inset-x-2 {
    left: 0.5rem;
    right: 0.5rem;
  }

  .max-sm\:top-3 {
    top: 0.75rem;
  }

  .max-sm\:z-50 {
    z-index: 50;
  }

  .max-sm\:hidden {
    display: none;
  }

  .max-sm\:w-10 {
    width: 2.5rem;
  }

  .max-sm\:shrink-0 {
    flex-shrink: 0;
  }

  .max-sm\:cursor-pointer {
    cursor: pointer;
  }

  .max-sm\:pe-0 {
    padding-inline-end: 0px;
  }

  .max-sm\:text-transparent {
    color: transparent;
  }

  .max-sm\:placeholder\:text-transparent::-moz-placeholder {
    color: transparent;
  }

  .max-sm\:placeholder\:text-transparent::placeholder {
    color: transparent;
  }
}

@media (min-width: 640px) {

  .sm\:absolute {
    position: absolute;
  }

  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .sm\:start-0 {
    inset-inline-start: 0px;
  }

  .sm\:start-3 {
    inset-inline-start: 0.75rem;
  }

  .sm\:top-full {
    top: 100%;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:m-3 {
    margin: 0.75rem;
  }

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

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

  .sm\:block {
    display: block;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-\[min\(42rem\2c calc\(100vw-2rem\)\)\] {
    width: min(42rem, calc(100vw - 2rem));
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-\[140px\] {
    max-width: 140px;
  }

  .sm\:max-w-\[14rem\] {
    max-width: 14rem;
  }

  .sm\:max-w-\[18rem\] {
    max-width: 18rem;
  }

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

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

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

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

  .sm\:grid-cols-\[140px_1fr\] {
    grid-template-columns: 140px 1fr;
  }

  .sm\:grid-cols-\[2rem_minmax\(0\2c 1fr\)_10\.5rem_6\.25rem_10\.5rem\] {
    grid-template-columns: 2rem minmax(0,1fr) 10.5rem 6.25rem 10.5rem;
  }

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

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

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

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

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

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

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .sm\:border {
    border-width: 1px;
  }

  .sm\:border-theme-border {
    border-color: var(--theme-border);
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

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

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

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

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

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

  .sm\:pe-16 {
    padding-inline-end: 4rem;
  }

  .sm\:ps-10 {
    padding-inline-start: 2.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {

  .md\:sticky {
    position: sticky;
  }

  .md\:top-4 {
    top: 1rem;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

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

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

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

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

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

  .md\:grid-cols-\[14rem_1fr\] {
    grid-template-columns: 14rem 1fr;
  }

  .md\:grid-cols-\[16rem_1fr\] {
    grid-template-columns: 16rem 1fr;
  }

  .md\:grid-cols-\[minmax\(12rem\2c 1fr\)_minmax\(12rem\2c 1fr\)_minmax\(10rem\2c 0\.6fr\)\] {
    grid-template-columns: minmax(12rem,1fr) minmax(12rem,1fr) minmax(10rem,0.6fr);
  }

  .md\:grid-cols-\[minmax\(13rem\2c 18\%\)_minmax\(0\2c 1fr\)_minmax\(14rem\2c 28\%\)\] {
    grid-template-columns: minmax(13rem,18%) minmax(0,1fr) minmax(14rem,28%);
  }
}

@media (min-width: 1024px) {

  .lg\: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;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

  .lg\:grid-cols-\[18rem_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 18rem minmax(0,1fr);
  }

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

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

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

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

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

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

  .lg\:border-s {
    border-inline-start-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

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

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:pe-4 {
    padding-inline-end: 1rem;
  }

  .lg\:ps-4 {
    padding-inline-start: 1rem;
  }

  .lg\:ps-\[var\(--sidebar-width-collapsed\)\] {
    padding-inline-start: var(--sidebar-width-collapsed);
  }

  .lg\:ps-\[var\(--sidebar-width-expanded\)\] {
    padding-inline-start: var(--sidebar-width-expanded);
  }

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

  .first\:lg\:ps-0:first-child {
    padding-inline-start: 0px;
  }

  .last\:lg\:pe-0:last-child {
    padding-inline-end: 0px;
  }
}

@media (min-width: 1280px) {

  .xl\:mb-0 {
    margin-bottom: 0px;
  }

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

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

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

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

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

  .xl\:grid-cols-\[300px_1fr\] {
    grid-template-columns: 300px 1fr;
  }

  .xl\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .xl\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
  --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));
}

.rtl\:tracking-normal:where([dir="rtl"], [dir="rtl"] *) {
  letter-spacing: 0em;
}

.group:hover .rtl\:group-hover\:-translate-x-0\.5:where([dir="rtl"], [dir="rtl"] *) {
  --tw-translate-x: -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));
}

@media print {

  .print\:block {
    display: block;
  }

  .print\:hidden {
    display: none;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:disabled_input\]\:bg-theme-surface:disabled input {
  background-color: var(--theme-surface);
}

.\[\&\:disabled_select\]\:bg-theme-surface:disabled select {
  background-color: var(--theme-surface);
}

.\[\&\:disabled_textarea\]\:bg-theme-surface:disabled textarea {
  background-color: var(--theme-surface);
}

.\[\&\:not\(\:has\(\[data-testid\=source-billing-section\]\)\)\]\:hidden:not(:has([data-testid=source-billing-section])) {
  display: none;
}

.\[\&\>button\]\:w-full>button {
  width: 100%;
}

.\[\&\>button\]\:justify-start>button {
  justify-content: flex-start;
}

.\[\&_\.btn-app\]\:h-\[30px\] .btn-app {
  height: 30px;
}

.\[\&_\.btn-app\]\:min-h-10 .btn-app {
  min-height: 2.5rem;
}

.\[\&_\.btn-app\]\:min-h-\[30px\] .btn-app {
  min-height: 30px;
}

.\[\&_\.btn-app\]\:rounded-\[9px\] .btn-app {
  border-radius: 9px;
}

.\[\&_\.btn-app\]\:px-3 .btn-app {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.\[\&_\.btn-app\]\:px-4 .btn-app {
  padding-left: 1rem;
  padding-right: 1rem;
}

.\[\&_\.btn-app\]\:text-\[11px\] .btn-app {
  font-size: 11px;
}

.\[\&_\.btn-app\]\:text-\[12px\] .btn-app {
  font-size: 12px;
}

.\[\&_\.btn-app\]\:text-sm .btn-app {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.\[\&_button\:hover\:not\(\:disabled\)\]\:bg-theme-surface button:hover:not(:disabled) {
  background-color: var(--theme-surface);
}

.\[\&_button\]\:\!h-\[30px\] button {
  height: 30px !important;
}

.\[\&_button\]\:\!min-h-\[30px\] button {
  min-height: 30px !important;
}

.\[\&_button\]\:w-full button {
  width: 100%;
}

.\[\&_button\]\:\!cursor-default button {
  cursor: default !important;
}

.\[\&_button\]\:justify-start button {
  justify-content: flex-start;
}

.\[\&_button\]\:\!rounded-\[9px\] button {
  border-radius: 9px !important;
}

.\[\&_button\]\:rounded-lg button {
  border-radius: 0.5rem;
}

.\[\&_button\]\:border-transparent button {
  border-color: transparent;
}

.\[\&_button\]\:bg-transparent button {
  background-color: transparent;
}

.\[\&_button\]\:\!px-3 button {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.\[\&_button\]\:text-start button {
  text-align: start;
}

.\[\&_button\]\:\!text-\[12px\] button {
  font-size: 12px !important;
}

.\[\&_button\]\:shadow-none button {
  --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);
}

.\[\&_input\]\:\!cursor-default input {
  cursor: default !important;
}

.\[\&_td\]\:px-2 td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_td\]\:py-1\.5 td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_th\]\:px-2 th {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_th\]\:py-1\.5 th {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}