/* Project-specific CSS overrides. */

:root {
  --app-bg-bottom: #f5f5f7;
  --app-shadow-soft: 0 10px 30px -24px rgba(29, 29, 31, 0.24);
  --app-shadow-surface: 0 8px 22px -18px rgba(29, 29, 31, 0.22);
  --app-sticky-offset: 4rem;
  --app-accent: #0071e3;
  --app-accent-strong: #06c;
  --app-focus: rgba(0, 113, 227, 0.72);
  --app-focus-soft: rgba(0, 113, 227, 0.22);
  --app-text-primary: #1d1d1f;
  --app-text-muted: #6e6e73;
  --app-text-subtle: #86868b;
  --app-border-soft: rgba(210, 210, 215, 0.72);
  --app-border-strong: rgba(134, 134, 139, 0.42);
  --app-table-row-base: #ffffff;
  --app-table-row-alt: #f5f5f7;
  --app-table-row-hover: #f0f7ff;
  --app-table-row-focus: #e8f3ff;
  --app-table-head-bg: #fbfbfd;
  --app-table-divider: var(--app-border-soft);
  --app-table-header-text: #6e6e73;
  --app-table-body-text: #1d1d1f;
  --app-quantity-badge-bg: #e8f3ff;
  --app-quantity-badge-border: #b9ddff;
  --app-quantity-badge-text: #06c;
}

body {
  font-family: "Manrope", sans-serif;
}

body[data-theme="motinee"] {
  min-height: 100vh;
  background-color: var(--app-bg-bottom);
}

body.app-nav-open {
  overflow: hidden;
}

.app-drawer > .drawer-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .app-drawer {
    position: relative;
  }

  .app-drawer > .drawer-side {
    position: fixed;
    inset: 0;
    z-index: 48;
    pointer-events: none;
  }

  .app-drawer > .drawer-side > .drawer-overlay {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    background-color: rgba(15, 23, 42, 0.42);
    transition: opacity 0.18s ease;
  }

  .app-drawer > .drawer-side .app-rail {
    position: relative;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .app-drawer > .drawer-toggle:checked ~ .drawer-side {
    pointer-events: auto;
  }

  .app-drawer > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
    opacity: 1;
  }

  .app-drawer > .drawer-toggle:checked ~ .drawer-side .app-rail {
    transform: translateX(0);
  }
}

@media (min-width: 1024px) {
  .app-drawer {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    min-height: 100vh;
  }

  .app-drawer > .drawer-content {
    min-width: 0;
  }

  .app-drawer > .drawer-side {
    grid-column: 1;
  }

  .app-drawer > .drawer-side > .drawer-overlay {
    display: none;
  }

  .app-drawer > .drawer-content {
    grid-column: 2;
  }
}

.app-main {
  animation: app-main-enter 0.26s ease-out;
}

.app-brand {
  font-family: "Sora", sans-serif;
  letter-spacing: -0.02em;
  color: var(--app-text-primary);
}

.app-brand-mark {
  color: var(--app-accent-strong);
}

.app-rail {
  box-shadow: var(--app-shadow-surface);
}

.app-rail-label {
  margin-bottom: 0.45rem;
  padding-left: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-text-subtle);
}

.app-rail-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.55rem;
  border-radius: 0.95rem;
  padding: 0.52rem 0.72rem;
  font-weight: 600;
  color: var(--app-text-muted);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.app-rail-link svg {
  flex-shrink: 0;
}

.app-rail-link:hover {
  background-color: var(--app-table-row-alt);
  color: var(--app-text-primary);
}

.app-rail-link:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.app-rail-link-active {
  background-color: color-mix(in srgb, var(--app-table-row-base) 72%, var(--app-table-row-alt));
  color: var(--app-text-primary);
  box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.2);
}

.app-rail-link-active svg {
  color: var(--app-accent-strong);
}

.workspace-command-bar {
  box-shadow: var(--app-shadow-surface);
}

.workspace-command-bar .btn:focus-visible,
.workspace-command-bar .link:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.workspace-action-toolbar {
  box-shadow: var(--app-shadow-surface);
}

.workspace-action-toolbar .btn:focus-visible,
.workspace-action-toolbar .link:focus-visible,
.workspace-action-toolbar [data-item-filter-add]:focus-visible,
.workspace-action-toolbar input:focus-visible,
.workspace-action-toolbar select:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.workspace-data-surface {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.workspace-meta-text {
  color: var(--app-text-muted);
}

.workspace-meta-text-subtle {
  color: var(--app-text-subtle);
}

.workspace-data-table thead th {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-table-header-text);
  background-color: var(--app-table-head-bg);
  border-bottom: 1px solid var(--app-table-divider);
}

.workspace-data-table tbody th,
.workspace-data-table tbody td {
  vertical-align: middle;
  color: var(--app-table-body-text);
}

.workspace-data-table tbody th {
  font-weight: 600;
}

.workspace-data-table tbody tr {
  background-color: var(--app-table-row-base);
  transition: background-color 0.16s ease;
}

