/* ==========================================================================
   New Invoice composer — laid out against the real FreshBooks screen D.I.C.
   work in today (reference/freshbooks-screens/freshbooks-new-invoice-TARGET.png).

   Colours and fonts deliberately inherit from the app's own custom properties
   wherever they are brand surfaces, so the owner's theme and font pickers on
   the main page keep working. The two green action buttons are the one
   exception: they are lifted straight from the screenshot, because that is the
   thing being matched.
   ========================================================================== */

.ninv-page {
  --ninv-green: #35a900;
  --ninv-green-dark: #2f9400;
  --ninv-rule: #e1dfe0;
  --ninv-muted: #6e7780;
  --ninv-link: #9db4d0;
  max-width: var(--fb-col-w);
  margin: 0 auto;
  padding-bottom: 60px;
}

.ninv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 18px;
}

.ninv-top h1 {
  font-size: 1.65rem;
  font-weight: 700;
  color: #0c192a;
  letter-spacing: -0.01em;
}

.ninv-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ninv-btn-cancel {
  background: none;
  border: 0;
  font: inherit;
  font-size: .95rem;
  color: #4a5361;
  cursor: pointer;
  padding: 8px 10px;
}

.ninv-btn-cancel:hover { color: #0c192a; text-decoration: underline; }

.ninv-btn-green {
  background: var(--ninv-green);
  border: 0;
  border-radius: 4px;
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: 9px 20px;
  cursor: pointer;
}

.ninv-btn-green:hover { background: var(--ninv-green-dark); }
.ninv-btn-green.is-send { background: var(--ninv-green-dark); }
.ninv-btn-green.is-send:hover { background: #268000; }

.ninv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  align-items: start;
}

/* -------------------------------------------------------------- the paper */

.ninv-paper {
  background: #fff;
  border: 1px solid var(--ninv-rule);
  padding: 30px 32px 40px;
  min-height: 640px;
}

.ninv-paper-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

/* Sized to the mark, never scaled past it — the SVG is resolution
   independent but the width is pinned so nothing can stretch it. */
.ninv-logo {
  display: block;
  width: 168px;
  height: auto;
  flex-shrink: 0;
}

.ninv-biz {
  text-align: right;
  font-size: .8rem;
  line-height: 1.5;
  color: #313131;
}

.ninv-biz-name { font-weight: 400; }

.ninv-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .78rem;
  color: var(--ninv-link);
  cursor: pointer;
  text-align: inherit;
}

