@import "actiontext.css";
:root {
  --font-family-bitter: "Bitter";
  --line-height-headers: 1.1;
  --line-height-body: 1.5;
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-xxxl: 2rem;
  --font-size-xxxxl: 2.5rem;
  --color-text-header: hsl(0, 1%, 16%);
  --color-text-body: hsl(0, 5%, 25%);
  --color-text-muted: hsl(0, 1%, 44%);
  --space-xxxs: 0.25rem;
  --space-xxs: 0.375rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 2.5rem;
  --space-xxxl: 3rem;
  --space-xxxxl: 4rem;
  --color-primary: rgb(23, 173, 146);
  --color-primary-opacity: rgba(23, 173, 146, .1);
  --color-primary-rotate: #313945;
  --color-primary-bg: hsl(0, 85%, 96%);
  --color-secondary: hsl(101, 45%, 56%);
  --color-secondary-bg: hsl(101, 88%, 93%);
  --color-secondary-rotate: hsl(120, 45%, 56%);
  --color-tertiary: hsl(49, 89%, 64%);
  --color-glint: hsl(210, 100%, 82%);
  --color-link: #313945;
  --color-primary-9e: rgb(0, 253, 207);
  --color-secondary-9e: #0000ff;
  --color-grey-dark-9e: #313945;
  --color-grey-light-9e: #717780;
  --hightlight-color: red;
  --color-orange: orange;
  --color-notice: hsl(38, 69%, 39%);
  --color-notice-bg: hsla(38, 69%, 39%, 0.09);
  --color-success: hsl(101, 60%, 22%);
  --color-error: hsl(350, 60%, 32%);
  --color-false:hsl(350, 67%, 50%);
  --color-awv-rgb: rgb(255, 192, 192);
  --color-awv: rgba(255,33,33,0.15);
  --color-true:hsl(120, 67%, 50%);
  --color-generated:hsl(120, 26%, 84%);
  --color-sent:hsl(30, 70%, 85%);
  --color-draft:hsl(300, 20%, 84%);
  --color-overdue:hsl(0, 26%, 84%);
  --color-cancellation:hsl(49, 26%, 84%);
  --color-white: hsl(0, 0%, 100%);
  --color-background: hsl(30, 50%, 98%);
  --color-light: hsl(0, 6%, 93%);
  --color-row-hover: hsl(30, 45%, 96.5%);
  --color-dark: var(--color-text-header);
  --border-radius: 0.375rem;
  --border: solid 2px var(--color-light);
  --shadow-large: 2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small: 1px 3px 6px hsl(0 0% 0% / 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--color-background);
  color: var(--color-text-body);
  line-height: var(--line-height-body);
  font-family: var(--font-family-bitter);
  font-variant-numeric: tabular-nums;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-header);
  line-height: var(--line-height-headers);
}

h1 {
  font-size: var(--font-size-xxl);
}

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

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-l);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 200ms;
}
a:hover, a:focus, a:active {
  color: var(--color-primary);
}

[hidden] {
  display: none !important;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
}

.gu-mirror {
  display: block;
}
.gu-mirror * {
  cursor: grabbing;
}

