:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #20231f;
  background: #f3f1e9;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.site-header {
  padding: 1.25rem 2rem;
}

.brand {
  color: inherit;
  font-size: 1.25rem;
  font-weight: 750;
  text-decoration: none;
}

.page {
  display: grid;
  min-height: calc(100vh - 5rem);
  padding: 2rem 1rem 5rem;
  place-items: start center;
}

.auth-card {
  width: min(100%, 34rem);
  padding: 2rem;
  background: white;
  border: 1px solid #d9d5c8;
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgb(37 39 34 / 8%);
}

.auth-heading {
  margin-bottom: 1.5rem;
}

h1 {
  margin: 0.25rem 0 0.5rem;
}

.eyebrow {
  margin: 0;
  color: #587052;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

form {
  display: grid;
  gap: 0.65rem;
}

label {
  margin-top: 0.5rem;
  font-weight: 650;
}

input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #aaa99f;
  border-radius: 0.5rem;
  font: inherit;
}

input:focus {
  border-color: #587052;
  outline: 3px solid rgb(88 112 82 / 18%);
}

button {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  color: white;
  background: #486044;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.field-help {
  margin: -0.25rem 0 0;
  color: #66685f;
  font-size: 0.875rem;
}

.error-summary {
  margin-bottom: 1rem;
  padding: 1rem;
  color: #711f1f;
  background: #fff0f0;
  border: 1px solid #e6b5b5;
  border-radius: 0.5rem;
}

.portal-card {
  width: min(100%, 58rem);
  padding: 2.25rem;
  background: white;
  border: 1px solid #d9d5c8;
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgb(37 39 34 / 8%);
}

.portal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e6e2d7;
}

.portal-subtitle {
  margin: 0.4rem 0 0;
  color: #66685f;
}

.secondary-link {
  flex: none;
  color: #486044;
  font-weight: 650;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.detail-panel {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.75rem;
}

.detail-label {
  color: #66685f;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-badge {
  align-self: flex-start;
  padding: 0.45rem 0.7rem;
  color: #385035;
  background: #e5eee2;
  border-radius: 999px;
}

.detail-value {
  font-size: 1rem;
}

.admin-panel {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e6e2d7;
}

.admin-panel h2 {
  margin-top: 0;
}

.muted {
  color: #777970;
}

@media (max-width: 40rem) {
  .portal-heading {
    flex-direction: column;
    gap: 1rem;
  }

  .portal-card {
    padding: 1.4rem;
  }
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e6e2d7;
}

.logout-form {
  display: block;
  flex: none;
}

.logout-button {
  width: auto;
  margin: 0;
  padding: 0.65rem 1rem;
  color: #486044;
  background: transparent;
  border: 1px solid #9eaa99;
}

.logout-button:hover {
  background: #f1f5ef;
}

.dashboard-section {
  padding-top: 1.75rem;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.section-heading h2 {
  margin: 0;
}

.section-heading p {
  margin: 0.35rem 0 0;
  color: #66685f;
}

.create-link {
  flex: none;
  padding: 0.7rem 0.9rem;
  color: white;
  background: #486044;
  border-radius: 0.5rem;
  font-weight: 700;
  text-decoration: none;
}

.organization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.organization-card {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  padding: 1.25rem;
  color: inherit;
  background: #f7f6f1;
  border: 1px solid #dedacf;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.organization-card:hover {
  border-color: #7c9476;
  transform: translateY(-2px);
}

.organization-name {
  font-size: 1.2rem;
  font-weight: 750;
}

.organization-role {
  margin-top: 0.35rem;
  color: #5f675c;
  font-size: 0.9rem;
}

.organization-open {
  margin-top: auto;
  color: #486044;
  font-weight: 700;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  background: #f7f6f1;
  border: 1px dashed #c8c4b8;
  border-radius: 0.75rem;
}

.empty-state h3 {
  margin-top: 0;
}

@media (max-width: 40rem) {
  .dashboard-header,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }

  .logout-button,
  .create-link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #aaa99f;
  border-radius: 0.5rem;
  background: white;
  font: inherit;
}

select:focus {
  border-color: #587052;
  outline: 3px solid rgb(88 112 82 / 18%);
}

.member-section {
  padding-top: 1.75rem;
}

.member-section + .member-section {
  margin-top: 1.75rem;
  border-top: 1px solid #e6e2d7;
}

.member-section h2 {
  margin-top: 0;
}

.member-list {
  display: grid;
  gap: 0.75rem;
}

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.7rem;
}

