:root {
  --white: #FFFFFF;
  --black: var(--gray-12);
  --warm-paper-gray: #F6F8F7;
  --near-black-teal: #121A18;

  --smito-teal-900:#0B3B39;
  --smito-teal-800:#0F4B48;
  --smito-teal-700:#135E5A;
  --smito-teal-600:#17756F;
  --smito-teal-500:#1E8C84;
  --smito-teal-300:#7FBFBA;
  --smito-teal-100:#DCEEEC;
  --smito-teal-50:#EFF7F6;

  --smito-gray-700:#45514F;
  --smito-gray-500:#5C6A68;
  --smito-gray-300:#B7C2C0;
  --smito-gray-200:#DCE3E1;
  --smito-gray-100:#ECF0EF;
  --smito-gray-50:#F6F8F7;

  --smito-amber-600:#C58527;
  --smito-amber-500:#E8A33D;
  --smito-amber-100:#FBF0DC;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:24px;

  --color-primary: var(--warm-paper-gray);
  --color-primary-2: var(--stone-0);
  --color-secondary: var(--smito-gray-700);
  --color-secondary-muted: var(--smito-gray-500);
  --color-secondary-2: var(--smito-teal-500);

  --color-accent-1: var(--smito-teal-600);
  --color-accent-1-text: #FFFFFF;
  --color-accent-2: transparent;
  --color-accent-2-text: var(--color-secondary);

  --surface-card-light: #FFFFFF;
  --surface-card-dark: #1A2422;
  --surface-card: var(--surface-card-light);

  --surface-2: var(--smito-teal-50);
  --surface-3: var(--smito-teal-100);
  --surface-4: var(--smito-teal-300);

  --surface-hover:var(--smito-teal-50);

  --h-color: var(--gray-11);
  --nav-color: var(--surface-card);
  /* --nav-link-color: var(--white); */
  /* --nav-link-hover-color: var(--teal-6); */
  --input-border-color: var(--smito-gray-200);
  --input-focus-border-color: var(--smito-teal-500);
  --input-invalid-border-color: var(--color-error-text);
  --fieldset-border-color: var(--smito-gray-200);
  --table-border-color: var(--smito-gray-200);
  --box-border-color: var(--smito-gray-200);
  --link-color: var(--smito-teal-700);
  --button-border: 1px solid;
  --button-primary-border-color: var(--color-accent-1);
  --button-secondary-border-color: var(--teal-6);
  --button-background-color: var(--teal-9);
  --button-font-size: 13px;
  --button-radius: var(--radius-md);
  --button-disabled-color: var(--gray-5);
  --color-active-tab: var(--teal-10);
  --menu-highlight-color: var(--teal-0);
  --row-odd-color: var(--stone-2);
  --row-even-color: var(--stone-1);
  --thead-color: transparent;
  --tfoot-color: var(--color-primary);
  --label-color: var(--color-secondary-muted);

  --color-success: #E4F2EB;
  --color-success-text: #23664A;
  --color-info: var(--smito-gray-100);
  --color-info-text: var(--smito-gray-700);
  --color-warning: #FBF0DC;
  --color-warning-text: #96600F;
  --color-error: #F9E9E6;
  --color-error-text: #A84437;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --smito-teal-800:#4CC2B6;
    --smito-teal-700:#38B0A4;
    --smito-teal-600:#279C90;
    --smito-teal-500:#45BDB1;
    --smito-teal-300:#3E6B66;
    --smito-teal-100:#1E3733;
    --smito-teal-50:#152623;

    --smito-gray-700:#C2CDCA;
    --smito-gray-500:#8CA09B;
    --smito-gray-300:#435350;
    --smito-gray-200:#2B3734;
    --smito-gray-100:#232D2A;
    --smito-gray-50:#121A18;

    --smito-amber-600:#F0B457;
    --smito-amber-100:#3A2E17;

    --color-primary: var(--near-black-teal);
    --color-primary-2: var(--stone-12);
    --surface-card: var(--surface-card-dark);
    --color-secondary: var(--smito-gray-700);
    --color-secondary-2: var(--cyan-6);
    --h-color: var(--gray-3);
    --fieldset-border-color: var(--box-border-color);
    --box-border-color: var(--gray-8);
    --button-secondary-border-color: var(--teal-10);
    --color-active-tab: var(--teal-3);
    --color-accent-1-text: #0E1917;
    --color-accent-2-text: var(--color-secondary);
    --menu-highlight-color: var(--teal-12);
    --row-odd-color: var(--stone-11);
    --row-even-color: var(--stone-10);

    --color-success: #1B2F26;
    --color-success-text: #5BBF93;
    --color-warning: #332918;
    --color-warning-text: #E0A247;
    --color-error: #33201C;
    --color-error-text: #E07B6C;
  }
}

