:root {
  color-scheme: light;
  --bg: #edf1f7;
  --ink: #101126;
  --muted: #6b7084;
  --line: rgba(18, 20, 38, 0.09);
  --line-strong: rgba(18, 20, 38, 0.14);
  --indigo: #4f46e5;
  --ring: 0 0 0 3px rgba(79, 70, 229, 0.16);
  --card-shadow: 0 1px 2px rgba(16, 17, 38, 0.04), 0 10px 30px rgba(31, 41, 55, 0.06);
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --accent-dark: #3328ca;
  --accent : #121423;
  --green: #047857;
  --red: #b42318;
  --shadow: 0 22px 70px rgba(31, 41, 55, 0.12);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --motion-fast: 140ms;
  --motion-base: 220ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at 85% -10%, rgba(99, 102, 241, 0.07), transparent 34rem),
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.9), transparent 30rem),
    linear-gradient(180deg, #f5f7fb 0%, #eef1f7 100%);
  color: var(--ink);
}

[x-cloak] { display: none !important; }

.app-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(26px) saturate(145%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 8px 26px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 740;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.brand.centered { justify-content: center; }

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #111423;
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 30px rgba(17, 20, 35, 0.2);
}

.nav-stack { display: grid; gap: 3px; }

.nav-item,
.nav-subitem {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  color: #464b60;
  background: transparent;
  text-decoration: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 560;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.nav-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.nav-button { align-items: center; }

.nav-chevron {
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  opacity: 0.6;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-base) var(--ease-out);
}

.nav-chevron:not(.is-open) { transform: translateY(1px) rotate(-45deg); }

/* Folds by animating the row track rather than height, which cannot transition to auto. */
.nav-fold {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -8px;
  opacity: 0;
  transition:
    grid-template-rows var(--motion-base) var(--ease-out),
    margin-top var(--motion-base) var(--ease-out),
    opacity var(--motion-fast) ease;
}

.nav-fold.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
}

.nav-fold > .nav-submenu { min-height: 0; overflow: hidden; }

/* Sub-items hang off a thin guide line under the Documents icon. */
.nav-submenu {
  display: grid;
  gap: 2px;
  margin: 2px 0 4px 20px;
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
}
.nav-subitem { padding: 7px 10px; font-size: 14px; font-weight: 520; }
.nav-item:hover,
.nav-subitem:hover {
  background: rgba(16, 17, 38, 0.045);
  color: var(--ink);
}

.nav-item.is-active,
.nav-subitem.is-active {
  background: var(--accent);
  color: white;
  font-weight: 620;
}

.nav-item.is-active .nav-icon { opacity: 1; }

.nav-item.is-active:hover,
.nav-subitem.is-active:hover {
  background: var(--accent);
  color: white;
}
.sidebar-footer { margin-top: auto; display: grid; gap: 8px; }
.subtle { color: var(--muted); }
.full { text-align: left; }

