/* Invoice Maker — /invoice/style.css
   Layered on /style.css and /zodi-page.css; only what those don't already give. */

.inv-intro { color: var(--muted); font-size: 12px; margin: 0 0 14px; }

/* --- Tabs ---------------------------------------------------------------- */
.inv-tabs { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.inv-tab {
  border: 1px solid var(--line, #e3e3ef); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.inv-tab:hover { border-color: #766df4; color: #766df4; }
.inv-tab.is-active { background: #766df4; border-color: #766df4; color: #fff; }

/* --- Toolbar ------------------------------------------------------------- */
.inv-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.inv-toolbar .inv-input { flex: 1 1 160px; min-width: 0; }

.inv-input {
  border: 1px solid var(--line, #e3e3ef); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 14px; background: #fff;
  width: 100%; box-sizing: border-box;
}
.inv-input:focus { outline: 2px solid #766df4; outline-offset: -1px; }

.inv-primary {
  background: #766df4; color: #fff; border: 0; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.inv-primary:hover { background: #5c52e0; }
.inv-primary:disabled { opacity: .6; cursor: default; }

.inv-mini {
  background: #f3f3f8; color: #444; border: 1px solid var(--line, #e3e3ef);
  border-radius: 7px; padding: 6px 11px; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.inv-mini:hover { background: #e9e9f4; }

.inv-danger { background: #fdeaea; color: #c0392b; border: 1px solid #f5c6c2; }
.inv-danger:hover { background: #f9d6d3; }
.inv-danger, .inv-danger:hover {
  border-radius: 7px; padding: 6px 11px; font-size: 13px; cursor: pointer;
}

/* --- Summary tiles ------------------------------------------------------- */
.inv-tiles {
  display: grid; gap: 10px; margin: 0 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.inv-tile {
  background: #fff; border: 1px solid var(--line, #e3e3ef); border-left: 3px solid #b9b4f7;
  border-radius: 10px; padding: 14px 16px;
}
.inv-tile.is-paid { border-left-color: #16c995; }
.inv-tile.is-out { border-left-color: #fdb52a; }
.inv-tile.is-overdue { border-left-color: #f5544c; }
.inv-tile.is-expense { border-left-color: #a880d9; }
.inv-tile-v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.inv-tile-k { font-size: 12px; color: var(--muted); margin-top: 2px; }

.inv-h2 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.inv-h4 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--muted); }
.inv-empty { color: var(--muted); font-size: 13px; padding: 18px 2px; }

/* --- Tables -------------------------------------------------------------- */
.inv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.inv-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--line, #e3e3ef);
}
.inv-table td { padding: 9px 8px; border-bottom: 1px solid #f1f1f6; }
.inv-table tr:last-child td { border-bottom: 0; }
.inv-num { font-variant-numeric: tabular-nums; color: var(--muted); }
.inv-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-actions { text-align: right; white-space: nowrap; }
.inv-actions .inv-mini + .inv-mini { margin-left: 4px; }

/* Tables are the one thing that can force the page to scroll sideways on a
   phone; give them their own scroll container instead. */
#inv-list, #inv-recent, #inv-cust-list, #exp-list { overflow-x: auto; }

.inv-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
}
.inv-badge.is-draft { background: #eeeef5; color: #6b6b80; }
.inv-badge.is-sent { background: #e7f0ff; color: #2f6fd0; }
.inv-badge.is-overdue { background: #fdeaea; color: #c0392b; }
.inv-badge.is-paid { background: #e3f8f1; color: #0f8f68; }
.inv-badge.is-cancelled { background: #f2f2f2; color: #999; text-decoration: line-through; }

/* --- Modals -------------------------------------------------------------- */
/* z-index MUST stay above the shared furniture in /nav.css, which this file
   knows nothing about and cannot see:
     .zodi-nav            1100   sticky top bar
     .zodi-settings-panel 1200   its ⚙ and ➕ dropdowns
   This was 900, so the top bar drew straight over the top of every invoice,
   expense, customer and receipt-import dialog — the title and first field of
   each one sat behind it. 2000 matches .act-overlay in /activities/style.css,
   which the class dialogs on /business use and which is why those were fine;
   two overlay systems at the same level is harmless when only one opens at a
   time, and keeping them equal means the next person only has one number to
   look up. */
.inv-modal {
  position: fixed; inset: 0; z-index: 2000; background: rgba(24, 24, 40, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 12px; overflow-y: auto;
}
.inv-modal[hidden] { display: none; }
.inv-modal-box {
  background: #fff; border-radius: 14px; padding: 20px; width: 100%;
  max-width: 640px; box-shadow: 0 18px 50px rgba(24, 24, 40, .22);
}
.inv-modal-sm { max-width: 420px; }
.inv-modal-box h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }

.inv-grid {
  display: grid; gap: 10px; margin: 0 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.inv-grid label, .inv-full {
  display: block; font-size: 12px; color: var(--muted); font-weight: 500;
}
.inv-grid label .inv-input, .inv-full .inv-input { margin-top: 3px; }
.inv-full { margin: 10px 0 0; }

/* --- Line items ---------------------------------------------------------- */
.inv-items { display: flex; flex-direction: column; gap: 6px; }
.inv-item-row {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: minmax(0, 1fr) 72px 92px 88px 32px;
}
.inv-item-row .inv-item-total {
  font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.inv-item-row input {
  border: 1px solid var(--line, #e3e3ef); border-radius: 7px;
  padding: 7px 9px; font: inherit; font-size: 13px; width: 100%;
  box-sizing: border-box;
}
.inv-del { padding: 6px 8px; color: #c0392b; }

/* Stack the line grid on narrow screens — 5 columns will not fit a phone. */
@media (max-width: 560px) {
  .inv-item-row { grid-template-columns: minmax(0, 1fr) 1fr 32px; }
  .inv-item-row input[data-f="description"] { grid-column: 1 / -1; }
  .inv-item-row .inv-item-total { grid-column: 1 / 3; text-align: left; }
}

.inv-sums {
  display: flex; justify-content: flex-end; gap: 18px; align-items: baseline;
  margin: 14px 0 0; font-size: 13px; color: var(--muted);
}
.inv-sums b { font-variant-numeric: tabular-nums; color: #222; }
.inv-sums-grand { font-size: 15px; }
.inv-sums-grand b { font-size: 18px; font-weight: 700; }

.inv-flags { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; }
.inv-flags label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.inv-modal-actions {
  display: flex; gap: 8px; align-items: center; margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid #f1f1f6;
}
.inv-spacer { flex: 1; }

/* --- Settings ------------------------------------------------------------ */
/* The [hidden] rule is not optional: an author `display: flex` outranks the
   UA's [hidden] { display: none }, so without it renderProfileNotice() sets
   .hidden = true and the bar stays on screen — an empty yellow strip for
   every user who has already filled in their business name. */
.inv-notice[hidden] { display: none; }
.inv-notice {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 16px; padding: 11px 14px; border-radius: 9px;
  background: #fff6e0; border: 1px solid #f0d79a; font-size: 13px; line-height: 1.5;
}
.inv-profile { max-width: 620px; }
.inv-help { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.inv-profile small.inv-help { display: block; margin: 4px 0 0; }

/* The real <input type=file> is hidden, so the <label> is the button. It needs
   the pointer explicitly — a label does not get one from .inv-mini. */
.inv-file { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.inv-logo-preview {
  max-height: 80px; max-width: 240px; display: block; margin: 0 0 10px;
  border: 1px solid var(--line, #e3e3ef); border-radius: 7px; padding: 6px;
  background: #fff;
}

/* --- Print / PDF --------------------------------------------------------- */
/* Hidden on screen; the print rules below swap the whole page for it. Using
   the browser's own "Save as PDF" keeps export free — no server round trip. */
.inv-print { display: none; }

@media print {
  body.inv-printing > *:not(.inv-print) { display: none !important; }
  body.inv-printing .inv-print {
    display: block; padding: 0; font-size: 12pt; color: #000;
  }
  @page { margin: 18mm; }
}

/* Seller block on the left, INVOICE/#no on the right. align-items is flex-start
   rather than baseline because the "from" side is now several lines tall. */
.inv-print-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 16px;
}
.inv-print-head h1 { font-size: 22pt; margin: 0; letter-spacing: .04em; }
.inv-print-no { font-size: 14pt; font-weight: 600; }
.inv-print-title { text-align: right; flex: none; }
.inv-print-from { font-size: 10pt; line-height: 1.45; }
.inv-print-biz { font-size: 14pt; font-weight: 700; margin-bottom: 2px; }
.inv-print-logo { max-height: 60px; max-width: 200px; display: block; margin-bottom: 6px; }

.inv-print-pay {
  margin-top: 18px; padding: 8px 10px; border: 1px solid #000;
  font-size: 10pt; line-height: 1.5; display: inline-block;
}

.inv-print-meta {
  display: flex; justify-content: space-between; gap: 24px;
  margin-bottom: 20px; line-height: 1.5;
}

.inv-print-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.inv-print-table th {
  text-align: left; border-bottom: 1px solid #000; padding: 5px 4px; font-size: 10pt;
}
.inv-print-table th:not(:first-child) { text-align: right; }
.inv-print-table td { padding: 5px 4px; border-bottom: 1px solid #ddd; }
.inv-print-table td:not(:first-child) { text-align: right; white-space: nowrap; }

.inv-print-totals { margin-left: auto; border-collapse: collapse; }
.inv-print-totals td { padding: 3px 4px 3px 24px; text-align: right; }
.inv-print-grand td { border-top: 1px solid #000; font-weight: 700; font-size: 13pt; }

.inv-print-notes {
  margin-top: 24px; padding-top: 10px; border-top: 1px solid #ddd;
  font-size: 10pt; line-height: 1.5;
}
.inv-print-void {
  margin-top: 20px; font-size: 18pt; font-weight: 700; letter-spacing: .1em;
  color: #c0392b; border: 3px solid #c0392b; padding: 6px 14px;
  display: inline-block; transform: rotate(-4deg);
}

/* --- Expenses ------------------------------------------------------------ */
/* Secondary text inside a table cell: the description under a vendor name,
   and the count next to the total. */
.inv-sub { color: var(--muted); font-size: 12px; }

/* The total row. Sits under a scrolling body, so it needs its own top rule
   rather than relying on the last row's border. */
.inv-table tfoot td {
  border-top: 2px solid var(--line, #e3e3ef);
  font-weight: 700;
  padding-top: 10px;
}

/* --- Customers ------------------------------------------------------------ */
/* Archived customers are listed last rather than hidden, so hiding one stays
   reversible. Dimmed so the active list still reads as the list. */
.inv-table tr.is-archived td { opacity: .55; }

/* --- Reports -------------------------------------------------------------- */
/* A loss is the one number on these screens someone has to notice, so it is
   coloured rather than left to the minus sign alone. */
.inv-neg { color: #d94f6a; }

/* Two columns on a wide screen, stacked on a phone. Used for "by category"
   next to "by month" — they are read together, but never side by side at
   360px wide. */
.inv-two { display: grid; gap: 0 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .inv-two { grid-template-columns: 1fr 1fr; } }

/* The bar chart. One row per year, no chart library: this has to print, work
   offline, and not add a megabyte of JavaScript to a page that is otherwise
   plain HTML. */
.inv-bars { margin: 8px 0 4px; }
.inv-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.inv-bar-k { flex: 0 0 5.5rem; font-size: 12px; color: var(--muted); }
.inv-bar-track { flex: 1 1 auto; min-width: 0; }
.inv-bar-fill {
  display: block; height: 18px; min-width: 2px; border-radius: 4px;
  background: #16c995;
}
.inv-bar-fill.is-neg { background: #d94f6a; }
.inv-bar-v { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }

/* --- Dashboard working lists ---------------------------------------------- */
/* Every row is something you are about to act on, so the whole row opens it. */
.inv-rowlink { cursor: pointer; }
.inv-rowlink:hover { background: var(--hover, #f4f3ff); }
/* A due date already past. Not a badge — the status column already carries
   one, and two red things on a row is one too many. */
.inv-late { color: #d94f6a; font-weight: 600; }

/* --- Time (retainer notes) ------------------------------------------------ */
/* Monospace so the times line up column-wise while typing, which is how you
   spot the line you mistyped. */
#rt-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; width: 100%;
}

/* --- B2C: the extra class panel ------------------------------------------- */
/* /business renders these panels from shell.js and adds one of its own, whose
   contents are styled by business/style.css and activities/style.css. All that
   is needed here is that the extra panel hides like the rest: an author
   `display` on one of its children would otherwise outrank the UA's
   [hidden] { display: none } and leave the calendar on screen under every
   other tab — exactly the bug .inv-notice already shipped once. */
.inv-panel[hidden] { display: none; }