.btn {
  display: inline-block;
  padding: var(--space-xxs) var(--space-m);
  border-radius: var(--border-radius);
  background-origin: border-box;
  background-color: transparent;
  border: solid 2px transparent;
  text-decoration: none;
  cursor: pointer;
  transition: filter 400ms, color 200ms;
}
.btn:hover, .btn:focus, .btn:focus-within, .btn:active {
  transition: filter 250ms, color 200ms;
}
.btn:focus-visible {
  outline: solid 2px var(--color-glint);
  outline-offset: 2px;
}
.btn--selected {
  border-bottom: none;
  border-radius: 0;
  border-inline: 3px solid transparent;
  border-top: 3px solid transparent;
  color: var(--color-grey-dark-9e);
  text-transform: uppercase;
}
.btn--selected:hover, .btn--selected:focus, .btn--selected:focus-within, .btn--selected:active {
  color: var(--color-grey-dark-9e);
  background-color: var(--color-primary-9e);
  border-inline: 3px solid var(--color-grey-dark-9e);
  border-top: 3px solid var(--color-grey-dark-9e);
  filter: saturate(1.4) brightness(115%);
}
.btn--primary {
  color: var(--color-white);
  background-color: var(--color-grey-dark-9e);
  border-color: var(--color-grey-dark-9e);
}
.btn--primary:hover, .btn--primary:focus, .btn--primary:focus-within, .btn--primary:active {
  color: var(--color-white);
  filter: brightness(125%);
}
.btn--secondary {
  color: var(--color-grey-dark-9e);
  border-color: var(--color-grey-dark-9e);
}
.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:focus-within, .btn--secondary:active {
  color: var(--color-grey-dark-9e);
  background-color: var(--color-light);
}
.btn--light {
  color: var(--color-dark);
  background-color: var(--color-light);
}
.btn--light:hover, .btn--light:focus, .btn--light:focus-within, .btn--light:active {
  color: var(--color-dark);
  filter: brightness(92%);
}
.btn--quiet {
  color: var(--color-text-muted);
  border-color: var(--color-light);
}
.btn--quiet:hover, .btn--quiet:focus, .btn--quiet:focus-within, .btn--quiet:active {
  color: var(--color-text-body);
  background-color: var(--color-light);
}
.btn--icon {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: var(--font-size-xl);
  font-weight: 700;
}
.btn--icon::before {
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  content: "+";
  font-size: var(--font-size-xl);
  background-color: var(--color-primary);
}

.nav-btn {
  display: inline-block;
  padding: var(--space-xxs) var(--space-m);
  background-origin: border-box;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 200ms;
  color: var(--color-primary-9e);
}
.nav-btn:hover, .nav-btn:focus, .nav-btn:focus-within, .nav-btn:visited {
  color: var(--color-primary-9e);
  border-bottom: solid 4px var(--color-primary-9e);
}
.nav-btn--active {
  border-bottom: solid 4px var(--color-primary-9e);
}

#invoice_sheet::file-selector-button {
  background-color: transparent;
  color: var(--color-grey-dark-9e);
  border: 1px solid;
  border-radius: 5px;
  padding: 0.7em;
  border-color: var(--color-grey-dark-9e);
  font-family: var(--font-family-bitter);
  cursor: pointer;
}
#invoice_sheet::file-selector-button:hover, #invoice_sheet::file-selector-button:focus, #invoice_sheet::file-selector-button:focus-within, #invoice_sheet::file-selector-button:active {
  color: var(--color-dark-9e);
  background-color: var(--color-primary);
  filter: saturate(1.2) brightness(110%);
}

.flash {
  position: fixed;
  top: var(--space-m);
  right: var(--space-m);
  z-index: 20;
  display: grid;
  gap: var(--space-xs);
  max-width: min(32rem, 100vw - 2 * var(--space-m));
}

.error-message {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
  font-size: var(--font-size-s);
}
.error-message__close {
  margin-left: auto;
  padding: 0 var(--space-xxs);
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--font-size-l);
  line-height: 1;
  cursor: pointer;
}
.error-message--notice {
  background-color: var(--color-secondary-bg);
  color: var(--color-success);
}
.error-message--alert {
  background-color: var(--color-notice-bg);
  color: var(--color-notice);
}
.error-message--error {
  background-color: var(--color-primary-bg);
  color: var(--color-error);
}

.form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.form__group {
  flex: 1;
  margin-bottom: var(--space-m);
}
.form__group label {
  margin-bottom: var(--space-xxxs);
}
.form__input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition: box-shadow 250ms;
}
.form__input:focus {
  box-shadow: 0 0 0 2px var(--color-glint);
}
.form__input--invalid {
  border-color: var(--color-false);
}
.form__input.disabled {
  background-color: #ecebeb;
  border-color: #c8c7c7;
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.hint {
  font-size: small;
  font-style: italic;
}

.label {
  text-transform: uppercase;
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--font-size-m);
  font-weight: 700;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding-block: var(--space-m);
  border-top: solid 2px var(--color-light);
}
.form-actions__end {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-left: auto;
}
.form-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background-color: var(--color-background);
  margin-inline: calc(var(--space-m) * -1);
  padding-inline: var(--space-m);
}
@media (min-width: 50rem) {
  .form-actions--sticky {
    margin-inline: calc(var(--space-xl) * -1);
    padding-inline: var(--space-xl);
  }
}