@media print {
  @page {
    margin: 0;
  }

  header,
  footer {
    display: none !important;
  }

  .buttons,
  .print-hidden {
    display: none !important;
  }
}

body {
  font-family: var(--font-system-ui);
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

::placeholder {
  color: var(--gray-6);
}

.app-layout {
  display: flex;
  align-items: flex-start;
}

.app-layout > .wrapper {
  flex: 1;
  min-width: 0;
}

.assistant-rail {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--box-border-color);
  padding: var(--size-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.assistant-rail.is-hidden {
  display: none;
}

#assistant-rail-messages .assistant-message + .assistant-message {
  border-top: 1px solid var(--box-border-color);
  margin-top: var(--size-4);
  padding-top: var(--size-4);
}

.assistant-result-card {
  display: block;
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-3);
  padding: var(--size-4);
  cursor: pointer;
  color: inherit;
}

.assistant-result-card:hover {
  background-color: var(--color-info);
}

@media screen and (max-width: 1023px) {
  .assistant-rail {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    height: auto;
    max-height: 80vh;
    border-left: none;
    border-top: 1px solid var(--box-border-color);
    border-radius: var(--radius-3) var(--radius-3) 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 50;
    background-color: var(--color-primary);
  }
}

.assistant-rail-backdrop {
  display: none;
}

@media screen and (max-width: 1023px) {
  .assistant-rail-backdrop:not(.is-hidden) {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 45;
  }
}

header {
  padding: var(--size-4) var(--size-2);
  background-color: var(--nav-color);
  border-bottom: 1px solid var(--box-border-color);
  color: var(--color-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav button {
  color: currentColor;
}

nav button svg {
  display: block;
}

#assistant-toggle-button.active {
  color: var(--color-active-tab);
}

nav a {
  /* color: var(--nav-link-color); */
  color: currentColor;
  font-weight: 500;
  position: relative;
}

/*
nav .header-logo a:hover,
nav .right-items a:hover {
  color: var(--nav-link-hover-color);
}
*/

.nav-item a:after {
  content: '';
  height: 2px;
  width: 0;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  background-color: currentColor;
  transition: width 250ms ease-out;
}

.nav-item a:hover::after {
  width: 100%;
}

.nav-item a.active {
  color: var(--color-active-tab);
}

.nav-item a.active::after {
  width: 100%;
  background-color: var(--color-active-tab);
}

nav .right-items {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.25rem;
}

nav .right-items .organization {
  text-align: right;
}

.switcher-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  padding: var(--size-1) var(--size-2);
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.switcher-pill:hover {
  background-color: var(--surface-hover);
  border-color: var(--color-accent-1);
}

.switcher-pill svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.header-popover {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--smito-teal-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4);
  background-color: var(--surface-card);
  opacity: 0;
  transform: scale(0.96) translateY(0.5rem);
  transition:
    opacity 0.2s var(--ease-2),
    transform 0.2s var(--ease-2);
}

.header-popover:popover-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  .header-popover:popover-open {
    opacity: 0;
    transform: scale(0.96) translateY(0.5rem);
  }
}

.launcher-switcher {
  display: flex;
  justify-content: flex-end;
  padding: var(--size-3) var(--size-3) 0;
}

.launcher-menu {
  width: min(calc(100vw - var(--size-3)), 150ch);
  padding: var(--size-3);
  background-color: var(--surface-card);
}

.launcher-menu-footer {
  margin-top: var(--size-3);
}

#launcher-menu-popover {
  position-area: bottom span-left;
  max-height: min(calc(100svh - var(--size-9)), 60rem);
  overflow-y: auto;
}