.content {
  padding: 30px 40px 40px;
  max-width: 1480px;
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.download-menu {
  position: relative;
}

.download-menu-popover {
  right: auto;
  left: 0;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 730;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

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

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.glass-panel,
.auth-card {
  border: 1px solid rgba(16, 17, 38, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(28px) saturate(145%);
}

.glass-panel {
  padding: 24px;
  margin-bottom: 20px;
  overflow: visible;
}

/* Tables run edge to edge inside their card. */
.glass-panel:has(> .data-table) { padding: 6px 8px 8px; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  overflow: visible;
}

.data-table th,
.data-table td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table th {
  padding-top: 14px;
  padding-bottom: 12px;
  color: var(--muted);
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.data-table td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

.data-table .num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cell-strong { font-weight: 620; }

.data-table tr.clickable-row {
  cursor: pointer;
}

.data-table tr.clickable-row td {
  transition: background-color 160ms ease, color 160ms ease;
}

.data-table tr.clickable-row:hover td,
.data-table tr.clickable-row:focus td {
  background: rgba(79, 70, 229, 0.045);
}

.data-table tr.clickable-row:focus {
  outline: none;
}

.data-table tr.clickable-row:focus-visible td {
  background: rgba(16, 17, 38, 0.055);
  box-shadow: inset 0 0 0 2px rgba(79, 70, 229, 0.26);
}

.documents-table {
  table-layout: fixed;
}

.document-number-col { width: 13%; }
.document-customer-col { width: 33%; }
.document-customer-col-wide { width: 42%; }
.document-date-col { width: 14%; }
.document-total-col { width: 13%; }
.document-status-col { width: 11%; }
.document-actions-col { width: 16%; }

.documents-table th,
.documents-table td,
.document-nowrap-cell {
  white-space: nowrap !important;
}

.document-customer-cell {
  max-width: 360px;
}

.document-customer-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty { text-align: center; color: var(--muted); padding: 48px 18px !important; }

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 18px;
}

.pagination-arrow {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--glass-strong);
  color: var(--ink);
  text-decoration: none;
  font-size: 0;
  line-height: 0;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.pagination-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.pagination-arrow-prev::before {
  transform: translate(3px, 5px) rotate(-135deg);
}

.pagination-arrow-next::before {
  transform: translate(-3px, 5px) rotate(45deg);
}

.pagination-arrow:not(.is-disabled):hover,
.pagination-arrow:not(.is-disabled):focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.38);
  background: rgba(255, 255, 255, 0.96);
  color: var(--accent-dark);
}

.pagination-arrow.is-disabled {
  opacity: 0.36;
  cursor: default;
}

.pagination-status {
  color: var(--muted);
  font-weight: 720;
}

.row-actions {
  position: relative;
  white-space: nowrap;
  text-align: right;
  min-width: 210px;
  overflow: visible;
}

.row-actions.menu-only {
  width: 48px;
  min-width: 48px;
  padding-left: 8px;
  padding-right: 12px;
}

.row-action-links {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  vertical-align: middle;
}

.row-menu {
  position: relative;
  z-index: 20;
  display: inline-block;
  margin-left: 30px;
  vertical-align: middle;
}

.row-actions.menu-only .row-menu {
  margin-left: 0;
}

.row-menu.is-open {
  z-index: 200;
}

.menu-trigger {
  width: 24px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--motion-fast) ease;
}

.menu-trigger:active { transform: scale(0.9); }

.menu-trigger img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  opacity: 1;
}

.menu-trigger:hover,
.menu-trigger:focus {
  outline: none;
  background: transparent;
}

.menu-trigger:hover img,
.menu-trigger:focus img {
  opacity: 1;
}

.menu-tooltip {
  position: absolute;
  z-index: 70;
  right: -20px;
  bottom: calc(100% + 8px);
  padding: 6px 9px;
  border-radius: 7px;
  background: #171717;
  color: white;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(16, 17, 38, 0.18);
}

.menu-tooltip::after {
  content: "";
  position: absolute;
  right: 27px;
  top: 100%;
  border: 7px solid transparent;
  border-top-color: #171717;
}

.row-menu-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 12px);
  right: -10px;
  min-width: 170px;
  padding: 6px;
  border: 1px solid rgba(16, 17, 38, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(16, 17, 38, 0.04), 0 16px 36px rgba(31, 41, 55, 0.14);
  backdrop-filter: blur(26px) saturate(145%);
}

.menu-action,
.menu-delete {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}

.menu-action {
  color: var(--ink);
  font-weight: 400;
}

.menu-delete {
  color: var(--red);
  font-weight: 620;
}

.menu-action:hover,
.menu-action:focus {
  outline: none;
  background: rgba(16, 17, 38, 0.05);
}

.menu-delete:hover,
.menu-delete:focus {
  outline: none;
  background: rgba(180, 35, 24, 0.1);
}

.link { color: var(--accent-dark); font-weight: 650; text-decoration: none; }