.workspace-data-table.table-zebra tbody tr:nth-child(even),
.workspace-data-table.table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
  background-color: var(--app-table-row-alt);
}

.workspace-data-table tbody tr:hover,
.workspace-data-table.table-zebra tbody tr:hover {
  background-color: var(--app-table-row-hover);
}

.workspace-data-table tbody tr:focus-within,
.workspace-data-table.table-zebra tbody tr:focus-within {
  background-color: var(--app-table-row-focus);
  box-shadow: inset 0 0 0 2px rgba(0, 113, 227, 0.3);
}

#inventory-results,
#history-results,
.workspace-results-scroll-anchor {
  scroll-margin-top: calc(var(--app-sticky-offset, 0px) + 0.75rem);
}

.workspace-data-table tbody tr.workspace-clickable-row th,
.workspace-data-table tbody tr.workspace-clickable-row td,
.workspace-data-table tbody tr.workspace-clickable-row .workspace-row-link,
.workspace-data-table tbody tr.workspace-clickable-row .badge {
  cursor: pointer;
  user-select: text;
}

@media (width < 40rem) {
  .inventory-results-table thead {
    display: none;
  }

  .inventory-results-table tbody,
  .inventory-results-table tbody tr {
    display: block;
  }

  .inventory-results-table tbody tr {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.95rem 1rem;
  }

  .inventory-results-table tbody td:first-child,
  .inventory-results-table tbody th,
  .inventory-results-table tbody td:nth-of-type(2),
  .inventory-results-table tbody td:nth-of-type(3) {
    display: block;
    border-bottom: 0;
    padding: 0;
  }

  .inventory-results-table tbody td:first-child {
    grid-row: 1 / span 2;
    align-self: center;
  }

  .inventory-results-table tbody td[colspan] {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 2rem 1rem;
  }

  .inventory-results-table tbody th {
    grid-column: 2;
    min-width: 0;
  }

  .inventory-results-table tbody td:nth-of-type(2) {
    grid-column: 3;
    white-space: nowrap;
  }

  .inventory-results-table tbody td:nth-of-type(3) {
    grid-column: 2 / 4;
    justify-self: start;
  }
}

.workspace-quantity-badge {
  border-color: var(--app-quantity-badge-border);
  background-color: var(--app-quantity-badge-bg);
  color: var(--app-quantity-badge-text);
  font-weight: 600;
}

.workspace-neutral-badge {
  border-color: var(--app-table-divider);
  background-color: color-mix(in srgb, var(--app-table-row-base) 72%, var(--app-table-row-alt));
  color: var(--app-text-muted);
  font-weight: 600;
}

.workspace-plan-edit-box {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.workspace-plan-items-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workspace-row-link {
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.workspace-row-button {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.workspace-row-link:focus-visible,
.workspace-row-button:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
  border-radius: 0.35rem;
}

.workspace-decision-panel {
  box-shadow: var(--app-shadow-surface);
}

.inventory-modal-box {
  --inventory-modal-padding: 1.5rem;

  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 1rem);
  width: min(56rem, calc(100vw - 1rem));
  overflow: hidden;
}

#inventory-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

#inventory-modal-body > form,
#inventory-modal-body > div,
.inventory-modal-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.inventory-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.inventory-item-editor {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  gap: 1rem;
}

.inventory-item-editor__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.inventory-item-editor__panel .inventory-modal-panel {
  height: 100%;
}

.inventory-modal-box:has(.inventory-import-preview),
.inventory-modal-box:has(.inventory-movement-plan-form) {
  max-width: min(92rem, calc(100vw - 2rem));
}

.inventory-modal-box:has(.inventory-modal-scroll-region) #inventory-modal-body,
.inventory-import-preview {
  min-height: 0;
}

.inventory-modal-scroll-region {
  max-height: min(60dvh, 42rem);
  overflow: auto;
}

.inventory-modal-sticky-table-head thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--app-table-head-bg);
}

.inventory-modal-sticky-actions {
  margin-inline: calc(-1 * var(--inventory-modal-padding));
  margin-bottom: calc(-1 * var(--inventory-modal-padding));
  padding: 1rem var(--inventory-modal-padding) var(--inventory-modal-padding);
  border-top: 1px solid var(--app-table-divider);
  background: var(--app-table-row-base);
}

.inventory-import-preview__nowrap {
  white-space: nowrap;
}

.inventory-import-preview__text-cell {
  min-width: 10rem;
  max-width: 18rem;
  white-space: normal;
}

.workspace-decision-panel .btn:focus-visible,
.workspace-decision-panel .link:focus-visible,
.workspace-decision-panel input:focus-visible,
.workspace-decision-panel summary:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.workspace-loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--app-table-divider);
  border-radius: 9999px;
  padding: 0.28rem 0.62rem;
  margin: 0;
  background-color: color-mix(in srgb, var(--app-table-row-base) 90%, var(--app-table-row-alt));
  color: var(--app-text-muted);
  box-shadow: 0 6px 14px -12px rgba(15, 23, 42, 0.22);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  pointer-events: none;
}