#profile-popover {
  position-area: bottom span-right;
  padding: var(--size-3);
  transform: translateX(1rem);
}

#profile-popover:popover-open {
  transform: translateX(0);
}

@starting-style {
  #profile-popover:popover-open {
    transform: translateX(1rem);
  }
}

@media screen and (min-width: 1280px) {
  #profile-popover {
    position-area: bottom span-left;
  }
}

main {
  min-height: calc(100svh - 10.5rem);
}

footer {
  padding: var(--size-7);
  display: flex;
  align-items: center;
  flex-direction: column;
}

footer>div {
  font-size: small;
}

section {
  padding-block: var(--size-3);
}

dialog {
  min-width: 18rem;
  background-color: var(--color-primary);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.header-logo {
  padding-right: 2rem;
}

.header-logo a {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  font-family: var(--font-rounded-sans);
  font-weight: bold;
  font-size: larger;
  white-space: nowrap;
}

.header-logo img {
  display: block;
  width: 1.75rem;
  height: auto;
}

.nav-items-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-out;

  position: absolute;
  background-color: var(--nav-color);
  top: 4rem;
  left: 0;
  width: 100vw;
}

.nav-items {
  overflow: hidden;
  padding: 0 var(--size-3);
}

.nav-item {
   /*padding-block: var(--size-2);*/
}

@media screen and (min-width: 1280px) {
  .nav-items-wrapper {
    flex-grow: 1;
    display: block;
    position: static;
    width: auto;
  }

  .nav-items {
    height: auto;
    position: static;
    display: flex;
    gap: var(--size-4);
  }

  .nav-item {
    /* padding: var(--size-1); */
  }
}

v-menu-item {
  display: contents;
}

.page-heading-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-3);
  padding-block: var(--size-3);
  border-radius: var(--radius-lg);
}

@media screen and (min-width: 640px) {
  .page-heading-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.page-heading-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-3);
}

.page-heading-title h1 {
  margin: 0;
  padding: 0;
  font-size: 1.375rem;
}

.page-heading-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-2);
  font-size: smaller;
}

.page-heading-metric {
  text-align: left;
}

@media screen and (min-width: 640px) {
  .page-heading-metric {
    text-align: right;
  }
}

.page-heading-metric .label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smito-gray-300);
}

.page-heading-metric .value {
  font-size: 1.375rem;
  font-weight: 700;
}

.detail-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-4);
  align-items: start;
  margin-top: var(--size-4);
}

.detail-page-main {
  min-width: 0;
}

.detail-page-rail {
  display: none;
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--size-4);
  --card-background-color: var(--color-primary);
}

@media screen and (min-width: 1024px) {
  .detail-page-layout.has-rail {
    grid-template-columns: 1fr minmax(300px, 360px);
  }

  .detail-page-rail {
    display: block;
    position: sticky;
    top: 9rem;
  }
}

.page-menu {
  display: flex;
  gap: var(--size-2);
  background-color: var(--surface-card);
  position: sticky;
  top: 4rem;
  z-index: 2;
}

.page-menu:has(.button) {
  padding: var(--size-2);
  border: 1px solid var(--box-border-color);
}

@media screen and (min-width: 1024px) {
  .page-menu {
    align-items: center;
  }

  .page-menu:not(:has(#page-menu-advanced-popover :is(a, button):not(.mobile-advanced-only))) .page-menu-advanced {
    display: none;
  }
}

.page-menu-items {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  overflow: auto;
  min-width: 0;
  flex: 1;
}

.page-menu-item {
  display: flex;
}

.page-menu-advanced {
  flex-shrink: 0;
  margin-left: auto;
}

.popup-menu .mobile-advanced-only {
  display: none;
}

@media screen and (max-width: 1023px) {
  .page-menu:has(.page-menu-advanced) .page-menu-items .page-menu-item:not(:has(.primary)) {
    display: none;
  }

  .popup-menu .mobile-advanced-only {
    display: block;
  }
}

#page-menu-advanced-popover {
  position-area: bottom span-left;
}

.context-menu {
  display: flex;
  gap: var(--size-1);
  position: absolute;
  top: var(--size-2);
  right: var(--size-2);
  align-items: center;
}