.pdf-link,
.pdf-link:hover,
.pdf-link:focus {
  color: var(--accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(18, 20, 38, 0.12);
  border-radius: 12px;
  background: var(--glass-strong);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.button:hover { background: #fff; }
.button:focus-visible { outline: none; box-shadow: var(--ring); }
.button:active { transform: scale(0.97); }

.subtle-button {
  color: var(--muted);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 18px;
}

.search-field {
  flex: 1;
  min-width: 220px;
}

.search-field .form-control {
  min-height: 42px;
  padding-left: 40px;
  border-radius: 11px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8093' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%;
}

.confirm-dialog .button {
  min-width: 146px;
  min-height: 48px;
  border-radius: 16px;
  font-size: 17px;
}

.confirm-dialog .button:not(.danger) {
  border-color: rgba(18, 20, 35, 0.14);
  background: white;
  box-shadow: none;
  color: var(--ink);
}

.confirm-dialog .button:not(.danger):hover,
.confirm-dialog .button:not(.danger):focus {
  outline: none;
  background: #f7f8fb;
  color: var(--ink);
}

.button.primary {
  border-color: transparent;
  background: var(--accent);
  color: white;
}

.button.primary:hover,
.button.primary:focus {
  outline: none;
  background: #1b1e33;
  color: white;
}

.button.danger {
  border-color: transparent;
  background: var(--red);
  color: white;
}

.button.danger:hover,
.button.danger:focus {
  outline: none;
  background: #971f16;
  color: white;
}

.modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(181, 203, 232, 0.36);
  backdrop-filter: blur(14px) saturate(120%);
  white-space: normal;
}

.confirm-dialog {
  width: min(520px, calc(100vw - 48px));
  display: grid;
  gap: 20px;
  color: var(--ink);
  text-align: left;
}

.confirm-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  padding: 28px 34px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 249, 252, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 22px 64px rgba(65, 90, 130, 0.2);
}

.confirm-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.confirm-copy strong {
  color: var(--red);
  font-size: 27px;
  line-height: 1.1;
}

.confirm-copy span {
  max-width: 420px;
  color: #41465b;
  font-size: 15px;
  line-height: 1.35;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.form-grid { display: grid; gap: 16px; }
.document-editor .recipient-panel,
.document-editor .options-panel,
.document-editor .tax-panel {
  align-content: start;
}
.form-grid.wide { max-width: 1080px; }
.product-form { max-width: 760px; }
.form-section { display: grid; gap: 18px; }
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.document-information-panel { --document-information-control-padding-block: 11px; }
.document-information-panel--non-invoice {
  --document-information-row-gap: 16px;
  align-content: start;
  gap: var(--document-information-row-gap);
}
.document-information-panel .form-control {
  padding-block: var(--document-information-control-padding-block);
}
.document-information-panel--invoice .form-control {
  padding: var(--invoice-document-information-control-padding-block, 11px) 12px;
}

label {
  display: grid;
  gap: 6px;
  color: #2a2e44;
  font-size: 13.5px;
  font-weight: 600;
}

.form-control,
.auth-card input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 480;
  box-shadow: 0 1px 2px rgba(16, 17, 38, 0.03);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.form-control:hover,
.auth-card input:hover { border-color: rgba(16, 17, 38, 0.24); }

.form-control::placeholder,
.auth-card input::placeholder { color: #9aa0b2; font-weight: 450; }

select.form-control {
  appearance: none;
  min-height: 0;
  padding-right: 42px;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7084' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: calc(100% - 14px) 50%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.numbering-row select.form-control {
  height: 42px;
}

.form-control:focus,
.auth-card input:focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.55);
  box-shadow: var(--ring);
  background-color: #fff;
}

.errorlist {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--red);
  font-size: 13px;
  font-weight: 560;
}

textarea.form-control { resize: vertical; }
.compact { padding: 9px 10px; }

.actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  margin-top: 8px;
}

.section-heading h2,
.glass-panel h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.positions-title-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.positions-menu {
  margin-left: 0;
  transform: translateY(6px);
}

.positions-menu-popover {
  left: 0;
  right: auto;
  min-width: 260px;
}

/*
 * Popovers toggled through the hidden attribute (no Alpine) animate in via @starting-style
 * and out by letting display flip only once the fade ends. Browsers without
 * allow-discrete drop the second declaration and simply show/hide instantly.
 */
.positions-menu-popover,
.product-suggestions {
  transform-origin: top left;
  transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--ease-out);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out),
    display var(--motion-base) allow-discrete;
}

