/* KTM Voyage CRM — invoices module stylesheet [INV].
   Only invoice-specific rules; tokens/layout/components come from base.css,
   the A4 document styling from print.css. Brand: gold #ccb52d (--gold),
   dark navy sidebar, Lato/Playfair. Usable down to 390px wide. */

/* ---------- Company tabs (Fase 1: KTM active, others Fase-2 badge) ---------- */
.comp-tabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.comp-tab{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 18px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font:700 13.5px/1 "Lato",sans-serif;cursor:pointer}
.comp-tab.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.comp-tab.on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.comp-tab.dis{opacity:.55;cursor:not-allowed}
.comp-tab .fase2{background:var(--gold);color:var(--dark);border-radius:999px;
  padding:2px 8px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- List: filters row ---------- */
.inv-filters{align-items:center}
.inv-filters .tabs{margin:0}
.inv-filters input[type="search"]{min-width:220px;flex:1}

/* ---------- List: table ---------- */
.inv-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.inv-table th.sortable:hover{color:var(--gold-2, var(--gold))}
.inv-table th.sorted{color:var(--dark)}
.inv-table .sort-ind{font-size:10px;color:var(--gold-2, var(--gold))}
.inv-num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.inv-amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.inv-amt.neg{color:var(--bad)}

/* Type chips: A = gold, F = navy, CN = red */
.inv-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;
  font-weight:700;letter-spacing:.03em;white-space:nowrap}
.inv-chip-a{background:rgba(204,181,45,.16);color:#7a6a10;border:1px solid rgba(204,181,45,.45)}
.inv-chip-f{background:rgba(41,33,9,.08);color:var(--dark);border:1px solid rgba(41,33,9,.25)}
.inv-chip-cn{background:rgba(190,49,49,.1);color:var(--bad);border:1px solid rgba(190,49,49,.35)}

/* ---------- Create/edit modal: invoice lines ---------- */
.inv-lines-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:16px 0 6px;flex-wrap:wrap}
.inv-lines-head label{font-weight:700}
.inv-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.inv-line{display:grid;grid-template-columns:minmax(140px,2.2fr) 74px minmax(120px,1fr) minmax(90px,auto) 40px;
  gap:8px;align-items:center}
.inv-line input{min-height:40px}
.inv-line-total{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-weight:700;color:var(--muted)}
.inv-l-del{min-width:40px;min-height:40px;padding:0;color:var(--bad)}