.workspace-loading-indicator.htmx-request {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#inventory-content {
  transition: opacity 0.18s ease;
}

#inventory-content[aria-busy="true"] {
  opacity: 0.86;
}

.workspace-data-surface .btn:focus-visible,
.workspace-data-surface .link:focus-visible,
.workspace-data-surface .checkbox:focus-visible,
.workspace-data-surface input:focus-visible,
.workspace-data-surface select:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.workspace-data-surface summary:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

#inventory-content > * {
  animation: inventory-content-enter 0.2s ease-out;
}

@keyframes app-main-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes inventory-content-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .app-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

@media (min-width: 768px) {
  .workspace-action-toolbar {
    position: sticky;
    top: calc(var(--app-sticky-offset) + 0.45rem);
    z-index: 20;
    backdrop-filter: blur(4px);
  }
}

@media (max-width: 639px) {
  [data-app-topbar] {
    background-color: var(--app-table-row-base);
    box-shadow: 0 1px 0 var(--app-table-divider);
  }

  .app-main {
    overflow-x: hidden;
  }

  #inventory-content,
  #inventory-modal-body,
  #inventory-modal-body form,
  #inventory-modal-body .rounded-box,
  .workspace-action-toolbar,
  .workspace-decision-panel,
  .workspace-data-surface {
    min-width: 0;
    max-width: 100%;
  }

  #inventory-modal-body input,
  #inventory-modal-body select,
  #inventory-modal-body textarea,
  #inventory-content input,
  #inventory-content select,
  #inventory-content textarea {
    max-width: 100%;
  }

  .workspace-action-toolbar .card-body,
  .workspace-decision-panel .card-body {
    padding: 0.75rem;
  }

  .inventory-modal-box {
    --inventory-modal-padding: 1rem;

    padding: 1rem;
  }

  .inventory-modal-box:has(.inventory-import-preview),
  .inventory-modal-box:has(.inventory-movement-plan-form) {
    max-width: calc(100vw - 1rem);
  }

  .inventory-modal-scroll-region {
    max-height: 58dvh;
  }

  .inventory-modal-sticky-actions {
    padding-top: 0.75rem;
  }

  .workspace-loading-indicator {
    padding: 0.3rem;
  }

  .workspace-plan-line-table,
  .workspace-plan-line-table tbody,
  .workspace-plan-line-table tr,
  .workspace-plan-line-table th,
  .workspace-plan-line-table td {
    display: block;
    width: 100%;
  }

  .workspace-plan-line-table thead {
    display: none;
  }

  .workspace-plan-line-table tbody tr {
    border-bottom: 1px solid var(--app-table-divider);
    padding: 0.75rem;
  }

  .workspace-plan-line-table tbody tr:last-child {
    border-bottom: 0;
  }

  .workspace-plan-line-table tbody th,
  .workspace-plan-line-table tbody td {
    min-width: 0;
    border: 0;
    padding: 0.35rem 0;
    text-align: left;
  }

  .workspace-plan-line-table [data-mobile-label]::before {
    content: attr(data-mobile-label);
    display: block;
    margin-bottom: 0.25rem;
    color: var(--app-text-subtle);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .workspace-plan-line-table [data-plan-item-select],
  .workspace-plan-line-table [data-staged-item-quantity-input],
  .workspace-plan-line-table [data-staged-item-price-input] {
    width: 100%;
  }

  .workspace-plan-line-table [data-remove-staged-item] {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-main,
  #inventory-content > *,
  .app-rail-link,
  .workspace-loading-indicator {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.auth-form {
  width: 100%;
}

.auth-fields p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-fields p:has(input[type="checkbox"]),
.auth-fields p:has(input[type="radio"]) {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start;
  text-align: left;
}

.auth-fields p:has(input[type="checkbox"]) input,
.auth-fields p:has(input[type="radio"]) input {
  flex: 0 0 auto;
  order: -1;
}

.auth-fields label {
  font-size: 0.875rem;
  color: var(--app-text-muted);
}

.auth-fields input:not([type="checkbox"]):not([type="radio"]),
.auth-fields textarea,
.auth-fields select {
  width: 100%;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--rounded-btn, 0.5rem);
  background-color: var(--app-table-row-base);
  min-height: 2.75rem;
  padding: 0 0.75rem;
}

.auth-fields textarea {
  min-height: 7rem;
  padding: 0.75rem;
}

.auth-fields input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-fields textarea:focus,
.auth-fields select:focus {
  outline: 2px solid transparent;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 2px var(--app-focus-soft);
}

.auth-fields ul.errorlist,
.auth-form > ul.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-error);
  font-size: 0.875rem;
}

.auth-fields .helptext {
  color: var(--app-text-muted);
  font-size: 0.75rem;
}

.auth-form a {
  text-underline-offset: 0.15em;
}