.ninv-link:hover { color: #5b7fa8; text-decoration: underline; }

.ninv-biz .ninv-link { display: inline-block; margin-top: 6px; }

/* ------------------------------------------------------------ field row */

.ninv-fields {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 34px;
}

.ninv-field label,
.ninv-field-label {
  display: block;
  font-size: .78rem;
  color: #313131;
  margin-bottom: 5px;
}

.ninv-field input[type="text"],
.ninv-field input[type="date"],
.ninv-field input[type="number"] {
  width: 100%;
  font: inherit;
  font-size: .82rem;
  color: #313131;
  border: 1px solid var(--ninv-rule);
  border-radius: 3px;
  padding: 8px 10px;
  background: #fff;
}

.ninv-field input::placeholder { color: #b7bfc9; }
.ninv-field input:focus { outline: 0; border-color: #8fa8c4; }

/* Date of Issue / Invoice Number read as plain text on the real screen, with
   only the value showing until it is clicked. */
.ninv-field-plain input {
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 4px;
  background: none;
}

.ninv-field-plain input:hover { border-color: var(--ninv-rule); }

.ninv-subfield { margin-top: 14px; }

.ninv-field-amount { text-align: right; }

.ninv-amount-due {
  font-size: 1.85rem;
  font-weight: 400;
  color: #0c192a;
  line-height: 1.15;
  white-space: nowrap;
}

/* --------------------------------------------------------- line items */

.ninv-lines-rule {
  border: 0;
  border-top: 2px solid #313131;
  margin: 0 0 8px;
}

.ninv-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.ninv-lines th {
  font-weight: 400;
  color: #313131;
  font-size: .78rem;
  text-align: right;
  padding: 0 6px 10px;
}

.ninv-lines th:first-child { text-align: left; }

.ninv-lines td {
  padding: 6px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f2f4;
}

.ninv-lines td:first-child { padding-left: 0; }
.ninv-lines td:last-child { padding-right: 0; text-align: right; }

.ninv-lines input {
  width: 100%;
  font: inherit;
  font-size: .82rem;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 6px 8px;
  background: none;
  color: #313131;
}

.ninv-lines input:hover { border-color: var(--ninv-rule); }
.ninv-lines input:focus { outline: 0; border-color: #8fa8c4; background: #fff; }
.ninv-lines .ninv-num input { text-align: right; }
.ninv-lines .ninv-line-total { white-space: nowrap; color: #313131; }

.ninv-row-remove {
  background: none;
  border: 0;
  color: #c3c8ce;
  cursor: pointer;
  font-size: .95rem;
  padding: 0 2px;
  line-height: 1;
}

.ninv-row-remove:hover { color: var(--fb-accent); }

.ninv-catalog-bar {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #f7f9fb;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
}
.ninv-catalog-bar > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}
.ninv-catalog-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ninv-catalog-row select {
  flex: 1;
  min-width: 0;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}
.ninv-catalog-hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: #6b7280;
}
.ninv-item-select {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.85rem;
  background: #fafbfc;
  color: #111827;
}

.ninv-addline {
  display: block;
  width: 100%;
  margin: 10px 0 26px;
  padding: 11px;
  border: 1px dashed #d9dde2;
  border-radius: 3px;
  background: none;
  font: inherit;
  font-size: .82rem;
  color: #8b95a1;
  cursor: pointer;
}

.ninv-addline:hover { border-color: #8fa8c4; color: #4a5361; }

/* -------------------------------------------------------------- totals */

.ninv-totals {
  margin-left: auto;
  width: 260px;
  font-size: .82rem;
  color: #313131;
}

.ninv-total-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 0;
}

.ninv-total-row.is-link { justify-content: flex-end; padding: 0 0 3px; }
.ninv-totals hr { border: 0; border-top: 1px solid #e6e8eb; margin: 8px 0; }
.ninv-totals hr.is-heavy { border-top: 2px solid #c9ced4; margin: 12px 0; }
.ninv-total-row.is-due { font-size: .92rem; padding-top: 2px; }

/* ------------------------------------------------------- notes & terms */

.ninv-block { margin-top: 34px; }

.ninv-block h4 {
  font-size: .85rem;
  font-weight: 700;
  color: #313131;
  margin-bottom: 6px;
}

.ninv-block textarea {
  width: 100%;
  font: inherit;
  font-size: .82rem;
  color: #313131;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 6px 8px;
  background: none;
  resize: vertical;
  min-height: 46px;
}

.ninv-block textarea::placeholder { color: #b7bfc9; }
.ninv-block textarea:hover { border-color: var(--ninv-rule); }
.ninv-block textarea:focus { outline: 0; border-color: #8fa8c4; background: #fff; }

/* --------------------------------------------------------- settings rail */

.ninv-side { padding: 8px 0 0 28px; }

.ninv-side h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0c192a;
  margin-bottom: 1px;
}

.ninv-side-sub {
  font-size: .82rem;
  color: var(--ninv-muted);
  margin-bottom: 14px;
}

.ninv-side-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid #ececec;
  padding: 16px 0;
  font: inherit;
  cursor: pointer;
}

.ninv-side-row:last-child { border-bottom: 1px solid #ececec; }
.ninv-side-row:hover .ninv-side-title { color: var(--fb-accent); }

.ninv-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ninv-side-ico {
  width: 18px;
  color: #6a6b6f;
  font-size: .95rem;
  flex-shrink: 0;
  text-align: center;
}

.ninv-side-title {
  flex: 1;
  font-size: .92rem;
  color: #1b1d21;
}

.ninv-side-flag {
  font-size: .78rem;
  font-weight: 700;
  color: #272e40;
  letter-spacing: .02em;
}

.ninv-side-chev { color: #6a6b6f; font-size: .8rem; }

.ninv-side-desc {
  margin: 4px 0 0 28px;
  font-size: .8rem;
  color: var(--ninv-muted);
}

.ninv-cards {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0 28px;
  opacity: .55;
}

.ninv-card-pill {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: #7b838d;
  border-radius: 2px;
  padding: 2px 4px;
  line-height: 1.1;
}

.ninv-card-pill.is-faint { background: none; color: #a8aeb5; padding: 2px 0; }

@media (max-width: 1080px) {
  .ninv-grid { grid-template-columns: minmax(0, 1fr); }
  .ninv-side { padding: 24px 0 0; }
  .ninv-fields { grid-template-columns: 1fr 1fr; }
}