/* Totals block (modal + detail) */
.inv-totals{margin:14px 0 6px;margin-left:auto;max-width:340px;border-top:1px solid var(--line);padding-top:10px}
.inv-totrow{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:13.5px}
.inv-totrow b{font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-totrow.grand{border-top:2px solid var(--dark);margin-top:6px;padding-top:9px;font-size:16px}
.inv-totrow.grand b{color:var(--dark)}
.inv-totals-detail{max-width:360px;padding-right:12px}

/* ---------- Final-invoice wizard ---------- */
.inv-w-list{display:flex;flex-direction:column;gap:6px;margin:12px 0;max-height:300px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.inv-w-row{display:grid;grid-template-columns:24px minmax(90px,auto) 1fr 1fr auto auto;gap:10px;
  align-items:center;padding:9px 10px;border-radius:8px;cursor:pointer;min-height:44px}
.inv-w-row:hover{background:rgba(204,181,45,.08)}
.inv-w-row input[type="checkbox"]{width:20px;height:20px;accent-color:var(--gold)}
.inv-w-amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.inv-w-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;
  padding:12px 14px;background:rgba(204,181,45,.1);border:1px solid rgba(204,181,45,.4);
  border-radius:var(--radius)}
.inv-w-sum b{margin-left:auto;font-size:15px;white-space:nowrap}
.inv-w-warn{color:var(--bad);font-weight:700}

/* ---------- Detail page ---------- */
.inv-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  margin:12px 0 14px;flex-wrap:wrap}
.inv-head-type{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.inv-num-big{font-family:"Playfair Display",Georgia,serif;font-size:30px;color:var(--dark);
  margin:0 0 4px;font-variant-numeric:tabular-nums}
.inv-head-r{text-align:right}
.inv-amount{font-size:26px;font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.inv-amount.neg{color:var(--bad)}
.inv-meta{margin-top:8px}
.inv-meta-row{display:flex;justify-content:flex-end;gap:12px;font-size:12.5px;padding:2px 0}
.inv-meta-row span{color:var(--muted)}
.inv-meta-row b{font-variant-numeric:tabular-nums}
.inv-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.inv-actions .btn{min-height:42px}
.inv-rel-h{margin:22px 0 8px;font-family:"Playfair Display",Georgia,serif;color:var(--dark)}

/* ---------- Responsive (usable at 390px) ---------- */
@media (max-width:760px){
  .inv-head-r{text-align:left}
  .inv-meta-row{justify-content:flex-start}
  .inv-w-row{grid-template-columns:24px 1fr auto;grid-auto-rows:auto}
  .inv-w-row span:nth-of-type(2){display:none}
}
@media (max-width:480px){
  .inv-filters input[type="search"]{min-width:0;width:100%}
  .inv-filters .count{margin-left:0;width:100%}
  .inv-line{grid-template-columns:1fr 40px;grid-template-areas:
    "label label" "qty del" "unit unit" "total total"}
  .inv-line input[data-input="l-label"]{grid-area:label}
  .inv-line input[data-input="l-qty"]{grid-area:qty}
  .inv-line .money-wrap{grid-area:unit}
  .inv-line .inv-line-total{grid-area:total}
  .inv-line .inv-l-del{grid-area:del}
  .inv-totals{max-width:none}
  .inv-num-big{font-size:24px}
  .inv-amount{font-size:22px}
  .comp-tab{padding:8px 12px;font-size:12.5px}
}

/* ---------- P2 polish: long operator names never overflow ---------- */
.inv-head>div{min-width:0;overflow-wrap:anywhere}
.inv-totrow span{overflow-wrap:anywhere}

/* ==================================================================
   QoL wave [QIN]: payments · aging · MKD preview · history · totals
   ================================================================== */

/* ---------- View toggle (list ↔ aging) ---------- */
.inv-viewtabs{margin:0 0 12px}
.inv-viewtabs .tabs{margin:0}

/* ---------- List: outstanding-balance column ---------- */
.inv-bal{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.inv-bal.ok{color:var(--good,#3f7d3f)}
.inv-bal.part{color:#a4670f}
.inv-bal-na{color:var(--muted)}
.inv-bal-note{display:block;font-size:10.5px;color:#a4670f;letter-spacing:.03em;text-transform:uppercase}

/* ---------- Totals footer for the filtered set ---------- */
.inv-foot{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;padding:12px 16px;
  background:rgba(41,33,9,.04);border:1px solid var(--line);border-radius:var(--radius)}
.inv-ft-count{font-size:12.5px;color:var(--muted);font-weight:700}
.inv-ft-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.inv-ft-cur{background:var(--dark);color:#fff;border-radius:6px;padding:2px 9px;
  font:700 11.5px/1.6 "Lato",sans-serif;letter-spacing:.05em}
.inv-ft-cell{display:inline-flex;flex-direction:column;min-width:88px}
.inv-ft-cell small{color:var(--muted);font-size:11px}
.inv-ft-cell b{font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-ft-cell:last-child b{color:#a4670f}

/* ---------- Aging view ---------- */
.inv-ag-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 10px}
.inv-ag-head .subnote{margin:0;flex:1;min-width:240px}
.inv-ag-asof{font-size:12px;color:var(--muted);white-space:nowrap}
.inv-ag-table td,.inv-ag-table th{white-space:nowrap}
.inv-ag-table b{font-variant-numeric:tabular-nums}
.inv-ag-zero{color:var(--muted-2,var(--muted))}
.inv-ag-warn b{color:#a4670f}
.inv-ag-bad b{color:var(--bad)}
.inv-ag-sum{font-weight:700;font-variant-numeric:tabular-nums}
.inv-ag-totalrow td{border-top:2px solid var(--dark);background:rgba(204,181,45,.08);font-weight:700}
.inv-ag-hint{color:var(--muted);font-size:12.5px;margin:8px 2px}
.inv-ag-card{padding:10px}

/* ---------- Payments card (detail) ---------- */
.inv-pay-card{margin:16px 0 6px;padding:16px 18px}
.inv-pay-h{margin:0 0 10px;font-family:"Playfair Display",Georgia,serif;color:var(--dark)}
.inv-pay-card .hint{color:var(--muted);font-size:13px;margin:2px 0 4px}
.inv-pay-table td{vertical-align:middle}
.inv-pay-closing{display:block;font-size:11px;color:var(--muted);font-style:italic}
.inv-pay-delcell{width:44px;text-align:right}
.inv-pay-del{min-width:36px;min-height:36px;padding:0;color:var(--bad)}
/* balance rows inside the totals block */
.inv-totrow.pay b{color:var(--good,#3f7d3f)}
.inv-totrow.balance{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px;font-size:15px}
.inv-totrow.balance b{color:#a4670f}
.inv-totrow.balance.ok b{color:var(--good,#3f7d3f)}
.inv-totrow.balance.bad b{color:var(--bad)}

/* Payment modal */
.inv-pay-sum{margin:6px 0 14px;padding:10px 14px;background:rgba(204,181,45,.08);
  border:1px solid rgba(204,181,45,.35);border-radius:var(--radius)}
.inv-pay-sum .inv-totrow{font-size:13px}
.inv-pay-fullbtn{margin-top:6px}

/* ---------- MKD preview ---------- */
.callout-gold{background:rgba(204,181,45,.12);border:1px solid rgba(204,181,45,.5);color:#6b5f22}
.inv-mkd-btn.on{background:var(--dark);color:var(--gold);border-color:var(--dark)}

/* ---------- Locked-into-final link ---------- */
.inv-final-link{margin-left:8px;font-weight:700;white-space:nowrap}

/* ---------- Document history ---------- */
.inv-hist{margin:20px 0 8px}
.inv-hist-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);overflow:hidden}
.inv-hist-item{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;
  border-bottom:1px solid var(--line)}
.inv-hist-item:last-child{border-bottom:none}
.inv-hist-ic{width:24px;text-align:center;flex:none}
.inv-hist-what{flex:1;min-width:0;overflow-wrap:anywhere}
.inv-hist-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.inv-hist+.note{margin-top:12px}

/* ---------- Credit-nota wizard: original-invoice summary ---------- */
.inv-cn-orig{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);
  border-radius:var(--radius);background:rgba(41,33,9,.03)}
.inv-cn-orig small{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
.inv-cn-orig-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.inv-cn-orig-row .inv-amt{margin-left:auto}

/* ---------- Responsive for the QoL blocks ---------- */
@media (max-width:760px){
  .inv-ft-row{gap:12px}
  .inv-ft-cell{min-width:72px}
  .inv-hist-item{flex-wrap:wrap}
  .inv-hist-meta{width:100%;padding-left:34px;white-space:normal}
}
@media (max-width:480px){
  .inv-pay-card{padding:12px}
  .inv-cn-orig-row .inv-amt{margin-left:0;width:100%}
}