.positions-menu-popover[hidden],
.product-suggestions[hidden] {
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
}

@starting-style {
  .positions-menu-popover:not([hidden]),
  .product-suggestions:not([hidden]) {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
}

.positions-panel { position: relative; }

.muted { color: var(--muted); }

/* Extra inline/bottom padding gives row shadows room inside the horizontal scroller;
   the negative margins keep the rows exactly where they were. */
.line-items {
  display: grid;
  gap: 0px;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 5px 12px 12px;
}

.line-item,
.line-items-header {
  display: grid;
  grid-template-columns: 24px minmax(220px, 440px) 90px 140px 110px 130px minmax(90px, 110px) 52px;
  gap: 0 12px;
  align-items: center;
  min-width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
  position: relative;
}

.line-item + .line-item,
.line-item + .line-item-placeholder,
.line-item-placeholder + .line-item {
  margin-top: -8px;
}

/* Same track list, gap and inline padding as .line-item, so the names line up with the fields. */
.line-items-header {
  gap: 12px;
  min-width: 100%;
  padding: 7px 14px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The lifted row is taken out of flow and follows the pointer; its slot is held by the placeholder. */
.line-item.is-dragging {
  position: absolute;
  z-index: 40;
  min-width: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 48px rgba(31, 41, 55, 0.2), 0 0 0 1px rgba(16, 17, 38, 0.06);
  transform: scale(1.012);
  animation: line-item-lift var(--motion-base) var(--ease-out);
}

@keyframes line-item-lift {
  from {
    background: rgba(255, 255, 255, 0.56);
    box-shadow: 0 0 0 rgba(31, 41, 55, 0), 0 0 0 0 rgba(16, 17, 38, 0);
    transform: none;
  }
}

.line-item-placeholder {
  position: relative;
  z-index: 1;
  border: 2px dashed rgba(51, 40, 202, 0.28);
  border-radius: 14px;
  background: rgba(51, 40, 202, 0.045);
  animation: line-item-placeholder-in var(--motion-base) var(--ease-out);
}

@keyframes line-item-placeholder-in {
  from { opacity: 0; transform: scale(0.98); }
}

.line-items.is-reordering .line-item:not(.is-dragging) {
  opacity: 0.82;
}

.line-items .line-item {
  transition: opacity var(--motion-base) ease;
}

body.is-reordering,
body.is-reordering * {
  cursor: grabbing !important;
  user-select: none;
}

.line-item.is-removing {
  overflow: hidden;
  pointer-events: none;
}

.drag-handle {
  width: 24px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  align-self: end;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7a8093;
  cursor: grab;
  padding: 0;
  touch-action: none;
  user-select: none;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle:hover,
.drag-handle:focus {
  outline: none;
  background: rgba(16, 17, 38, 0.06);
  color: var(--ink);
}

/* Six-dot grip, two columns by three rows. */
.drag-handle span {
  width: 10px;
  height: 16px;
  display: block;
  background: radial-gradient(circle, currentColor 1.4px, transparent 1.8px) 0 0 / 5px 5.33px;
}

.line-item:hover .drag-handle { color: #4b5064; }

.line-item.is-dragging .drag-handle {
  background: rgba(51, 40, 202, 0.1);
  color: var(--accent-dark);
  transform: scale(1.06);
}

.drag-handle:focus-visible {
  box-shadow: 0 0 0 2px rgba(51, 40, 202, 0.35);
}

.line-item-field-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.line-item textarea.form-control {
  min-height: 128px;
}

.product-field { position: relative; }
.product-field .product-search-input {
  padding-left: 42px;
  background: rgba(255, 255, 255, 0.76);
  max-width: 440px;
}
.product-field::before {
  content: "";
  position: absolute;
  left: 13px;
  bottom: 13px;
  width: 15px;
  height: 15px;
  border: 2px solid #7a8093;
  border-radius: 999px;
  pointer-events: none;
}
.product-field::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: 11px;
  width: 8px;
  height: 2px;
  background: #7a8093;
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}

.product-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: 238px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(16, 17, 38, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 16px 40px rgba(31, 41, 55, 0.16);
}

.product-suggestions[hidden] { display: none; }

.product-suggestions button {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
}

.product-suggestions button {
  transition: background-color var(--motion-fast) ease;
}

.product-suggestions button:hover {
  background: rgba(79, 70, 229, 0.1);
}

.product-suggestions span {
  color: var(--muted);
  font-weight: 650;
}

/* Folds open like the sidebar submenu. visibility (delayed on close) keeps the folded
   textarea out of the tab order. The row has no row gap, so folded it adds no height at all;
   the spacing above it is a margin that only exists while open. */
.description-popover {
  display: grid;
  grid-column: 2 / -1;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--motion-base) var(--ease-out),
    margin-top var(--motion-base) var(--ease-out),
    opacity var(--motion-fast) ease,
    visibility 0s linear var(--motion-base);
}

/* Room for the textarea's focus outline inside the clipped fold; only while open, so the
   folded row adds no height and the fields stay vertically centred in the row. */
.description-popover > label {
  min-height: 0;
  overflow: hidden;
  margin: 0 -4px;
  padding: 0 4px;
  transition: padding var(--motion-base) var(--ease-out);
}

.line-item.is-editing-description .description-popover > label {
  padding: 2px 4px 4px;
}

.line-item.is-editing-description .description-popover {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.line-add { margin-top: 2px; }

.amount-cell {
  display: grid;
  gap: 7px;
  min-height: 46px;
  align-content: center;
}

.amount-cell span {
  color: #1d2034;
  font-weight: 650;
}

.amount-cell strong {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.44);
  white-space: nowrap;
}

.price-mode-pill {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(16, 17, 38, 0.06);
  margin-left: auto;
  width: max-content;
}

.price-mode-pill span {
  padding: 5px 13px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 640;
  transition: background-color var(--motion-base) ease, color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.price-mode-pill .active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 17, 38, 0.12);
}

.line-item input[type="checkbox"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-form {
  margin-bottom: 20px;
}

.settings-footer-grid {
  margin-bottom: 24px;
}

.template-default-form {
  margin-bottom: 20px;
}

.default-template-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
}

.default-template-choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.template-actions {
  margin-top: 18px;
}

.numbering-grid {
  display: grid;
  gap: 14px;
  margin: 18px 0 24px;
}

.numbering-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.numbering-row strong {
  padding-bottom: 12px;
  font-size: 17px;
}

.numbering-row.contact-numbering-row {
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr);
  column-gap: 10;
  max-width: 500px;
}

.toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 17px;
}

.toggle-row h2 {
  grid-column: 1;
  margin: 0;
}

.toggle-row .muted {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

.toggle-row label {
  display: flex;
  align-items: center;
  grid-column: 2;
  grid-row: 2;
  gap: 12px;
}

.toggle-row .button {
  grid-column: 3;
  grid-row: 2;
}

.toggle-input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
}

.icon-button {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  font-size: 23px;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.icon-button:active { transform: scale(0.92); }

.delete-line:hover {
  color: var(--red);
  background: rgba(180, 35, 24, 0.08);
}

.line-item.is-deleted {
  display: none;
}

/* Floats at the bottom of the viewport while the editor runs on below it, and comes to rest
   at the end of the form; same compact look in both states. */
.totals-bar {
  position: sticky;
  z-index: 50;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: 100%;
  margin: 4px 0 0 auto;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: 0 14px 36px rgba(31, 41, 55, 0.16);
  color: var(--ink);
  font-size: 14px;
}

.totals-bar-breakdown {
  display: flex;
  gap: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.totals-bar-breakdown strong {
  color: var(--ink);
  font-weight: 650;
}

.totals-bar-total {
  padding: 7px 12px;
  border-radius: 11px;
  background: var(--accent);
  color: white;
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.status.paid { color: var(--green); background: rgba(4, 120, 87, 0.12); }
.status.not_paid { color: var(--red); background: rgba(180, 35, 24, 0.12); }
.status.canceled { color: #5d6472; background: rgba(93, 100, 114, 0.16); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.stat {
  display: grid;
  gap: 10px;
}

.stat span { color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.stat strong { font-size: 30px; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.auth-body {
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(400px, 100%);
  padding: 32px;
}

.auth-card h1 {
  text-align: center;
  margin: 22px 0 24px;
  font-size: 24px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.auth-card .button { min-height: 42px; margin-top: 4px; }

/* Flash messages: dark pills floating over the top of the content area. */
.messages {
  position: fixed;
  z-index: 1100;
  top: 18px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.message {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 9px 18px 14px 14px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(18, 20, 35, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 34px rgba(16, 17, 38, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  pointer-events: auto;
  animation: message-in 360ms var(--ease-spring);
}

@keyframes message-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.94); }
}

.message-leave { transition: opacity 200ms ease, transform 220ms var(--ease-out); }
.message-hidden { opacity: 0; transform: translateY(-10px) scale(0.96); }

.message-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}

.message-error .message-dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.24); }
.message-warning .message-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22); }
.message-info .message-dot { background: #93c5fd; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22); }

/* Countdown line that shrinks away over 5s. Its animationend is what dismisses the toast,
   so hover, which pauses it, holds the toast open too. */
.message-timer {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: left center;
  animation: message-timer 5s linear forwards;
}

.message:hover .message-timer { animation-play-state: paused; }

@keyframes message-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: relative; height: auto; }
  .content { padding: 22px 16px; }
  .editor-grid, .two-cols, .stats-grid { grid-template-columns: 1fr; }
  .line-item { grid-template-columns: 1fr; row-gap: 12px; }
  .line-items-header { display: none; }
  .line-items .line-item-field-label {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip: auto;
    color: #1d2034;
    font-weight: 650;
    white-space: normal;
  }
  .totals-bar { width: 100%; bottom: 16px; justify-content: space-between; }
  .totals-bar-breakdown { flex-direction: column; gap: 2px; font-size: 13px; }
  .drag-handle { justify-self: start; }
  .amount-cell { gap: 7px; align-content: end; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .toggle-row { grid-template-columns: 1fr; }
  .toggle-row h2,
  .toggle-row .muted,
  .toggle-row label,
  .toggle-row .button {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  /* Narrow screens keep the identifying columns and drop the secondary ones. */
  .data-table .col-optional { display: none; }
  .documents-table { table-layout: auto; }
  .documents-table col { width: auto; }
  .data-table th,
  .data-table td { padding-left: 12px; padding-right: 12px; }
  .row-actions { min-width: 0; }
  .row-action-links { gap: 12px; }
  .row-menu { margin-left: 12px; }
  .document-customer-cell { max-width: 120px; }
  .glass-panel:has(> .data-table) { overflow-x: auto; }

  .search-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .search-bar .button {
    width: 100%;
  }

  .confirm-dialog {
    width: min(420px, calc(100vw - 36px));
    gap: 16px;
  }

  .confirm-card {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 24px 20px;
    text-align: center;
  }

  .confirm-copy strong { font-size: 24px; }
  .confirm-copy span { font-size: 14px; }

  .confirm-actions {
    width: 100%;
    gap: 14px;
  }

  .confirm-dialog .button {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    font-size: 16px;
  }

  .confirm-actions > .button,
  .confirm-actions form {
    flex: 1;
  }
}

/* htmx marks the swap target while a live-search request is in flight, and marks the
   freshly swapped-in results with htmx-added until they settle, so they fade back up. */
#search-results {
  transition: opacity 180ms ease-out;
}

#search-results.htmx-request,
#search-results.htmx-added {
  opacity: 0.55;
  transition: opacity 120ms ease-in;
}

.price-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.price-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.price-switch-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--line);
  position: relative;
  transition: background var(--motion-base) ease;
}

.price-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 17, 38, 0.2);
  transition: transform var(--motion-base) var(--ease-spring);
}

.price-switch input:checked + .price-switch-track {
  background: var(--accent);
}

.price-switch input:checked + .price-switch-track::after {
  transform: translateX(20px);
}

.price-switch input:focus-visible + .price-switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Still count down: it drives the auto-dismiss. */
  .message-timer { animation-duration: 5s !important; }
}