.visually-hidden {
  padding: 0 !important;
  margin-bottom: 1em;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: center;
  gap: var(--space-s);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
  margin-bottom: var(--space-m);
  padding: var(--space-xs);
  font-size: var(--font-size-xl);
  border: 2px solid transparent;
}
@media (min-width: 50rem) {
  .field-row {
    padding: var(--space-xs) var(--space-m);
  }
}
.field-row:hover {
  border: 2px solid rgba(113, 119, 128, 0.4);
}
.field-row__btn-row {
  display: flex;
  gap: var(--space-xl);
}
.field-row__details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: var(--space-s);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
  margin-bottom: var(--space-m);
  padding: var(--space-xs);
}
.field-row__actions {
  display: flex;
  flex: 0 0 auto;
  align-self: flex-start;
  gap: var(--space-xs);
}
.field-row__heading {
  font-weight: 700;
  padding-inline: 0;
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--font-size-m);
  border: none;
}
.field-row__heading:hover {
  border: none;
}
.field-row__main-link {
  color: var(--color-primary);
}
.field-row__main-link:hover, .field-row__main-link:focus, .field-row__main-link:active {
  color: var(--color-primary-rotade);
}

.cost-item-head,
.cost-item-row {
  display: grid;
  gap: var(--space-s);
  align-items: center;
}
@media (min-width: 50rem) {
  .cost-item-head,
  .cost-item-row {
    grid-template-columns: 1.5rem minmax(0, 1fr) 8rem 7rem 8rem 4rem;
  }
}

@media (min-width: 50rem) {
  .cost-item-head--plain,
  .cost-item-row--plain {
    grid-template-columns: minmax(0, 1fr) 8rem 7rem 8rem;
  }
}

.cost-item-head {
  padding: 0 var(--space-s) var(--space-xxs);
  border-bottom: solid 1px var(--color-light);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.cost-item-row {
  padding: var(--space-s);
  border-bottom: solid 1px var(--color-light);
}
.cost-item-row:hover {
  background-color: var(--color-row-hover);
}
.cost-item-row__name {
  font-weight: 700;
}
.cost-item-row__description {
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
}
.cost-item-row__description p {
  margin: 0;
}
.cost-item-row__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cost-item-row__unit {
  color: var(--color-text-muted);
}
.cost-item-row__sum {
  font-weight: 700;
}
.cost-item-row__handle svg, .cost-item-row__actions svg {
  fill: currentColor;
  stroke: none;
}
.cost-item-row__handle {
  display: flex;
  color: var(--color-text-muted);
  cursor: grab;
}
.cost-item-row__handle svg {
  width: 1.25rem;
  height: 1.25rem;
}
.cost-item-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
}
.cost-item-row__actions svg {
  width: 1.15rem;
  height: 1.15rem;
}

.cost-item-total {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-s);
  font-weight: 700;
}
@media (min-width: 50rem) {
  .cost-item-total {
    grid-template-columns: 1.5rem minmax(0, 1fr) 8rem 7rem 8rem 4rem;
  }
}
.cost-item-total__value {
  grid-column: 5;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cost-item-form {
  padding: var(--space-m) var(--space-s);
  border-bottom: solid 1px var(--color-light);
  background-color: var(--color-primary-opacity);
}
.cost-item-form__fields {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 50rem) {
  .cost-item-form__fields {
    grid-template-columns: minmax(0, 1fr) 10rem 7rem 9rem;
    align-items: end;
  }
}
.cost-item-form .form__group {
  margin-bottom: 0;
}

.cost-item-totals {
  display: grid;
  gap: var(--space-xxs);
  justify-content: end;
  margin: var(--space-m) 0 var(--space-xl);
  padding-inline: var(--space-s);
}
.cost-item-totals > div {
  display: grid;
  grid-template-columns: auto 8rem;
  gap: var(--space-m);
}
.cost-item-totals dt {
  color: var(--color-text-muted);
}
.cost-item-totals dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cost-item-totals__grand {
  margin-top: var(--space-xxs);
  padding-top: var(--space-xxs);
  border-top: solid 1px var(--color-light);
  font-weight: 700;
}
.cost-item-totals__grand dt {
  color: inherit;
}

.cost-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.data-table tbody tr[data-awv=true] {
  background-color: var(--color-awv-rgb);
}

.turbo-progress-bar {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
}

.navbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-inline: var(--space-xl);
  background-color: var(--color-grey-dark-9e);
}

.checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.checkbox .form__input {
  width: 1.375em;
  height: 1.375em;
  cursor: pointer;
}

