/* ════════════════════════════════════════════════════════════════════
 * Invoiso Invoice Manager — Redesign layer v3 (2026-06)
 * Loads AFTER modern-override.css.
 *   1. Brand-new "Finance Platform" header (#inv-hdr); app bar hidden
 *   2. KPI cards with coloured accent
 *   3. Readable transaction table + brand-category badges
 * ════════════════════════════════════════════════════════════════════ */

:root {
  --inv-nav-h: 64px;
  --inv-income: #16a37a;
  --inv-income-bg: #e7f7f0;
  --inv-expense: #e1483b;
  --inv-expense-bg: #fdecea;
  --inv-balance: #2f6bff;
  --inv-balance-bg: #e8f0ff;
  --inv-violet: #7c5cfc;
  --inv-row-alt: #f9fbfd;
  --inv-row-hover: #f0f6ff;
}

/* ─────────────────────────────────────────────────────────────────────
 * 1. HEADER — built from scratch (#inv-hdr); original app bar hidden
 * ──────────────────────────────────────────────────────────────────── */

/* Move the app's own top bar off-screen (kept rendered + clickable, so its
 * links can be triggered and re-detected; NOT display:none which would also
 * hide re-rendered links from geometry detection). */
.inv-orig-bar {
  position: fixed !important;
  top: -10000px !important;
  left: 0 !important;
  width: 1280px !important;
  max-width: 1280px !important;
  opacity: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

#inv-hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--inv-nav-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border, #e7ecf3);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 10px 28px -22px rgba(15, 23, 42, 0.45);
}
#inv-hdr * { box-sizing: border-box; }
.inv-hdr-inner {
  max-width: 1640px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(14px, 2vw, 28px);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo */
.inv-hdr-logo { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; text-decoration: none !important; }
.inv-hdr-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary, #1f7ae0), #14a3b8);
  box-shadow: 0 4px 12px -4px rgba(31,122,224,.55);
}
.inv-hdr-mark svg { width: 22px; height: 22px; }
.inv-hdr-brand { display: flex; flex-direction: column; line-height: 1.1; }
.inv-hdr-brand b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text, #0f172a); }
.inv-hdr-brand i { font-size: 11px; font-style: normal; font-weight: 600; color: var(--muted, #94a3b8); letter-spacing: .02em; }

/* Nav — clean text tabs; centres when it fits, scrolls from the left otherwise */
.inv-hdr-nav {
  flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; align-items: stretch; justify-content: flex-start; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.inv-hdr-nav::-webkit-scrollbar { height: 0; display: none; }
.inv-hdr-nav > .inv-tab:first-child { margin-left: auto; }
.inv-hdr-nav > .inv-tab:last-child  { margin-right: auto; }

.inv-tab {
  flex: 0 0 auto; height: 100%; padding: 0 14px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: #5b6b82; background: transparent; border: 0;
  border-bottom: 2.5px solid transparent; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.inv-tab:hover { color: var(--primary-dk, #1862b8); }
.inv-tab.is-active { color: var(--primary, #1f7ae0); border-bottom-color: var(--primary, #1f7ae0); }

/* Right cluster */
.inv-hdr-cluster { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.inv-search {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px 0 12px;
  background: #f1f5f9; border: 1px solid transparent; border-radius: 11px; color: #64748b;
  transition: border-color .15s ease, background .15s ease;
  width: 220px; max-width: 26vw;
}
.inv-search:focus-within { background: #fff; border-color: var(--primary, #1f7ae0); box-shadow: 0 0 0 3px rgba(31,122,224,.14); }
.inv-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.inv-search-input {
  flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important;
  font-size: 13.5px; color: var(--text, #0f172a); padding: 0 !important; height: 100%;
}
.inv-search kbd {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #94a3b8;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 6px; line-height: 1;
}
.inv-bell {
  position: relative; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: #56657d;
  background: #f1f5f9; border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.inv-bell:hover { background: #e8eef6; color: var(--primary-dk, #1862b8); }
.inv-bell svg { width: 18px; height: 18px; }
.inv-bell-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #fff; }
.inv-avatar { display: flex; align-items: center; gap: 9px; padding-left: 2px; cursor: pointer; }
.inv-ava-circle {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--primary, #1f7ae0), var(--inv-violet, #7c5cfc));
  box-shadow: 0 2px 8px -2px rgba(31,122,224,.5);
}
.inv-ava-meta { display: flex; flex-direction: column; line-height: 1.15; }
.inv-ava-meta b { font-size: 13px; font-weight: 700; color: var(--text, #0f172a); }
.inv-ava-meta span { font-size: 11px; color: var(--muted, #64748b); }

@media (max-width: 1240px) { .inv-search { width: 150px; } .inv-ava-meta { display: none; } }
@media (max-width: 920px)  { .inv-search { display: none; } }

/* ─────────────────────────────────────────────────────────────────────
 * 2. KPI CARDS  →  coloured top accent + big number
 * ──────────────────────────────────────────────────────────────────── */
.grid.grid-cols-1.md\:grid-cols-3 { gap: 18px !important; }
.grid.grid-cols-1.md\:grid-cols-3 > div {
  position: relative;
  border-radius: 18px !important;
  border: 1px solid var(--border, #e7ecf3) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -18px rgba(15,23,42,.28) !important;
  padding: 22px 24px !important;
  min-height: 112px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.grid.grid-cols-1.md\:grid-cols-3 > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 36px -20px rgba(15,23,42,.34) !important;
}
.grid.grid-cols-1.md\:grid-cols-3 > div::after {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: var(--_accent, var(--primary, #1f7ae0)); opacity: .95;
}
.grid.grid-cols-1.md\:grid-cols-3 > div:nth-child(1) { --_accent: var(--inv-income); }
.grid.grid-cols-1.md\:grid-cols-3 > div:nth-child(2) { --_accent: var(--inv-expense); }
.grid.grid-cols-1.md\:grid-cols-3 > div:nth-child(3) { --_accent: var(--inv-balance); }
.grid.grid-cols-1.md\:grid-cols-3 > div > p:first-child {
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--muted, #64748b) !important; margin: 0 0 6px !important; letter-spacing: .01em;
}
.grid.grid-cols-1.md\:grid-cols-3 > div > p:not(:first-child) {
  font-size: 26px !important; font-weight: 800 !important;
  color: var(--text, #0f172a) !important; line-height: 1.1 !important; margin: 0 !important;
  font-variant-numeric: tabular-nums;
}
.grid.grid-cols-1.md\:grid-cols-3 > div svg { opacity: .9; }

/* ─────────────────────────────────────────────────────────────────────
 * 3. TAG CHIPS
 * ──────────────────────────────────────────────────────────────────── */
button.px-3.py-1.text-sm.rounded-full,
span.px-3.py-1.text-sm.rounded-full {
  font-size: 12.5px !important; font-weight: 600 !important; padding: 6px 13px !important;
  border-radius: 999px !important; border: 1px solid var(--border, #e7ecf3) !important;
  color: var(--text-2, #334155) !important; background: #fff !important; transition: all .14s ease !important;
}
button.px-3.py-1.text-sm.rounded-full:hover {
  border-color: var(--primary, #1f7ae0) !important; color: var(--primary-dk, #1862b8) !important; background: #f3f8ff !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 4. TRANSACTION TABLE — readable columns + premium rows
 * ──────────────────────────────────────────────────────────────────── */
.inv-txtable {
  width: 100% !important; table-layout: fixed !important;
  border-collapse: separate !important; border-spacing: 0 !important; min-width: 940px;
}
.inv-txtable > thead > tr > th {
  position: sticky; top: var(--inv-nav-h); z-index: 2;
  background: #f5f8fc !important; color: #62718a !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .055em !important;
  text-transform: uppercase; padding-top: 12px !important; padding-bottom: 12px !important;
  border-bottom: 1.5px solid var(--border, #e7ecf3) !important; white-space: nowrap;
}
.inv-txtable > tbody > tr { transition: background .12s ease; }
.inv-txtable > tbody > tr:nth-child(even) { background: var(--inv-row-alt) !important; }
.inv-txtable > tbody > tr:hover { background: var(--inv-row-hover) !important; }
.inv-txtable > tbody > tr > td {
  padding-top: 11px !important; padding-bottom: 11px !important;
  border-bottom: 1px solid #eef2f7 !important; vertical-align: middle !important; font-size: 13px !important;
}
.inv-txtable > thead > tr > th:nth-child(1),
.inv-txtable > tbody > tr > td:nth-child(1) { text-align: center !important; padding-left: 14px !important; padding-right: 6px !important; }
.inv-txtable > tbody > tr > td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--muted, #64748b) !important; white-space: nowrap; }
.inv-txtable > tbody > tr > td:nth-child(3) .truncate { font-weight: 500 !important; color: var(--text, #0f172a) !important; }
.inv-txtable > tbody > tr > td:nth-child(4) { color: var(--text-2, #334155) !important; overflow: hidden; }
.inv-txtable > tbody > tr > td:nth-child(4) > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-txtable > thead > tr > th:nth-child(5),
.inv-txtable > thead > tr > th:nth-child(6),
.inv-txtable > tbody > tr > td:nth-child(5),
.inv-txtable > tbody > tr > td:nth-child(6) {
  text-align: right !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap;
}
.inv-txtable > tbody > tr > td:nth-child(5) { color: var(--inv-income) !important; font-weight: 700 !important; }
.inv-txtable > tbody > tr > td:nth-child(6) { color: var(--inv-expense) !important; font-weight: 700 !important; }
.inv-txtable > tbody > tr > td:nth-child(5):empty::after,
.inv-txtable > tbody > tr > td:nth-child(6):empty::after { content: "—"; color: #cbd5e1; font-weight: 400; }
.inv-txtable > thead > tr > th:nth-child(7),
.inv-txtable > tbody > tr > td:nth-child(7) { text-align: center !important; }
.inv-txtable > tbody > tr > td:nth-child(7) > * {
  display: inline-block; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .04em;
  color: #5a6b82 !important; background: #eef2f7 !important; border-radius: 6px; padding: 3px 8px !important;
}
.inv-txtable > tbody > tr > td:nth-child(8) input { font-size: 12px !important; height: 30px !important; border-radius: 8px !important; }
.inv-txtable > thead > tr > th:nth-child(9),
.inv-txtable > tbody > tr > td:nth-child(9) { text-align: left !important; white-space: nowrap; }
.inv-txtable > tbody > tr > td:nth-child(9) button {
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.inv-txtable > tbody > tr > td:nth-child(9) button:hover { background: #eef4fc !important; color: var(--primary-dk, #1862b8) !important; }

/* "Only without invoice" toggle + filter */
.inv-txtable.inv-hide-withinvoice tbody tr.inv-has-invoice { display: none !important; }

.inv-noinv-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; margin-left: 2px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--text-2, #334155);
  background: #fff; border: 1px solid var(--border, #e7ecf3); border-radius: 11px;
  cursor: pointer; transition: all .14s ease;
}
.inv-noinv-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.inv-noinv-toggle:hover { border-color: var(--primary, #1f7ae0); color: var(--primary-dk, #1862b8); background: #f3f8ff; }
.inv-noinv-toggle .inv-noinv-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: #5a6b82; background: #eef2f7; border-radius: 999px;
}
.inv-noinv-toggle.is-on {
  color: #fff; background: linear-gradient(135deg, var(--primary, #1f7ae0), var(--primary-dk, #1862b8));
  border-color: transparent; box-shadow: 0 6px 14px -6px rgba(31,122,224,.6);
}
.inv-noinv-toggle.is-on .inv-noinv-count { color: #fff; background: rgba(255,255,255,.22); }

/* Injected brand-category badge */
.inv-cat-badge {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; margin-right: 8px;
  font-size: 11px; font-weight: 800; color: #fff; flex: 0 0 auto; vertical-align: middle;
  box-shadow: 0 1px 2px rgba(15,23,42,.18);
}