.context-menu .button {
  padding: var(--size-1) var(--size-3);
}

.context-menu-advanced-popover {
  position-area: bottom span-left;
}

:where(textarea, select, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"])) {
  background-color: var(--surface-card);
  border: var(--border-size-1) solid var(--input-border-color);
  border-radius: var(--radius-2);
  padding: .2rem .5rem;
  width: 100%;
  height: 2rem;
}

:where(textarea:invalid, select:invalid, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]):invalid) {
  border-color: var(--input-invalid-border-color);
}

:where(textarea:focus, select:focus, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]):focus) {
  outline: 0;
  border-color: var(--input-focus-border-color);
}

:where(textarea) {
  resize: vertical;
  height: auto;
}

input[type="checkbox"] {
  width: auto;
  height: auto;
  accent-color: var(--color-accent-1);
}

input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only,
input[type="time"]:read-only {
  background-color: var(--surface-2);
}

label {
  font-size: var(--label-font-size, 0.8rem);
  color: var(--label-color, var(--gray-6));
}

fieldset {
  border-width: 0;
  padding: 0;
}

fieldset.has-border {
  padding: var(--size-5) var(--size-3) var(--size-2) var(--size-3);
  background-color: var(--surface-card);

  legend {
    position: relative;
    top: var(--size-5);
    font-weight: 500;
    text-align: center;
    font-size: var(--size-4);
    color: var(--color-secondary-2);
  }
}

.summary-card {
  padding: var(--size-3);
  background-color: var(--surface-card);
  border: 1px solid var(--box-border-color);
  border-radius: var(--radius-lg);
}

fieldset,
input,
select,
textarea {
  /* margin-bottom: .25rem; */
}

iframe {
  width: 100%;
  height: calc(100% - 4.2rem);
}

.fields {
  display: grid;
	gap: var(--grid-gap);
}

/*
.summary.fields {
  grid-auto-rows: 1fr;
}
*/

.fields[data-columns="1"] {
  grid-template-columns: 1fr;
  grid-auto-flow: initial;
}

.fields[data-columns="2"] {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: initial;
}

.fields[data-columns="3"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: initial;
}

@media screen and (min-width: 1024px) {
  .fields[data-tablet-columns="2"] {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="3"] {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="4"] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }

  .fields[data-tablet-columns="5"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: initial;
  }
}

.field {
  padding-block: var(--size-1);
}

.field.is-full-row {
  grid-column: 1 / -1;
}

.button {
  border: var(--button-border, none);
  border-radius: var(--radius-md);
  color: var(--color-accent-1-text);
  cursor: pointer;
  white-space: nowrap;
  padding: var(--size-2) var(--size-4);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}

#context-menu-advanced-button.button,
#page-menu-advanced-button.button {
  padding: .4rem var(--size-3);
}

.button:hover {
  filter: brightness(120%);
}

.button.primary {
  border: var(--button-primary-border, var(--button-border, none));
  background-color: var(--color-accent-1);
  border-color: var(--button-primary-border-color);
}

.button.secondary {
  border: var(--button-secondary-border, var(--button-border, none));
  background-color: var(--color-accent-2);
  border-color: var(--button-secondary-border-color);
  color: var(--color-accent-2-text, var(--color-secondary-light));
}

.button.secondary:hover,
.button.icon:hover {
  filter: brightness(120%);
}

.button.icon {
  color: var(--color-accent-2-text, var(--color-secondary-light));
  background-color: var(--color-accent-2);
}

.button.danger {
  background-color: inherit;
  border-color: var(--red-8);
  color: var(--red-8);
}

.button.danger:hover {
  filter: brightness(120%);
}

.button.light {
  border: none;
  background-color: inherit;
  color: var(--link-color);
  padding: 0 var(--size-1);
  text-transform: none;
}

.button.light:hover {
  filter: brightness(120%);
}

.button.icon {
  border: none;
  font-size: 0;
  background-color: inherit;
  color: var(--link-color);
}

.button:disabled {
  background-color: var(--button-disabled-color);
  cursor: not-allowed;
}

.button.secondary:disabled {
  background-color: inherit;
  color: var(--button-disabled-color);
}