label {
  margin-left: 0.5em;
  display: flex;
  gap: 1em;
}

.form__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: 0;
  cursor: pointer;
}
.form__checkbox-label .form__input {
  flex: 0 0 auto;
  width: 1.375em;
  height: 1.375em;
  cursor: pointer;
}

.radio {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.radio .form__input {
  width: 1.375em;
  height: 1.375em;
  cursor: pointer;
}

.checkbox-list {
  max-height: 22rem;
  overflow-y: auto;
  margin-bottom: var(--space-m);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
}
.checkbox-list__search {
  margin-bottom: var(--space-m);
}
.checkbox-list__heading {
  margin-bottom: var(--space-xxs);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.checkbox-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-xxs) var(--space-s);
  cursor: pointer;
}
.checkbox-list__item + .checkbox-list__item {
  border-top: solid 1px var(--color-light);
}
.checkbox-list__item:hover {
  background-color: var(--color-row-hover);
}
.checkbox-list__item .form__input {
  flex: 0 0 auto;
  width: 1.125em;
  height: 1.125em;
  cursor: pointer;
}
.checkbox-list__meta {
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  text-align: right;
}

.hamburger-btn :hover {
  cursor: pointer;
}
.hamburger-btn label.hamburg {
  display: block;
  width: 75px;
  height: 50px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}
.hamburger-btn input#hamburg {
  display: none;
}
.hamburger-btn .line {
  position: absolute;
  left: 10px;
  height: 5px;
  width: 30px;
  background: var(--color-primary);
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}
.hamburger-btn .line:nth-child(1) {
  top: 12px;
}
.hamburger-btn .line:nth-child(2) {
  top: 24px;
}
.hamburger-btn .line:nth-child(3) {
  top: 36px;
}

.table {
  width: 100%;
}
.table td, .table th {
  padding: 0.5rem;
  text-align: left;
}
.table tr[data-status=true] {
  color: white;
  background-color: var(--color-primary);
}
.table tr[data-status=false] {
  background-color: var(--color-light);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxxs);
  padding: 0.125rem var(--space-xs);
  border: solid 1px transparent;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}
.badge--current {
  color: var(--color-primary);
  background-color: var(--color-primary-opacity);
}
.badge[data-role=admin] {
  color: var(--color-primary);
  background-color: var(--color-primary-opacity);
}
.badge[data-role=project_manager] {
  color: var(--color-text-body);
  border-color: var(--color-light);
}
.badge[data-role=viewer] {
  color: var(--color-text-muted);
  border-color: var(--color-light);
}
.badge[data-role=""] {
  color: var(--color-notice);
  border-color: var(--color-notice);
  border-style: dashed;
  font-style: italic;
}
.badge[data-status] {
  color: var(--color-text-header);
}
.badge[data-status=initial] {
  background-color: var(--color-light);
}
.badge[data-status=generated] {
  background-color: var(--color-generated);
}
.badge[data-status=draft] {
  background-color: var(--color-draft);
}
.badge[data-status=sent] {
  background-color: var(--color-sent);
}
.badge[data-status=cancellation] {
  background-color: var(--color-cancellation);
}
.badge[data-status=paid] {
  background-color: var(--color-secondary-bg);
}
.badge[data-status=overdue] {
  background-color: var(--color-overdue);
}

