/* 1999.LOC — the invoice tool's face: a desktop accounting program.
 *
 * The QuickBooks-shaped invoice form: a grey toolbar with a green Save, a
 * From and a Bill-To block side by side, and the line items on green-bar
 * ledger paper, the alternating green and white stripes of an accountant's
 * pad. The numbers sit in a monospace column and add up in a box on the
 * right. Plain colours and bevels, no variables, no web fonts, scoped under
 * [data-app="invoice"].
 */

[data-app="invoice"] .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;
}

/* ---- the menu bar and toolbar, pinned to the window --------------- */
[data-app="invoice"] .app-window > .qb-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #e4e4dc;
  border-bottom: 1px solid #9a9a90;
  font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #1c1c18;
}
[data-app="invoice"] .app-window > .qb-menu .menu-title {
  font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  font-size: 11px;
  min-height: 26px;
}
[data-app="invoice"] .app-window > .qb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #eeeee7;
  border-bottom: 1px solid #b7b7ac;
  font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="invoice"] .qb-save {
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid #1c6b2a;
  border-top-color: #7cd08a;
  background: #2ca01c;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #6fc97e;
}
[data-app="invoice"] .qb-save:active:not(:disabled) { box-shadow: inset 0 2px 5px rgba(0, 40, 0, 0.4); }
[data-app="invoice"] .qb-save:disabled { opacity: 0.6; cursor: default; }
[data-app="invoice"] .qb-sep { width: 0; height: 22px; border-left: 1px solid #b7b7ac; border-right: 1px solid #ffffff; }
[data-app="invoice"] .qb-tpl-label { color: #55554c; }
[data-app="invoice"] .qb-tpls { display: inline-flex; }
[data-app="invoice"] .qb-tpl {
  padding: 5px 12px;
  border: 1px solid #9a9a90;
  background: #f6f6f0;
  color: #33332c;
  cursor: pointer;
  font-size: 11px;
}
[data-app="invoice"] .qb-tpl + .qb-tpl { border-left: none; }
[data-app="invoice"] .qb-tpl:first-child { border-radius: 4px 0 0 4px; }
[data-app="invoice"] .qb-tpl:last-child { border-radius: 0 4px 4px 0; }
[data-app="invoice"] .qb-tpl.is-on { background: #217a3c; border-color: #175c2c; color: #ffffff; font-weight: 700; }
[data-app="invoice"] .qb-clear {
  padding: 5px 12px;
  border: 1px solid #9a9a90;
  border-radius: 4px;
  background: #f6f6f0;
  color: #55554c;
  cursor: pointer;
  font-size: 11px;
}
[data-app="invoice"] .qb-clear:hover { background: #ece9d8; }

/* ---- the sheet ---------------------------------------------------- */
[data-app="invoice"] .app-body {
  font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #1c1c18;
  background: #cfd3c8;
}
/* The gutter. The shell sets `padding: 0` on an application's body, for the
   programs that lay themselves out in bands and bring their own spacing; this
   one is content, and with no gutter every line starts hard against the tube.
   A plain `[data-app] .app-body` loses to that shell rule, which carries an
   element plus two classes, which is why the padding this asked for never
   arrived. Naming the desk the window sits on wins on class count without
   reaching outside the app. */
[data-app="invoice"] .desk-shell .app-window > .app-body { padding: 12px 14px; }

[data-app="invoice"] .app-body h3 { font-size: 13px; color: #175c2c; margin: 10px 0 5px 0; }
[data-app="invoice"] .app-body .note { color: #35352d; }
[data-app="invoice"] .app-body a { color: #0a5f2a; }

[data-app="invoice"] .qb-sheet {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #b7b7ac;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-app="invoice"] .qb-parties { display: flex; gap: 14px; }
[data-app="invoice"] .qb-party {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #cfcfc4;
  border-radius: 4px;
  padding: 8px 10px 10px;
  margin: 0;
}
[data-app="invoice"] .qb-party legend {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #217a3c;
  font-weight: 700;
  padding: 0 4px;
}
[data-app="invoice"] .qb-party input,
[data-app="invoice"] .qb-party textarea,
[data-app="invoice"] .qb-meta input,
[data-app="invoice"] .qb-notes textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  margin-top: 5px;
  border: 1px solid #c2c2b6;
  border-radius: 3px;
  background: #fbfbf7;
  color: #1c1c18;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  font-size: 12px;
}
[data-app="invoice"] .qb-party input:focus,
[data-app="invoice"] .qb-party textarea:focus,
[data-app="invoice"] .qb-meta input:focus,
[data-app="invoice"] .qb-ledger input:focus,
[data-app="invoice"] .qb-notes textarea:focus { outline: 2px solid #2ca01c; outline-offset: -1px; }
[data-app="invoice"] .qb-party input:first-of-type { font-weight: 700; }

[data-app="invoice"] .qb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 14px 0;
}
[data-app="invoice"] .qb-meta label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #55554c;
}
[data-app="invoice"] .qb-meta input { width: 130px; margin-top: 0; }
[data-app="invoice"] .qb-meta input.qb-cur { width: 48px; text-align: center; }

/* ---- the green-bar ledger ----------------------------------------- */
[data-app="invoice"] .qb-ledger {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #9db98a;
  font-size: 12px;
}
[data-app="invoice"] .qb-ledger thead th {
  background: #217a3c;
  color: #ffffff;
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
}
[data-app="invoice"] .qb-ledger th.qb-c-qty,
[data-app="invoice"] .qb-ledger th.qb-c-rate,
[data-app="invoice"] .qb-ledger th.qb-c-amt { text-align: right; }
[data-app="invoice"] .qb-ledger .qb-c-qty { width: 62px; }
[data-app="invoice"] .qb-ledger .qb-c-rate { width: 96px; }
[data-app="invoice"] .qb-ledger .qb-c-amt { width: 104px; }
[data-app="invoice"] .qb-ledger .qb-c-del { width: 28px; }
[data-app="invoice"] .qb-ledger tbody tr { background: #ffffff; }
[data-app="invoice"] .qb-ledger tbody tr:nth-child(odd) { background: #e9f4e1; }
[data-app="invoice"] .qb-ledger td { padding: 3px 6px; border-bottom: 1px solid #d3e3c8; vertical-align: middle; }
[data-app="invoice"] .qb-ledger input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 5px;
  font-size: 12px;
  color: #1c1c18;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
}
[data-app="invoice"] .qb-ledger input:hover { border-color: #bcd3ab; background: #ffffff; }
[data-app="invoice"] .qb-ledger .qb-qty,
[data-app="invoice"] .qb-ledger .qb-rate { text-align: right; font-family: "Courier New", Courier, monospace; }
[data-app="invoice"] .qb-ledger .qb-amt {
  display: block;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
  color: #1c1c18;
  padding-right: 5px;
}
[data-app="invoice"] .qb-del {
  width: 20px; height: 20px;
  line-height: 1;
  border: 1px solid #c07a7a;
  border-radius: 3px;
  background: #f2dede;
  color: #a01818;
  font-weight: 700;
  cursor: pointer;
}
[data-app="invoice"] .qb-del:hover { background: #e8c9c9; }

/* ---- add line, and the totals box --------------------------------- */
[data-app="invoice"] .qb-below {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}
[data-app="invoice"] .qb-add {
  padding: 6px 12px;
  border: 1px solid #9db98a;
  border-radius: 4px;
  background: #f0f6ea;
  color: #175c2c;
  font-weight: 700;
  cursor: pointer;
}
[data-app="invoice"] .qb-add:hover { background: #e4efd9; }
[data-app="invoice"] .qb-totals { width: 240px; }
[data-app="invoice"] .qb-trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  border-bottom: 1px solid #e2e2d8;
}
[data-app="invoice"] .qb-trow span:last-child { font-family: "Courier New", Courier, monospace; }
[data-app="invoice"] .qb-taxin {
  width: 46px;
  text-align: right;
  border: 1px solid #c2c2b6;
  border-radius: 3px;
  padding: 2px 4px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
[data-app="invoice"] .qb-grand {
  border-bottom: none;
  border-top: 2px solid #217a3c;
  margin-top: 2px;
  padding-top: 6px;
  font-weight: 700;
  font-size: 15px;
  color: #175c2c;
}

[data-app="invoice"] .qb-notes { margin-top: 14px; }
[data-app="invoice"] .qb-notes label { display: block; font-size: 11px; color: #55554c; margin-bottom: 4px; }

[data-app="invoice"] .error { color: #a01010; margin: 8px 2px 0; }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 700px) {
  [data-app="invoice"] .app-window > .qb-menu span { padding: 2px 5px; }
  [data-app="invoice"] .qb-sheet { padding: 10px; }
  [data-app="invoice"] .qb-parties { flex-direction: column; }
  [data-app="invoice"] .qb-below { flex-direction: column; }
  [data-app="invoice"] .qb-totals { width: 100%; }
  [data-app="invoice"] .qb-ledger { font-size: 11px; }
  [data-app="invoice"] .qb-ledger .qb-c-rate { width: 80px; }
  [data-app="invoice"] .qb-ledger .qb-c-amt { width: 88px; }
}