form[aria-busy="true"] button[type="submit"] {
  position: relative;
  cursor: wait;
  pointer-events: none;
  padding-inline-end: calc(var(--size-4) + 1.2em);
}

form[aria-busy="true"] button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--size-3);
  width: 0.9em;
  height: 0.9em;
  margin-top: -0.45em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-busy-spin 0.6s linear infinite;
}

@keyframes button-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

.dialog-close-button {
  position: absolute;
  top: var(--size-2);
  right: var(--size-2);
  background-color: var(--red-8);
  color: var(--white);
  border: none;
  cursor: pointer;
  padding: .3rem var(--size-3);
}

.dialog-close-button:hover {
  filter: brightness(120%);
}

.buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  padding-top: var(--size-2);
}

.buttons.right {
  justify-content: right;
}

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

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

.buttons.search-buttons {
  border-top: 1px solid var(--box-border-color);
  margin-top: var(--size-2);
  padding-top: var(--size-3);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-rounded-sans);
  padding-block: var(--size-2);
  color: var(--h-color);
}

h1 {
  font-size: var(--font-size-4);
  padding-block: var(--size-4);
}

h2 {
  font-size: var(--font-size-3);
}

.dialog-title {
  font-weight: bold;
  font-family: var(--font-rounded-sans);
  color: var(--h-color);
}

.dialog-content {
  margin-top: var(--size-5);
}

a {
  text-decoration: none;
  color: var(--link-color)
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table-wrapper {
  padding: var(--size-1) 0;
  overflow: auto;
  max-height: 80vh;
}

.table-wrapper.is-small {
  max-height: 30vh;
}

td,
th {
  /* border: var(--border-size-1) solid var(--table-border-color); */
  padding: var(--size-3) var(--size-4);
}

th {
  text-align: left;
}

thead {
  background-color: var(--thead-color);
}

tfoot {
  background-color: var(--tfoot-color);
}

table.list {
  font-size: smaller;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-card) ;
}

table.list a {
  display: block;
}

table.list tbody tr,
table.list thead tr,
table.list tfoot tr {
  /*background-color: var(--row-background-color);*/
  border-bottom: 1px solid var(--box-border-color);
}

table.list caption.table-caption {
  font-size: larger;
  font-weight: 700;
  background-color: var(--surface-2);
  padding-block: var(--size-2);
}

table.list caption.no-rows-caption {
  caption-side: bottom;
  padding-block: var(--size-1);
}

table.cards-table thead {
  display: none;
}

table.cards-table tbody {
  display: grid;
  gap: var(--size-2);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

table.cards-table tr {
  padding: 1rem;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  background-color: var(--surface-2);
}

table.cards-table td {
  display: block;
  padding: 0;
  border: none;
  text-align: left;
}

table.cards-table td::before {
  content: attr(data-label);
}

table.cards-table td.list-price {
  text-decoration: line-through;
}

table.summary {
  font-size: smaller;
  padding: var(--size-1) 0;
}

table.summary td {
  padding: .25rem 1rem;
}

form.small {
  max-width: var(--size-14);
  margin-inline: auto;
}

form.medium {
  max-width: 40rem;
  margin-inline: auto;
}

.message {
  color: var(--smito-gray-500);
  padding: var(--size-5);
}

.message.is-success {
  background-color: var(--color-success);
  color: var(--color-success-text);
}

.message.is-info {
  background-color: var(--color-info);
  color: var(--color-info-text);
}

.message.is-warning {
  background-color: var(--color-warning);
  color: var(--color-warning-text);
}

.message.is-error {
  background-color: var(--color-error);
  color: var(--color-error-text);
}

.confirmation-message {
  padding: var(--size-3) var(--size-5);
}

section.small {
  width: min(30rem, calc(100vw - 3rem));
  margin: 0 auto;
}

section.medium {
  width: min(50rem, calc(100vw - 3rem));
  margin: 0 auto;
}

section.large {
  width: min(80rem, calc(100vw - 3rem));
  margin: 0 auto;
}

.summary {
  font-size: smaller;
}

.highlights {
  font-size: var(--size-4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 80vw), 1fr));
  gap: 1rem;
}

