/* ════════════════════════════════════════════════════════════════════
 * Invoiso — Redesign layer v4 (2026-08) · COMPACT / DENSE PASS
 * Loads AFTER redesign-2026-06.css and overrides it.
 *
 * Goal: fit the whole working month on one screen.
 *   header 64→48px · KPI cards → one slim strip · toolbar buttons unified
 *   at 32px · tag cloud collapsed to one row · table rows 11→6px padding.
 *
 * Typography: Noto Sans Georgian (a real Georgian face, variable weights)
 * for text, JetBrains Mono for every number — money reads as a ledger,
 * digits line up, and it separates data from chrome at a glance.
 * ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  --inv-nav-h: 48px;

  /* modern-override.css pads <main> by calc(var(--topnav-h) + 18px) to clear
     the app's ORIGINAL top bar. That bar is moved off-screen by .inv-orig-bar
     and our #inv-hdr is sticky in normal flow, so nothing needs clearing —
     zeroing the variable at the source is cleaner than a specificity war. */
  --topnav-h: 0px;

  /* Deeper, cooler ink than the stock slate — more contrast on white,
     less of the washed-out "default bootstrap" look. */
  --inv-ink: #0d1526;
  --inv-ink-2: #33415a;
  --inv-ink-3: #6b7a91;
  --inv-line: #e4eaf2;
  --inv-line-soft: #eef2f7;

  --inv-income: #0f9b74;
  --inv-expense: #dc3f34;
  --inv-balance: #2563eb;
  --inv-accent: #0ea5a5;

  --inv-font: 'Noto Sans Georgian', system-ui, sans-serif;
  --inv-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Apply the Georgian face app-wide, but never to icon fonts. */
body, button, input, select, textarea, table, th, td,
#inv-hdr, .inv-tab, .inv-more-item {
  font-family: var(--inv-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────────
 * 1. HEADER — slimmer, tighter, with the "მეტი" dropdown
 * ──────────────────────────────────────────────────────────────────── */
#inv-hdr {
  height: var(--inv-nav-h);
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--inv-line);
  box-shadow: 0 1px 0 rgba(13, 21, 38, .015);
}
.inv-hdr-inner { gap: 10px; padding: 0 clamp(12px, 1.6vw, 22px); max-width: 1720px; }

.inv-hdr-logo { gap: 8px; }
.inv-hdr-mark { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 2px 7px -3px rgba(31,122,224,.55); }
.inv-hdr-mark svg { width: 16px; height: 16px; }
.inv-hdr-brand b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; color: var(--inv-ink); }
.inv-hdr-brand i { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Tabs sit left, right after the logo — no more stretched centring. */
.inv-hdr-nav { flex: 0 1 auto; gap: 0; }
.inv-hdr-nav > .inv-tab:first-child,
.inv-hdr-nav > .inv-tab:last-child { margin-left: 0; margin-right: 0; }
.inv-tab {
  padding: 0 11px; font-size: 13px; font-weight: 600; color: var(--inv-ink-3);
  border-bottom-width: 2px;
}
.inv-tab:hover { color: var(--inv-ink); }
.inv-tab.is-active { color: var(--inv-balance); border-bottom-color: var(--inv-balance); }

/* "მეტი" dropdown */
.inv-more { position: relative; flex: 0 0 auto; height: 100%; display: flex; align-items: stretch; }
.inv-more-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 10px;
  font-size: 13px; font-weight: 600; color: var(--inv-ink-3);
  background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .14s ease;
}
.inv-more-btn svg { width: 13px; height: 13px; transition: transform .18s ease; }
.inv-more-btn:hover { color: var(--inv-ink); }
.inv-more-btn.is-active { color: var(--inv-balance); border-bottom-color: var(--inv-balance); }
.inv-more.is-open .inv-more-btn { color: var(--inv-ink); }
.inv-more.is-open .inv-more-btn svg { transform: rotate(180deg); }