.data-table-wrap {
  overflow: auto;
  max-height: 80vh;
  background: var(--color-white);
  border: solid 1px var(--color-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-s);
}
.data-table :where(th, td) {
  padding: var(--space-s) var(--space-m);
  text-align: left;
}
.data-table thead th,
.data-table .badge, .data-table__num, .data-table__actions {
  white-space: nowrap;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--color-white);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  box-shadow: inset 0 -1px 0 var(--color-light);
}
.data-table tbody tr {
  border-top: solid 1px var(--color-light);
  background-color: var(--color-white);
}
.data-table tbody tr:hover {
  background-color: var(--color-row-hover);
}
.data-table tbody tr.data-table__row--notice {
  background-color: var(--color-notice-bg);
}
.data-table__sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: inherit;
  border-right: solid 1px var(--color-light);
}
.data-table tbody tr:hover .data-table__sticky {
  z-index: 2;
}
.data-table__sticky a[data-tooltip]::after {
  top: calc(100% + var(--space-xxxs));
  bottom: auto;
  left: 0;
  transform: none;
}
.data-table__sub {
  display: block;
  margin-top: var(--space-xxxs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.data-table thead th.data-table__sticky {
  z-index: 4;
}
.data-table__num {
  text-align: right;
}
.data-table__muted {
  color: var(--color-text-muted);
}
.data-table__note-wrap {
  display: block;
}
.data-table__note-wrap[data-tooltip]::after {
  top: calc(100% + var(--space-xxxs));
  bottom: auto;
  left: 0;
  transform: none;
  width: 40ch;
  white-space: normal;
  text-align: left;
}
.data-table__note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 32ch;
  margin-top: var(--space-xxxs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: normal;
}
.data-table td:not(.data-table__actions) a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.data-table__actions {
  text-align: right;
  padding-right: var(--space-l);
}
.data-table__actions [data-tooltip]::after {
  left: auto;
  right: 0;
  transform: none;
}
.data-table__actions form {
  display: inline-block;
}
.data-table__actions > a {
  display: inline-flex;
}
.data-table__actions > a,
.data-table__actions > form {
  vertical-align: middle;
  margin-left: var(--space-s);
}
.data-table__actions > a:first-child,
.data-table__actions > form:first-child {
  margin-left: 0;
}
.data-table__actions svg {
  width: 1.125rem;
  height: 1.125rem;
}
.data-table__action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-s);
  width: max-content;
  margin-left: auto;
}
.data-table__action-row > * {
  flex: none;
}
.data-table__danger {
  color: var(--color-false);
}
.data-table button.data-table__danger {
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxxs);
  color: inherit;
}
.data-table__sort:hover {
  color: var(--color-text-body);
  text-decoration: none;
}
.data-table__sort--active {
  color: var(--color-text-header);
  font-weight: 700;
}
.data-table__sort-arrow {
  color: var(--color-primary);
}
.data-table__empty {
  padding: var(--space-xl) var(--space-m);
  color: var(--color-text-muted);
  text-align: center;
  white-space: normal;
}

.data-table-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: solid 1px var(--color-light);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-m);
  align-items: start;
  margin-bottom: var(--space-l);
}

.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-block: var(--space-xl) var(--space-m);
}
.section-head > h2 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.section-head__rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-light);
}

.detail-group {
  padding: var(--space-m) var(--space-l);
  background-color: var(--color-white);
  border: solid 1px var(--color-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
}
.detail-group > h2 {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.detail-group dl {
  margin: 0;
}
.detail-group dl > div + div {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: solid 1px var(--color-light);
}
.detail-group dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.detail-group dd {
  margin: 0;
  font-size: var(--font-size-m);
}
.detail-group dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.value-missing {
  display: inline-block;
  padding: 0 var(--space-xs);
  border: dashed 1px var(--color-light);
  border-radius: var(--border-radius);
  font-size: var(--font-size-s);
  font-style: italic;
  color: var(--color-text-muted);
}

.value-add {
  margin-left: var(--space-xs);
  font-size: var(--font-size-s);
}

.detail-provisional {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: dashed 1px var(--color-notice);
  border-radius: var(--border-radius);
  background-color: var(--color-notice-bg);
  font-size: var(--font-size-s);
}
.detail-provisional > h3 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-notice);
}
.detail-provisional p {
  margin: 0;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block: var(--space-l) var(--space-m);
}
.filter-bar__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-s);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-s);
}
.filter-bar__item:hover {
  border-color: var(--color-text-muted);
  text-decoration: none;
}
.filter-bar__item--active {
  border-color: var(--color-grey-dark-9e);
  background-color: var(--color-grey-dark-9e);
  color: var(--color-white);
}
.filter-bar__item--active:hover {
  color: var(--color-white);
}
.filter-bar__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.filter-bar__item--active .filter-bar__count {
  color: var(--color-light);
}

.pagy {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}
.pagy a {
  min-width: 2em;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-s);
  text-align: center;
}
.pagy a:hover {
  border-color: var(--color-text-muted);
  text-decoration: none;
}
.pagy a[aria-disabled=true]:not([aria-current]) {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-text-muted);
  cursor: default;
}
.pagy a[aria-current=page] {
  border-color: var(--color-grey-dark-9e);
  background-color: var(--color-grey-dark-9e);
  color: var(--color-white);
}