.menu-group-card {
  padding-bottom: 1rem;
  border-radius: var(--radius-3);
}

.menu-group-card .cards {
  padding-top: var(--size-2);
  border-top: 2px solid var(--color-accent-1);
  font-size: smaller;
  font-weight: bold;
}

.menu-card {
  --_card-background-color: var(--color-primary);
  --_card-border-color: var(--box-border-color);
  --link-color: var(--color-secondary);
	padding: var(--size-3);
	background-color: var(--_card-background-color);
	border-radius: var(--rounded-corner-radius, var(--radius-2));
	overflow: hidden;
	position: relative;
  border: 1px solid var(--_card-border-color);
  border-radius: var(--radius-3);
}

.menu-card:hover {
  --_card-border-color: var(--color-accent-1);
  --link-color: var(--color-accent-1);
}

.menu-card-footer {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.menu-card-footer p {
  font-size: smaller;
  font-weight: normal;
  color: var(--color-secondary-muted);
}

.radio-group {
  max-height: max(5rem, 50vh);
  overflow-y: scroll;
}

.tabs {
  align-items: center;
  display: flex;
  gap: var(--size-1);
  border-bottom: var(--border-size-1) solid var(--table-border-color);
  overflow-x: auto;
  margin-bottom: var(--size-2);
}

.tab {
  padding: var(--size-2) var(--size-3);
  text-wrap: nowrap;
}

a.tab {
  color: inherit;
  font-weight: 500;
}

a.tab.active {
  color: var(--color-active-tab);
}

.tab.active {
  border-bottom: var(--border-size-1) solid;
  border-color: var(--color-active-tab);
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background-color: var(--surface-2);
  border: var(--border-size-1) solid var(--table-border-color);
  border-radius: var(--radius-round);
  margin-bottom: var(--size-2);
  max-width: 100%;
  overflow-x: auto;
}

.segmented-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-label {
  padding: var(--size-1) var(--size-3);
  border-radius: var(--radius-round);
  font-size: 13px;
  font-weight: 500;
  text-wrap: nowrap;
  color: inherit;
  cursor: pointer;
  user-select: none;
}

.segmented-input:checked + .segmented-label {
  background-color: var(--color-active-tab);
  color: var(--color-accent-1-text);
}

.segmented-input:focus-visible + .segmented-label {
  outline: 2px solid var(--color-active-tab);
  outline-offset: 2px;
}

.telegram-login-widget {
  height: 3rem;
  text-align: center;
  padding: 1rem;
}

.row-button {
  padding: .1rem var(--size-3);
}

ul.popup-menu {
  list-style: none;
}

.popup-menu {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding-left: 0;
  border: var(--border-size-1) solid var(--table-border-color);
  min-width: var(--size-14);
}

.popup-menu a {
  color: var(--color-secondary);
  display: block;
}

.popup-menu li a {
  padding-block: var(--size-2);
  padding-inline: var(--size-3);
}

.popup-menu li a:hover {
  background-color: var(--menu-highlight-color);
}

img.barcode {
  aspect-ratio: 2 / 1;
  min-width: 180px;
}

img.qr-code {
  max-width: min(100%, var(--size-14));
}

video.barcode-scanner-video {
  width: 100%;
  height: 10rem;
}

.generic-element-list {
  list-style: none;
  padding-left: 0;
}

.incoming-message {
  padding-right: 2rem;
}

.outgoing-message {
  padding-left: 2rem;
  text-align: right;
}

.message-timestamp {
  color: var(--color-secondary-muted);
}

/* Toasts are promoted to the top layer via the Popover API (see toast.js) so they render
   above an open dialog's backdrop. Neutralize the [popover] UA default styles that would
   otherwise fight Toastify's own positioning/appearance. :where() keeps this rule's
   specificity down to the attribute selector alone, so it never outranks Toastify's own
   single-class positioning rules (.toastify-center/-left/-right/-top/-bottom) - only `top`
   is reset here since that's the one side Toastify never sets itself for a bottom-gravity
   toast; left/right/bottom are left alone so Toastify's own positioning still wins. */
:where(.toastify)[popover] {
  top: auto;
  border: none;
  overflow: visible;
}