.inv-more-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 200;
  min-width: 208px; padding: 5px;
  background: #fff; border: 1px solid var(--inv-line); border-radius: 12px;
  box-shadow: 0 12px 34px -12px rgba(13, 21, 38, .28), 0 2px 6px rgba(13,21,38,.05);
  display: none; flex-direction: column; gap: 1px;
}
.inv-more.is-open .inv-more-menu { display: flex; animation: invMoreIn .14s ease-out; }
@keyframes invMoreIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.inv-more-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 11px; border: 0; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--inv-ink-2); background: transparent;
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.inv-more-item:hover { background: #f1f6fd; color: var(--inv-balance); }
.inv-more-item.is-active { background: #eef4ff; color: var(--inv-balance); font-weight: 700; }

/* Right cluster — everything one size smaller */
.inv-hdr-cluster { gap: 8px; margin-left: auto; }
.inv-search { height: 30px; width: 190px; border-radius: 9px; padding: 0 8px 0 10px; gap: 6px; }
.inv-search svg { width: 14px; height: 14px; }
.inv-search-input { font-size: 12.5px; }
.inv-search kbd { font-size: 10px; padding: 1px 5px; }

/* ✕ appears only once something is typed; ⌘K hint steps aside for it. */
.inv-search-clear {
  display: none; flex: 0 0 auto;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  font-size: 10px; line-height: 1; cursor: pointer;
  color: #64748b; background: #e2e8f0;
  transition: background .12s ease, color .12s ease;
}
.inv-search-clear:hover { background: #cbd5e1; color: #0f172a; }
.inv-search.has-text .inv-search-clear { display: grid; place-items: center; }
.inv-search.has-text kbd { display: none; }
.inv-bell { width: 30px; height: 30px; border-radius: 9px; }
.inv-bell svg { width: 15px; height: 15px; }
.inv-bell-dot { top: 6px; right: 7px; width: 6px; height: 6px; }
.inv-ava-circle { width: 28px; height: 28px; font-size: 12px; }
.inv-ava-meta b { font-size: 12px; }
.inv-ava-meta span { font-size: 10px; }

@media (max-width: 1180px) { .inv-search { width: 130px; } .inv-ava-meta { display: none; } }
@media (max-width: 860px)  { .inv-search { display: none; } .inv-hdr-brand { display: none; } }

/* ─────────────────────────────────────────────────────────────────────
 * 2. PAGE CHROME — reclaim the empty space above the content
 * ──────────────────────────────────────────────────────────────────── */
/* modern-override.css pads <main> by 110px to clear the OLD 64px+ header —
   with the 48px header that is ~100px of dead white space above every page. */
/* Match modern-override's own selector so specificity ties and we win on order. */
main, main.flex-1, .flex.h-screen > main {
  padding-top: 10px !important; padding-bottom: 24px !important;
}
main > .p-4, main > [class*="p-"] { padding-top: 8px !important; padding-bottom: 8px !important; }
.container, [class*="max-w-"] > .p-6, .p-6 { padding-top: 12px !important; }
.mb-8 { margin-bottom: 14px !important; }
.mb-6 { margin-bottom: 12px !important; }
.space-y-6 > * + * { margin-top: 12px !important; }

/* Month title row */
h1, .text-3xl, .text-2xl {
  font-size: 20px !important; font-weight: 800 !important;
  letter-spacing: -.02em !important; color: var(--inv-ink) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 3. KPI CARDS  →  one slim strip instead of three tall cards
 * ──────────────────────────────────────────────────────────────────── */
.grid.grid-cols-1.md\:grid-cols-3 { gap: 10px !important; }
.grid.grid-cols-1.md\:grid-cols-3 > div {
  border-radius: 12px !important;
  padding: 11px 14px !important;
  min-height: 0 !important;
  box-shadow: 0 1px 2px rgba(13,23,42,.04) !important;
  border-color: var(--inv-line) !important;
  display: flex !important; flex-direction: column; justify-content: center;
}
.grid.grid-cols-1.md\:grid-cols-3 > div:hover { transform: none; box-shadow: 0 1px 2px rgba(13,23,42,.06) !important; }
/* accent becomes a left rail — reads faster than a top line at this height */
.grid.grid-cols-1.md\:grid-cols-3 > div::after {
  left: 0; top: 0; height: 100%; width: 3px;
}
.grid.grid-cols-1.md\:grid-cols-3 > div > p:first-child {
  font-size: 11px !important; font-weight: 600 !important; margin: 0 0 1px !important;
  text-transform: uppercase; letter-spacing: .05em;
}
.grid.grid-cols-1.md\:grid-cols-3 > div > p:not(:first-child) {
  font-family: var(--inv-mono) !important;
  font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.02em !important;
}
/* the "View … Transactions" links inside the cards */
.grid.grid-cols-1.md\:grid-cols-3 > div a,
.grid.grid-cols-1.md\:grid-cols-3 > div button { font-size: 11.5px !important; }

/* ─────────────────────────────────────────────────────────────────────
 * 4. TOOLBAR — one button language, 32px tall, no more mixed pills
 * ──────────────────────────────────────────────────────────────────── */
/* min-height (38px, from modern-override) beats plain height — must be reset
   too, and nowrap stops these from wrapping onto a second line. */
.inv-noinv-toggle, .inv-af-btn, .inv-af-queue, .inv-tags-toggle {
  height: 32px !important; min-height: 32px !important;
  padding: 0 11px !important; border-radius: 9px !important;
  font-size: 12.5px !important; font-weight: 600 !important; gap: 6px !important;
  margin-left: 6px !important; white-space: nowrap !important;
}
.inv-noinv-toggle svg, .inv-af-btn svg, .inv-af-queue svg, .inv-tags-toggle svg { width: 14px !important; height: 14px !important; }
.inv-noinv-toggle .inv-noinv-count, .inv-af-qcount {
  min-width: 17px !important; height: 17px !important; font-size: 10px !important; padding: 0 5px !important;
}
.inv-af-btn { box-shadow: 0 3px 9px -5px rgba(124,58,237,.6) !important; }
.inv-noinv-toggle.is-on { box-shadow: 0 3px 9px -5px rgba(37,99,235,.6) !important; }

/* The app's own toolbar buttons (Group by Description / Manage Tags / …) */
.flex.flex-wrap.gap-2 > button, .flex.flex-wrap.gap-3 > button,
.flex.items-center.gap-2 > button, .flex.items-center.gap-3 > button {
  min-height: 32px !important; padding: 0 11px !important;
  font-size: 12.5px !important; border-radius: 9px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 5. TAG CLOUD — collapsed to a single row, expandable
 * ──────────────────────────────────────────────────────────────────── */
.inv-tagbar {
  position: relative;
  max-height: 38px; overflow: hidden;
  padding-right: 122px !important;   /* room for the toggle */
  transition: max-height .2s ease;
}
.inv-tagbar.is-open { max-height: 420px; overflow: auto; }
.inv-tagbar::after {          /* fade hint that more tags exist */
  content: ""; position: absolute; right: 118px; top: 0; width: 40px; height: 38px;
  background: linear-gradient(90deg, transparent, #fff 75%); pointer-events: none;
}
.inv-tagbar.is-open::after { display: none; }

.inv-tags-toggle {
  position: absolute !important; right: 6px; top: 3px; margin-left: 0 !important;
  display: inline-flex; align-items: center;
  color: var(--inv-ink-2); background: #fff;
  border: 1px solid var(--inv-line); cursor: pointer;
  white-space: nowrap; transition: all .14s ease;
}
.inv-tags-toggle:hover { border-color: var(--inv-balance); color: var(--inv-balance); background: #f5f9ff; }
.inv-tags-toggle svg { transition: transform .18s ease; }
.inv-tags-toggle.is-on svg { transform: rotate(180deg); }

/* chips a touch smaller so more fit per row */
button.px-3.py-1.text-sm.rounded-full,
span.px-3.py-1.text-sm.rounded-full {
  font-size: 11.5px !important; padding: 4px 10px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 6. TABLE — dense rows, monospaced money, quieter chrome
 * ──────────────────────────────────────────────────────────────────── */
.inv-txtable { min-width: 900px; }
.inv-txtable > thead > tr > th {
  padding-top: 8px !important; padding-bottom: 8px !important;
  font-size: 10px !important; letter-spacing: .06em !important;
  background: #f7fafd !important; color: #6c7c94 !important;
  border-bottom: 1px solid var(--inv-line) !important;
}
.inv-txtable > tbody > tr > td {
  padding-top: 6px !important; padding-bottom: 6px !important;
  font-size: 12.5px !important; border-bottom: 1px solid var(--inv-line-soft) !important;
}
.inv-txtable > tbody > tr:nth-child(even) { background: #fbfcfe !important; }
.inv-txtable > tbody > tr:hover { background: #eff6ff !important; }

/* date + both amount columns in the ledger face */
.inv-txtable > tbody > tr > td:nth-child(2),
.inv-txtable > tbody > tr > td:nth-child(5),
.inv-txtable > tbody > tr > td:nth-child(6) {
  font-family: var(--inv-mono) !important; font-size: 11.5px !important; letter-spacing: -.02em;
}
/* Money must never truncate. The stock 12px side padding left only ~71px of
   the ~95px cell — not enough for "GEL 26,710.20" — so trim the padding and
   drop a touch of size; the mono face keeps it legible. */
.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) {
  padding-left: 6px !important; padding-right: 8px !important;
}
.inv-txtable > tbody > tr > td:nth-child(5),
.inv-txtable > tbody > tr > td:nth-child(6) {
  font-weight: 600 !important; font-size: 11px !important;
  white-space: nowrap !important; overflow: visible !important;
}
.inv-txtable > tbody > tr > td:nth-child(5) > *,
.inv-txtable > tbody > tr > td:nth-child(6) > * {
  overflow: visible !important; text-overflow: clip !important;
}
.inv-txtable > tbody > tr > td:nth-child(3) .truncate { font-weight: 500 !important; }

/* currency badge — quieter */
.inv-txtable > tbody > tr > td:nth-child(7) > * {
  font-family: var(--inv-mono) !important;
  font-size: 9.5px !important; padding: 2px 6px !important; background: #f1f5f9 !important;
}

/* row action buttons: icon-sized, label hidden — the icons already say it */
.inv-txtable > tbody > tr > td.inv-c-actions button {
  width: 26px !important; height: 26px !important; border-radius: 7px !important;
  padding: 0 !important; font-size: 0 !important;   /* hides the text label */
}
.inv-txtable > tbody > tr > td.inv-c-actions button svg {
  width: 14px !important; height: 14px !important; font-size: 12px;
}
.inv-txtable > tbody > tr > td.inv-c-comment input { height: 26px !important; font-size: 11.5px !important; }
.inv-cat-badge { width: 20px !important; height: 20px !important; border-radius: 6px; margin-right: 6px; font-size: 10px; }

/* ─────────────────────────────────────────────────────────────────────
 * 7. FLOATING EXPORT BUTTON — was overlapping the last table rows
 * ──────────────────────────────────────────────────────────────────── */
.fixed.bottom-6.right-6, .fixed.bottom-4.right-4 {
  bottom: 14px !important; right: 14px !important;
}
.fixed.bottom-6.right-6 button, .fixed.bottom-4.right-4 button {
  height: 34px !important; font-size: 12.5px !important; padding: 0 14px !important; border-radius: 10px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 8. AUTO-FIND review modal — match the new density
 * ──────────────────────────────────────────────────────────────────── */
.inv-af-card { padding: 10px 12px; gap: 12px; border-color: var(--inv-line); }
.inv-af-amt { font-family: var(--inv-mono); }
.inv-af-ok, .inv-af-no { height: 28px; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════
 * Transaction table layout (v4h) — addressed BY COLUMN ROLE
 *
 * Measured problem: the actions cell needed 631px and the partner cell
 * 1040px inside ~110px columns, so controls spilled out of their columns.
 * Position-based (nth-child) rules were worse than useless on /all-months,
 * which inserts a "Folder" column and shifts everything after it — partner
 * there got the money styling and overflowed on all 2000 rows. The layer's
 * JS now stamps every cell with .inv-c-<role>, so these rules land on the
 * right column on every page.
 *
 * Nothing is removed: repeated controls are compacted to their icons (the
 * anchors already carry title tooltips) and long text is clipped with the
 * full value kept in a title attribute.
 * ════════════════════════════════════════════════════════════════════ */

/* — actions: icons only, wrap rather than overflow — */
.inv-txtable td.inv-c-actions { white-space: normal !important; }
.inv-txtable td.inv-c-actions > * {
  display: inline-flex !important;
  flex-wrap: wrap; align-items: center; gap: 3px; row-gap: 3px;
}
.inv-txtable .inv-pdf-group a.inv-pdf-dl span,
.inv-txtable .inv-pdf-group a.inv-pdf-view span { display: none !important; }
.inv-txtable .inv-pdf-group a.inv-pdf-dl,
.inv-txtable .inv-pdf-group a.inv-pdf-view {
  width: 26px !important; min-width: 26px !important; height: 26px !important;
  padding: 0 !important; justify-content: center !important; gap: 0 !important;
  flex: 0 0 auto;
}
.inv-txtable .inv-pdf-group { display: inline-flex !important; gap: 3px; flex: 0 0 auto; }
.inv-txtable td.inv-c-actions button,
.inv-txtable td.inv-c-actions a.p-1 { flex: 0 0 auto; }
/* "PDF ატვირთვა" is a long label in a narrow column — kept, shrunk to "+" */
.inv-txtable td.inv-c-actions .invoiso-row-pdf-upload {
  font-size: 0 !important; width: 26px !important; height: 26px !important;
  padding: 0 !important; justify-content: center !important;
}
.inv-txtable td.inv-c-actions .invoiso-row-pdf-upload::before {
  content: '+'; font-size: 15px; font-weight: 700; line-height: 1;
}

/* — comment: chips wrap inside the column — */
.inv-txtable td.inv-c-comment { white-space: normal !important; }
.inv-txtable td.inv-c-comment > * {
  display: block !important; white-space: normal !important; max-width: 100% !important;
}
.inv-txtable td.inv-c-comment .flex-wrap,
.inv-txtable td.inv-c-comment .flex {
  display: flex !important; flex-wrap: wrap !important; max-width: 100%;
}
.inv-txtable td.inv-c-comment .group { flex: 0 0 auto; max-width: 100%; }
.inv-txtable td.inv-c-comment .group > a {
  max-width: 74px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11px !important;
}

/* — partner: clip, never spill (full text in title=) — */
.inv-txtable td.inv-c-partner {
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.inv-txtable td.inv-c-partner > * {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; max-width: 100%; vertical-align: middle;
}
.inv-txtable td.inv-c-partner .inv-cat-badge { display: inline-flex !important; }

/* — money: never wrap, aligned for scanning — */
.inv-txtable td.inv-c-income, .inv-txtable td.inv-c-expense,
.inv-txtable th.inv-c-income, .inv-txtable th.inv-c-expense {
  white-space: nowrap !important; font-variant-numeric: tabular-nums;
  text-align: right !important;
}
.inv-txtable td.inv-c-income > *, .inv-txtable td.inv-c-expense > * {
  justify-content: flex-end;
}

/* — single-line columns — */
.inv-txtable td.inv-c-date,
.inv-txtable td.inv-c-currency,
.inv-txtable td.inv-c-folder { white-space: nowrap !important; }
.inv-txtable td.inv-c-folder {
  overflow: hidden !important; text-overflow: ellipsis !important;
}

/* — description: two readable lines instead of one clipped one — */
.inv-txtable td.inv-c-desc {
  white-space: normal !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.inv-txtable tbody td { vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════════
 * Actions / კომენტარი — two deliberate rows instead of a random wrap
 *
 * The actions cell already had four natural groups in the DOM (one
 * .inv-pdf-group per attached document, the app's row-action div, and the
 * upload button) but they wrapped wherever they happened to fit — 3 ragged
 * lines. A zero-height full-width ::before pushes everything after it onto
 * line 2, so the meaning is fixed: line 1 = the documents, line 2 = what you
 * DO with the row.
 *
 * In the comment column each attached document rendered as an EMPTY grey
 * pill: the link label collapses to 0px and its ✕ only appears on hover, so
 * there was nothing to read. The label is restored as a short "PDF" chip and
 * the ✕ is always faintly visible.
 * ════════════════════════════════════════════════════════════════════ */

.inv-txtable td.inv-c-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 5px;
}
.inv-txtable td.inv-c-actions::before {          /* the line break */
  content: ''; flex: 0 0 100%; height: 0; order: 2;
}
.inv-txtable td.inv-c-actions > .inv-pdf-group { order: 1; flex: 0 0 auto; }
.inv-txtable td.inv-c-actions > div,
.inv-txtable td.inv-c-actions > span:not(.inv-pdf-group) { order: 3; flex: 0 0 auto; }
.inv-txtable td.inv-c-actions > div.flex { margin: 0 !important; }

/* documents on line 1 read as one unit per file */
.inv-txtable td.inv-c-actions > .inv-pdf-group {
  background: #f1f5f9; border-radius: 8px; padding: 2px;
}

/* — comment column: readable document chips, stacked — */
.inv-txtable td.inv-c-comment > * {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.inv-txtable td.inv-c-comment .group {
  background: #eef2f7 !important;
  border-radius: 999px; padding: 0 2px 0 0;
}
/* the link's own label is "Download from …" and renders at 0px — replace it
   with a short, readable tag (the href and click target are untouched) */
.inv-txtable td.inv-c-comment .group > a {
  font-size: 0 !important;
  width: auto !important; min-width: 0 !important; height: 24px !important;
  max-width: none !important;
  padding: 0 4px 0 9px !important;
  display: inline-flex !important; align-items: center;
}
.inv-txtable td.inv-c-comment .group > a::after {
  content: 'PDF';
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #33415a;
}
/* ✕ was invisible until hover — keep it discoverable */
.inv-txtable td.inv-c-comment .group > button {
  opacity: .4 !important; width: 22px !important; height: 22px !important;
}
.inv-txtable td.inv-c-comment .group:hover > button { opacity: 1 !important; }

/* The chips row still computed to nowrap, so a third attached document would
   have run past the column instead of dropping to the next line. */
.inv-txtable td.inv-c-comment .flex-wrap {
  flex-wrap: wrap !important;
  flex-direction: row !important;
  width: 100%;
  gap: 3px !important;
}
/* keep a document chip narrow enough that two fit per line */
.inv-txtable td.inv-c-comment .group {
  height: 24px; align-items: center;
}
.inv-txtable td.inv-c-comment .group > a { padding: 0 2px 0 8px !important; }

/* modern-override.css pins `table tbody tr .flex.items-center.gap-2` to
   nowrap !important — specificity (0,3,3), which beats a (0,3,1) selector no
   matter that this file loads later. Match its shape and add to it so the
   chips row can actually wrap. */
.inv-txtable tbody tr td.inv-c-comment .flex.items-center.gap-2,
.inv-txtable tbody tr td.inv-c-comment .flex.flex-wrap {
  flex-wrap: wrap !important;
  flex-direction: row !important;
  width: 100%;
  gap: 3px !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Never break a label mid-word
 * Buttons carried white-space:normal, so on a narrower window they split
 * inside the word — "Mana / ge Tags", "PDF ინვოის / ები", "თარი / ღი".
 * A button that wraps to a second line is fine; a word cut in half is not.
 * ════════════════════════════════════════════════════════════════════ */
main button,
main a[role="button"],
.inv-noinv-toggle, .inv-af-btn, .inv-af-queue,
.inv-tab, .inv-more-btn, .inv-more-item {
  white-space: nowrap !important;
  word-break: keep-all !important;
}
/* the th itself is nowrap already — its inner wrappers were not */
.inv-txtable thead th,
.inv-txtable thead th * {
  white-space: nowrap !important;
  word-break: keep-all !important;
}
/* give the toolbar room to wrap as whole buttons instead of squeezing them */
.inv-txtable-toolbar, main .flex.flex-wrap.items-center.gap-2 { row-gap: 6px !important; }

/* The toolbar row ships as flex/nowrap, so its buttons overflowed the
   container edge and the last one was clipped. Let whole buttons wrap. */
.inv-toolbar {
  flex-wrap: wrap !important;
  row-gap: 8px !important;
  max-width: 100%;
}

/* The ZIP-export FAB is fixed at z-index 99999 and covered whatever row sat at
   the bottom-right — measured: a <td> was directly beneath it. Collapse it to
   an icon; it widens back to the full label on hover/focus. */
.inv-fab {
  width: 46px !important; min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  justify-content: center !important;
  opacity: .92;
  transition: width .18s ease, opacity .18s ease;
}
.inv-fab:hover, .inv-fab:focus-visible {
  width: 176px !important; opacity: 1;
  justify-content: center !important;
}
/* keep the label out of the collapsed state without removing it */
.inv-fab > *:not(svg) {
  opacity: 0; transition: opacity .14s ease;
  white-space: nowrap;
}
.inv-fab:hover > *:not(svg), .inv-fab:focus-visible > *:not(svg) { opacity: 1; }



/* ════════════════════════════════════════════════════════════════════
 * LABELLED CONTROLS (v4w)
 * Icon-only was compact but unreadable — you could not tell what a button
 * did. Every control now carries its word; when they no longer fit on one
 * line they wrap to the next INSIDE the cell, so the transaction's row
 * boundary still holds and nothing is clipped.
 * The app's own buttons ship as bare icons with no title at all, so the JS
 * layer identifies each by its SVG path and writes data-inv-label (Gmail,
 * Drive, რედაქტ., წაშლა…) which is rendered here.
 * ════════════════════════════════════════════════════════════════════ */

.inv-txtable td.inv-c-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 6px !important;
}

/* my download / open links keep their own words */
.inv-txtable tbody td.inv-c-actions .inv-pdf-group a.inv-pdf-dl,
.inv-txtable tbody td.inv-c-actions .inv-pdf-group a.inv-pdf-view {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  height: 24px !important;
  padding: 0 8px !important;
  flex: 0 0 auto !important;
  gap: 4px !important;
  font-size: 11px !important; font-weight: 600;
  border-radius: 7px;
}
.inv-txtable td.inv-c-actions .inv-pdf-group a.inv-pdf-dl span,
.inv-txtable td.inv-c-actions .inv-pdf-group a.inv-pdf-view span {
  display: inline !important; font-size: 11px !important;
}
.inv-txtable .inv-pdf-group {
  display: inline-flex !important; gap: 3px !important;
  padding: 0 !important; background: none !important; flex: 0 0 auto;
}

/* the app's icon buttons — icon + the label the JS worked out */
.inv-txtable td.inv-c-actions > div.flex {
  display: inline-flex !important; flex-wrap: wrap !important;
  gap: 4px !important; margin: 0 !important; flex: 0 1 auto;
}
.inv-txtable td.inv-c-actions > div.flex > *,
.inv-txtable td.inv-c-actions > div.flex button,
.inv-txtable td.inv-c-actions > div.flex a {
  width: auto !important; min-width: 0 !important; height: 24px !important;
  padding: 0 7px !important; gap: 3px !important;
  display: inline-flex !important; align-items: center;
  font-size: 11px !important; font-weight: 600;
  border-radius: 7px; background: #f1f5f9;
  flex: 0 0 auto;
}
.inv-txtable td.inv-c-actions [data-inv-label]::after {
  content: attr(data-inv-label);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.inv-txtable td.inv-c-actions svg { width: 12px !important; height: 12px !important; flex: 0 0 auto; }

/* upload keeps its full label */
.inv-txtable td.inv-c-actions .invoiso-row-pdf-upload {
  width: auto !important; height: 24px !important;
  padding: 0 8px !important; font-size: 11px !important; font-weight: 600;
  border-radius: 7px; flex: 0 0 auto;
}
.inv-txtable td.inv-c-actions .invoiso-row-pdf-upload::before { content: none !important; }

/* — comment column: same treatment — */
.inv-txtable td.inv-c-comment { padding: 6px !important; }
.inv-txtable td.inv-c-comment > * {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  align-items: center; gap: 4px;
}
.inv-txtable td.inv-c-comment .group { height: 24px; border-radius: 7px; padding: 0 2px 0 0; }
.inv-txtable td.inv-c-comment .group > a {
  font-size: 0 !important; height: 24px !important;
  padding: 0 4px 0 8px !important; width: auto !important; max-width: none !important;
  display: inline-flex !important; align-items: center; gap: 4px;
}
.inv-txtable td.inv-c-comment .group > a::after {
  content: 'ინვოისი'; font-size: 11px; font-weight: 600; color: #33415a;
}
.inv-txtable td.inv-c-comment .group > button {
  opacity: .5 !important; width: 18px !important; height: 18px !important;
}
.inv-txtable td.inv-c-comment .group:hover > button { opacity: 1 !important; }
.inv-txtable td.inv-c-comment > * > button {
  font-size: 11px !important; font-weight: 600;
  width: auto !important; height: 24px !important; padding: 0 8px !important;
  border-radius: 7px; flex: 0 0 auto;
}

/* rows may now be two lines tall — keep the boundary crisp */
.inv-txtable tbody tr { border-bottom: 1px solid var(--inv-line-soft, #eef2f7); }
.inv-txtable tbody td { vertical-align: middle; }

/* the wrapper <a> around an icon button must not add its own padding/box —
   it would double the visual chip */
.inv-txtable td.inv-c-actions > div.flex > a:has(button) {
  padding: 0 !important; background: none !important; height: auto !important;
}

/* A td turned into a flex container stops contributing its content height to
   the row: the controls wrapped to five lines while the row stayed 68px, so
   580 of them hung BELOW their own row band. Keep the cell a normal block —
   its children stay inline-flex chips and wrap as inline content, which the
   row height does account for. */
.inv-txtable td.inv-c-actions,
.inv-txtable td.inv-c-comment {
  display: table-cell !important;
  white-space: normal !important;
  line-height: 1.9 !important;
}
.inv-txtable td.inv-c-actions > *,
.inv-txtable td.inv-c-comment > * {
  display: inline-flex !important;
  vertical-align: middle;
  flex-wrap: wrap !important;
  margin: 1px 2px 1px 0 !important;
}
.inv-txtable td.inv-c-actions > div.flex { margin-left: 0 !important; }

/* The comment wrapper as inline-flex measured short, leaving "Add Link" 18px
   below the row on every two-document row. inline-block sizes to its wrapped
   content, so the row band contains it. */
.inv-txtable td.inv-c-comment > * {
  display: inline-block !important;
  width: 100%;
  margin: 0 !important;
}
.inv-txtable td.inv-c-comment > * > * { margin-top: 0 !important; }
.inv-txtable td.inv-c-comment .flex,
.inv-txtable td.inv-c-comment .flex-wrap {
  display: inline-flex !important; flex-wrap: wrap !important;
  vertical-align: middle; margin: 1px 0 !important;
}
.inv-txtable td.inv-c-comment > * > button {
  display: inline-flex !important; vertical-align: middle; margin: 1px 0 0 2px !important;
}

/* Third time against the same wall: modern-override.css pins the comment
   wrapper with `main table tbody td:nth-last-child(2) > .space-y-2 {
   display:inline-flex !important }` — (0,2,4), which beat every
   `.inv-txtable td.inv-c-comment > *` (0,2,1) attempt, so the wrapper stayed
   32px tall and "Add Link" hung below the row. Naming the element chain and
   the wrapper class gives (0,3,4). */
.inv-txtable tbody tr td.inv-c-comment > div.space-y-2,
.inv-txtable tbody tr td.inv-c-comment > div {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.inv-txtable tbody tr td.inv-c-comment > div.space-y-2 > * {
  margin-top: 0 !important;
}

/* "Add Link" sat inline right after the chips row with no whitespace between
   them, so there was no wrap opportunity and it ran 84px past the column.
   Block-level puts it on its own line under the chips. */
.inv-txtable tbody tr td.inv-c-comment > div > button {
  display: flex !important;
  width: fit-content !important;
  margin: 3px 0 0 0 !important;
}