.search-bar {
  flex: 1;
}
.search-bar > form {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block: var(--space-m) var(--space-s);
}
.search-bar input[type=text],
.search-bar select {
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  outline: none;
  transition: box-shadow 250ms;
}
.search-bar input[type=text]::placeholder,
.search-bar select::placeholder {
  color: var(--color-text-muted);
}
.search-bar input[type=text]:focus,
.search-bar select:focus {
  box-shadow: 0 0 0 2px var(--color-glint);
}
.search-bar input[type=text] {
  flex: 0 1 20rem;
}

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-xxxs));
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  padding: var(--space-xxxs) var(--space-xs);
  border-radius: var(--border-radius);
  background-color: var(--color-grey-dark-9e);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  opacity: 1;
}

.task-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
  justify-content: start;
}

.task-card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-xxs);
}
.task-card__count {
  margin: 0;
  font-size: var(--font-size-xxl);
  line-height: 1;
}
.task-card__hint {
  margin: 0 0 var(--space-s);
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
}

.overdue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border: solid 1px var(--color-notice);
  border-radius: var(--border-radius);
  background-color: var(--color-notice-bg);
}
.overdue__groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.overdue__group > h3 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-notice);
}
.overdue__sum {
  margin: 0;
  font-size: var(--font-size-l);
}
.overdue__meta {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.background-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin: 0;
}
.background-row dt {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.background-row dd {
  margin: 0;
  font-size: var(--font-size-l);
}
.background-row > div + div {
  padding-left: var(--space-xl);
  border-left: solid 1px var(--color-light);
}

.container {
  width: 100%;
  padding-inline: var(--space-m);
  margin-left: auto;
  margin-right: auto;
  margin-block: 1rem;
}
@media (min-width: 50rem) {
  .container {
    padding-inline: var(--space-xl);
    max-width: 130rem;
  }
}
.container--cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px var(--color-primary) solid;
  border-radius: 10px;
  padding: 1rem;
  margin-block: 1rem;
}
.container--flash-message {
  padding: 1rem;
}
.container--half {
  padding: 1rem;
  display: grid;
  gap: 1em;
  justify-items: end;
}

.center-container {
  display: flex;
  height: 70vh;
}

.border-container {
  border: 2px var(--color-primary) solid;
  border-radius: 10px;
  padding: var(--space-s);
}

.data-container {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 60%;
}
.data-container__list {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5em 0.5em 0.5em 0;
}
.data-container__list--items {
  text-align: end;
}
.data-container__list:nth-child(2n) {
  background-color: var(--color-primary-opacity);
}

.small-container {
  width: 50%;
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
  margin-left: auto;
  margin-right: auto;
  margin-block: 1rem;
}
.small-container h2 {
  margin-bottom: 1em;
}

.upload {
  background-color: white;
  padding: 1em;
  display: grid;
  gap: 1em;
  border: var(--border);
  border-radius: var(--border-radius);
}

.scroll-container {
  overflow-x: auto;
  width: 100%;
}

.form-layout {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 50rem) {
  .form-layout {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  }
}
.form-layout__aside {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 50rem) {
  .form-layout__aside {
    position: sticky;
    top: var(--space-m);
  }
}

.login {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-self: center;
}
@media (min-width: 50rem) {
  .login {
    max-width: 30rem;
  }
}

.header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  margin-block: var(--space-m);
}
@media (min-width: 50rem) {
  .header {
    margin-block: var(--space-m);
  }
}
.header__items {
  list-style-type: none;
}
.header__right {
  color: var(--color-primary-9e);
  align-self: center;
}

.button-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  margin-block: var(--space-l);
  border-bottom: 5px solid var(--color-grey-dark-9e);
}

.heading {
  display: flex;
  margin-block: var(--space-l) var(--space-xxl);
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}
.heading small {
  opacity: 0.6;
}
.heading__actions {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
.heading--detail {
  margin-block: var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: solid 1px var(--color-light);
  align-items: flex-end;
}
.heading__meta {
  margin-top: var(--space-xxs);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.title-header {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  margin-block: var(--space-l) var(--space-xxl);
}

.form__input {
  background-color: white;
}

trix-editor ul,
trix-editor ol,
.trix-content ul,
.trix-content ol {
  padding-left: 1.5em;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

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

.empty-state {
  padding-block: var(--space-xl);
  color: var(--color-text-muted);
}

.two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  align-items: start;
}

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