.member-row > div {
  display: grid;
  gap: 0.2rem;
}

.member-row span:not(.role-badge) {
  color: #686a62;
  font-size: 0.9rem;
}

.invitation-result {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: #edf5ea;
  border: 1px solid #b9cdb4;
  border-radius: 0.75rem;
}

.invitation-result h2 {
  margin-top: 0;
}

@media (max-width: 40rem) {
  .member-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.invitation-page {
  max-width: 42rem;
}

.invitation-actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e6e2d7;
}

.invitation-actions .create-link {
  display: inline-block;
  margin: 0.5rem 0 1rem;
}

.success-summary {
  margin: 1.25rem 0 0;
  padding: 1rem;
  color: #385035;
  background: #edf5ea;
  border: 1px solid #b9cdb4;
  border-radius: 0.5rem;
}

.member-management-row {
  align-items: end;
}

.member-identity {
  min-width: 12rem;
  flex: 1;
}

.member-management-form {
  display: grid;
  flex: 2;
  grid-template-columns:
    minmax(17rem, 1.6fr)
    minmax(8rem, 0.8fr)
    auto;
  align-items: end;
  gap: 0.75rem;
}

.member-management-form label {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.member-management-form label > span {
  color: #686a62;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.member-management-form select {
  padding: 0.7rem;
}

.member-management-form button,
.invitation-management-row button {
  width: auto;
  margin: 0;
  padding: 0.75rem 0.9rem;
  white-space: nowrap;
}

.invitation-management-row form {
  display: block;
  flex: none;
}

.danger-button {
  color: #842f2f;
  background: #fff7f7;
  border: 1px solid #d9a4a4;
}

.danger-button:hover {
  background: #fce9e9;
  border-color: #bd7777;
}

@media (max-width: 52rem) {
  .member-management-row {
    align-items: stretch;
    flex-direction: column;
  }

  .member-management-form {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .member-management-form button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .member-management-form {
    grid-template-columns: 1fr;
  }

  .member-management-form button {
    grid-column: auto;
    width: 100%;
  }

  .invitation-management-row form,
  .invitation-management-row button {
    width: 100%;
  }
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-stats .detail-panel {
  min-height: 6rem;
}

.admin-stat-value {
  color: #385035;
  font-size: 2rem;
  line-height: 1;
}

.site-user-row .member-identity span + span {
  color: #7a7c74;
  font-size: 0.8rem;
}

@media (max-width: 40rem) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}

.site-admin-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: #edf5ea;
  border: 1px solid #b9cdb4;
  border-radius: 0.75rem;
}

.site-admin-callout h2 {
  margin: 0.25rem 0;
}

.site-admin-callout p:last-child {
  margin: 0;
  color: #5f675c;
}

@media (max-width: 40rem) {
  .site-admin-callout {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ANQA MASTER PRICE LIST */

.organization-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.success-summary {
  margin-top: 1.5rem;
  padding: 1rem;
  color: #294d2b;
  background: #edf5ea;
  border: 1px solid #b9cdb4;
  border-radius: 0.65rem;
}

.catalog-page {
  width: min(100%, 72rem);
}

.catalog-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.catalog-summary > div {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.25rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.75rem;
}

.catalog-summary strong {
  color: #385035;
  font-size: 1.5rem;
}

.catalog-section {
  padding-top: 2rem;
}

.catalog-section + .catalog-section {
  margin-top: 2rem;
  border-top: 1px solid #e6e2d7;
}

.product-form {
  gap: 1.25rem;
}

.product-create-form {
  padding: 1.25rem;
  background: #f7f6f1;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

.product-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.product-field {
  display: grid;
  grid-column: span 2;
  align-content: start;
  gap: 0.45rem;
}

.product-field label {
  margin: 0;
  color: #55594f;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.product-name-field {
  grid-column: span 4;
}

.product-description-field {
  grid-column: 1 / -1;
}

textarea {
  width: 100%;
  min-height: 4.8rem;
  padding: 0.8rem;
  resize: vertical;
  border: 1px solid #aaa99f;
  border-radius: 0.5rem;
  font: inherit;
}

textarea:focus {
  border-color: #587052;
  outline: 3px solid rgb(88 112 82 / 18%);
}

.product-save-button {
  width: auto;
  min-width: 9rem;
  justify-self: end;
  margin: 0;
}

.product-list {
  display: grid;
  gap: 1rem;
}

.product-card {
  padding: 1.25rem;
  background: #faf9f5;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

.product-card-inactive {
  background: #f2f1ed;
  opacity: 0.82;
}

.product-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.product-card-heading > div {
  display: grid;
  gap: 0.2rem;
}

.product-card-heading strong {
  font-size: 1.1rem;
}

.product-card-heading span:not(.product-status) {
  color: #686a62;
  font-size: 0.85rem;
}

.product-status {
  flex: none;
  padding: 0.35rem 0.65rem;
  color: #385035;
  background: #e5eee2;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.product-status-inactive {
  color: #62645d;
  background: #e1e0db;
}

.product-edit-form {
  padding-top: 1.25rem;
  border-top: 1px solid #e4e0d5;
}

@media (max-width: 52rem) {
  .product-field,
  .product-name-field {
    grid-column: span 6;
  }

  .product-description-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .organization-actions,
  .catalog-summary {
    grid-template-columns: 1fr;
  }

  .organization-actions {
    display: grid;
  }

  .product-field,
  .product-name-field,
  .product-description-field {
    grid-column: 1 / -1;
  }

  .product-card-heading {
    flex-direction: column;
  }

  .product-save-button {
    width: 100%;
  }
}

/* ANQA CLIENT DIRECTORY */

.client-page {
  width: min(100%, 72rem);
}

.client-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.client-summary > div {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.25rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.75rem;
}

.client-summary strong {
  color: #385035;
  font-size: 1.5rem;
}

.client-section {
  padding-top: 2rem;
}

.client-section + .client-section {
  margin-top: 2rem;
  border-top: 1px solid #e6e2d7;
}

.client-form {
  gap: 1.25rem;
}

.client-create-form {
  padding: 1.25rem;
  background: #f7f6f1;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

.client-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.client-field {
  display: grid;
  grid-column: span 3;
  align-content: start;
  gap: 0.45rem;
}

.client-field label {
  margin: 0;
  color: #55594f;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.client-wide-field {
  grid-column: span 6;
}

.client-save-button {
  width: auto;
  min-width: 9rem;
  justify-self: end;
  margin: 0;
}

.client-list {
  display: grid;
  gap: 1rem;
}

.client-card {
  padding: 1.25rem;
  background: #faf9f5;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

.client-card-inactive {
  background: #f2f1ed;
  opacity: 0.82;
}

.client-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.client-card-heading > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.client-card-heading strong {
  font-size: 1.1rem;
}

.client-card-heading span:not(.client-status):not(.client-default-count) {
  color: #686a62;
  font-size: 0.85rem;
}

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

.client-default-count,
.client-status {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.client-default-count {
  color: #536052;
  background: #eceee8;
}

.client-status {
  color: #385035;
  background: #e5eee2;
}

.client-status-inactive {
  color: #62645d;
  background: #e1e0db;
}

.client-edit-form {
  padding-top: 1.25rem;
  border-top: 1px solid #e4e0d5;
}

@media (max-width: 52rem) {
  .client-field,
  .client-wide-field {
    grid-column: span 6;
  }
}

@media (max-width: 40rem) {
  .client-summary {
    grid-template-columns: 1fr;
  }

  .client-field,
  .client-wide-field {
    grid-column: 1 / -1;
  }

  .client-card-heading {
    flex-direction: column;
  }

  .client-card-badges {
    justify-content: flex-start;
  }

  .client-save-button {
    width: 100%;
  }
}

/* ANQA CLIENT DEFAULT SHEET */

.client-sheet-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: #486044;
  font-weight: 750;
}

.default-sheet-page {
  width: min(100%, 72rem);
}

.default-sheet-warning {
  margin-top: 1.5rem;
  padding: 1rem;
  color: #684d1f;
  background: #fff8df;
  border: 1px solid #dec98e;
  border-radius: 0.65rem;
}

.default-sheet-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.default-sheet-summary > div {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.25rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.75rem;
}

.default-sheet-summary strong {
  color: #385035;
  font-size: 1.2rem;
}

.default-sheet-explanation {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  color: #555c52;
  background: #edf3ea;
  border-left: 4px solid #7c9476;
  border-radius: 0.35rem;
}

.default-sheet-section {
  padding-top: 2rem;
}

.default-sheet-section + .default-sheet-section {
  margin-top: 2rem;
  border-top: 1px solid #e6e2d7;
}

.default-item-list {
  display: grid;
  gap: 1rem;
}

.default-item-card {
  padding: 1.25rem;
  background: #faf9f5;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

.default-item-inactive {
  background: #f5f1e9;
  border-color: #d9c9a2;
}

.default-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.default-item-heading > div:first-child {
  display: grid;
  gap: 0.35rem;
}

.default-item-heading strong {
  font-size: 1.1rem;
}

.default-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: #686a62;
  font-size: 0.85rem;
}

.default-item-totals {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.45rem;
}

.default-line-total {
  color: #385035;
  font-size: 1.1rem;
  font-weight: 750;
}

.default-item-status {
  padding: 0.35rem 0.65rem;
  color: #684d1f;
  background: #fff3c8;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
}

.default-item-form,
.default-item-add-form {
  gap: 1rem;
}

.default-item-form {
  padding-top: 1.25rem;
  border-top: 1px solid #e4e0d5;
}

.default-item-fields,
.default-item-add-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.default-item-field {
  display: grid;
  grid-column: span 2;
  align-content: start;
  gap: 0.45rem;
}

.default-item-field label {
  margin: 0;
  color: #55594f;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.default-item-notes-field {
  grid-column: span 8;
}

.default-product-field {
  grid-column: span 6;
}

.default-item-save-button {
  width: auto;
  min-width: 9rem;
  justify-self: end;
  margin: 0;
}

.default-item-remove-form {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.danger-button {
  width: auto;
  margin: 0;
  padding: 0.6rem 0.8rem;
  color: #7a2929;
  background: transparent;
  border: 1px solid #c99a9a;
}

.danger-button:hover {
  background: #fff0f0;
}

.default-item-add-form {
  padding: 1.25rem;
  background: #f7f6f1;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

@media (max-width: 52rem) {
  .default-item-field,
  .default-item-notes-field,
  .default-product-field {
    grid-column: span 6;
  }
}

@media (max-width: 40rem) {
  .default-sheet-summary {
    grid-template-columns: 1fr;
  }

  .default-item-heading {
    flex-direction: column;
  }

  .default-item-totals {
    align-items: flex-start;
  }

  .default-item-field,
  .default-item-notes-field,
  .default-product-field {
    grid-column: 1 / -1;
  }

  .default-item-save-button {
    width: 100%;
  }
}

/* ANQA ORDER WORKSPACE */

.order-page,
.order-detail-page {
  width: min(100%, 72rem);
}

.order-summary,
.order-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.order-summary > div,
.order-detail-summary > div {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.25rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.75rem;
}

.order-summary strong,
.order-detail-summary > div > strong:not(.order-status) {
  color: #385035;
  font-size: 1.35rem;
}

.order-section {
  padding-top: 2rem;
}

.order-section + .order-section {
  margin-top: 2rem;
  border-top: 1px solid #e6e2d7;
}

.order-create-form {
  gap: 1.25rem;
  padding: 1.25rem;
  background: #f7f6f1;
  border: 1px solid #dedacf;
  border-radius: 0.8rem;
}

.order-create-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.order-field {
  display: grid;
  grid-column: span 5;
  align-content: start;
  gap: 0.45rem;
}

.order-field label {
  margin: 0;
  color: #55594f;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.order-notes-field {
  grid-column: span 7;
}

.order-create-button {
  width: auto;
  min-width: 10rem;
  justify-self: end;
  margin: 0;
}

.order-list {
  display: grid;
  gap: 0.75rem;
}

.order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 1.25rem;
  color: inherit;
  background: #faf9f5;
  border: 1px solid #dedacf;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.order-card:hover {
  border-color: #7c9476;
  transform: translateY(-2px);
}

.order-card > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.order-card > div:first-child > span:not(.order-number) {
  color: #686a62;
  font-size: 0.85rem;
}

.order-number {
  color: #587052;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.order-card-total {
  display: grid;
  justify-items: end;
  gap: 0.5rem;
}

.order-status {
  display: inline-block;
  justify-self: start;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.order-status-draft {
  color: #385035;
  background: #e5eee2;
}

.order-status-finalized {
  color: #29495e;
  background: #e2eef5;
}

.order-status-cancelled {
  color: #62645d;
  background: #e1e0db;
}

.order-notes-panel {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.75rem;
}

.order-notes-panel p {
  margin: 0;
  white-space: pre-wrap;
}

.order-item-list {
  display: grid;
  gap: 0.75rem;
}

.order-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.15rem;
  background: #faf9f5;
  border: 1px solid #dedacf;
  border-radius: 0.7rem;
}

.order-item-card > div {
  display: grid;
  gap: 0.3rem;
}

.order-item-card span {
  color: #686a62;
  font-size: 0.88rem;
}

.order-item-source {
  font-size: 0.76rem !important;
  text-transform: capitalize;
}

.order-line-total {
  flex: none;
  color: #385035;
}

.draft-next-step {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  color: #385035;
  background: #edf3ea;
  border-left: 4px solid #7c9476;
  border-radius: 0.35rem;
}

@media (max-width: 40rem) {
  .order-summary,
  .order-detail-summary {
    grid-template-columns: 1fr;
  }

  .order-field,
  .order-notes-field {
    grid-column: 1 / -1;
  }

  .order-create-button {
    width: 100%;
  }

  .order-card,
  .order-item-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-card-total {
    justify-items: start;
  }
}

/* ANQA DRAFT ORDER EDITING */

.order-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: #edf3eb;
  border: 1px solid #cbd9c7;
  border-radius: 0.75rem;
}

.order-toolbar > div {
  display: grid;
  gap: 0.25rem;
}

.order-toolbar span {
  color: #5f675c;
  font-size: 0.9rem;
}

.order-toolbar form {
  display: block;
  flex: none;
}

.secondary-action-button {
  width: auto;
  margin: 0;
  color: #486044;
  background: white;
  border: 1px solid #8fa08a;
}

.secondary-action-button:hover {
  background: #f5f8f4;
}

.order-edit-list {
  display: grid;
  gap: 1rem;
}

.order-edit-card {
  padding: 1.25rem;
  background: #f8f7f3;
  border: 1px solid #dfdbd0;
  border-radius: 0.8rem;
}

.order-edit-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.85rem;
}

.order-edit-card-header > div {
  display: grid;
  gap: 0.2rem;
}

.override-badge {
  display: inline-block;
  margin: 0 0.35rem 0.75rem 0;
  padding: 0.3rem 0.55rem;
  color: #76521b;
  background: #fff1d6;
  border: 1px solid #e8ca91;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.order-item-edit-form {
  padding-top: 1rem;
  border-top: 1px solid #e4e0d6;
}

.order-item-edit-fields {
  display: grid;
  grid-template-columns:
    minmax(12rem, 2fr)
    minmax(7rem, 0.8fr)
    minmax(7rem, 0.8fr)
    minmax(7rem, 0.8fr)
    minmax(6rem, 0.6fr);
  gap: 0.8rem;
  align-items: end;
}

.order-field {
  display: grid;
  gap: 0.4rem;
}

.order-field label {
  margin: 0;
  color: #5e6259;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-description-field {
  min-width: 0;
}

.order-item-save-button {
  width: auto;
  margin-top: 0.9rem;
}

.order-item-remove-form {
  display: inline-block;
}

.danger-button {
  width: auto;
  margin-top: 0.65rem;
  padding: 0.6rem 0;
  color: #8a2f2f;
  background: transparent;
  font-size: 0.88rem;
}

.danger-button:hover {
  color: #641d1d;
  text-decoration: underline;
}

.order-item-readonly {
  padding-top: 0.8rem;
  color: #5f625b;
  border-top: 1px solid #e4e0d6;
}

.order-add-form {
  padding: 1.25rem;
  background: #f8f7f3;
  border: 1px solid #dfdbd0;
  border-radius: 0.8rem;
}

.order-add-fields {
  display: grid;
  grid-template-columns: minmax(15rem, 2fr) 8rem 8rem;
  gap: 0.8rem;
  align-items: end;
}

.manual-order-fields {
  grid-template-columns:
    minmax(12rem, 2fr)
    minmax(7rem, 0.8fr)
    minmax(7rem, 0.8fr)
    minmax(7rem, 0.8fr)
    minmax(6rem, 0.6fr);
}

.order-product-field {
  min-width: 0;
}

@media (max-width: 58rem) {
  .order-item-edit-fields,
  .manual-order-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-description-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .order-toolbar,
  .order-edit-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .secondary-action-button,
  .order-item-save-button {
    width: 100%;
  }

  .order-item-edit-fields,
  .order-add-fields,
  .manual-order-fields {
    grid-template-columns: 1fr;
  }

  .order-description-field {
    grid-column: auto;
  }
}

/* ANQA INVOICE WORKFLOW */

.order-finalize-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.8fr);
  gap: 2rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f5efe2;
  border: 1px solid #dac9a8;
  border-radius: 0.85rem;
}

.order-finalize-panel h2 {
  margin: 0.3rem 0 0.5rem;
}

.order-finalize-panel p:last-child {
  margin-bottom: 0;
  color: #686158;
}

.order-finalize-panel form {
  align-self: center;
}

.finalize-button {
  width: 100%;
  background: #765a2f;
}

.finalize-button:hover {
  background: #624923;
}

.invoice-page,
.invoice-detail-page {
  width: min(100%, 62rem);
}

.invoice-summary,
.invoice-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.invoice-summary > div,
.invoice-detail-summary > div {
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.7rem;
}

.invoice-summary strong,
.invoice-detail-summary strong {
  font-size: 1.1rem;
}

.invoice-section {
  padding-top: 1.75rem;
}

.invoice-section + .invoice-section {
  margin-top: 1.75rem;
  border-top: 1px solid #e6e2d7;
}

.invoice-list {
  display: grid;
  gap: 0.8rem;
}

.invoice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.25rem;
  color: inherit;
  background: #f7f6f1;
  border: 1px solid #dfdbd0;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.invoice-card:hover {
  border-color: #7c9476;
  transform: translateY(-2px);
}

.invoice-card > div {
  display: grid;
  gap: 0.25rem;
}

.invoice-number {
  color: #486044;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-card-total {
  justify-items: end;
  text-align: right;
}

.invoice-status {
  display: inline-block;
  width: fit-content;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.invoice-status-issued {
  color: #385035;
  background: #e5eee2;
}

.invoice-status-paid {
  color: #275569;
  background: #e1f0f5;
}

.invoice-status-void {
  color: #762f2f;
  background: #f5e4e4;
}

.invoice-immutable-notice {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  color: #4f493f;
  background: #f5efe2;
  border: 1px solid #dac9a8;
  border-radius: 0.7rem;
}

.invoice-immutable-notice span {
  font-size: 0.9rem;
}

.invoice-billing-panel {
  margin-top: 1rem;
  padding: 1.1rem;
  background: #f7f6f1;
  border: 1px solid #e2ded2;
  border-radius: 0.7rem;
}

.invoice-billing-panel p {
  margin: 0.45rem 0 0;
  white-space: pre-line;
}

.invoice-item-list {
  display: grid;
  border-top: 1px solid #dedacf;
}

.invoice-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid #dedacf;
}

.invoice-item-row > div {
  display: grid;
  gap: 0.25rem;
}

.invoice-item-row span {
  color: #66685f;
  font-size: 0.9rem;
}

.invoice-totals {
  display: grid;
  justify-content: end;
  gap: 0.65rem;
  margin-top: 1.25rem;
  min-width: 18rem;
}

.invoice-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}

.invoice-grand-total {
  padding-top: 0.75rem;
  border-top: 2px solid #777970;
  font-size: 1.15rem;
}

@media (max-width: 46rem) {
  .order-finalize-panel {
    grid-template-columns: 1fr;
  }

  .invoice-card,
  .invoice-item-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .invoice-card-total {
    justify-items: start;
    text-align: left;
  }

  .invoice-totals {
    width: 100%;
    min-width: 0;
  }
}