/* MySmartInvoice 2 – area B: contacts + articles (tokens only, see css/lumen.css). */
.ct-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ct-bar .ct-search { flex: 1 1 240px; max-width: 360px; margin-left: auto; }
@media (max-width: 700px) { .ct-bar .ct-search { max-width: none; margin-left: 0; } }

/* list rows with avatar */
.ct-list { display: flex; flex-direction: column; }
.ct-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0; }
.ct-row:last-child { border-bottom: 0; }
.ct-row:hover { background: var(--surface-2); text-decoration: none; }
.ct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-main span { color: var(--text-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ct-side .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .ct-row { padding: 12px 14px; gap: 12px; } }

/* avatar: initials on a soft tile (companies square-ish, persons round) */
.ct-av { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 700 14px/1 var(--font);
  background: var(--accent-50); color: var(--accent-text); }
.ct-av.person { border-radius: 50%; background: var(--surface-3); color: var(--text-2); }
.ct-av.lg { width: 48px; height: 48px; font-size: 17px; }
.ct-av.sm { width: 32px; height: 32px; font-size: 12px; border-radius: 50%; }
.ct-title { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.ct-title > span:last-child { overflow-wrap: anywhere; }

/* contact page */
.ct-line { display: flex; gap: 8px 22px; flex-wrap: wrap; margin: -8px 0 20px; color: var(--text-2); font-size: 15px; }
.ct-line a, .ct-line > span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.ct-line a:hover { color: var(--accent-text); }
.ct-line .ico { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.ct-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.ct-figs:empty { display: none; }
.ct-tabs { margin-bottom: 18px; }
.ct-tabs .ct-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-3); color: var(--text-3); font-size: 12px; }
.ct-tabs button.active .ct-n { background: var(--accent-50); color: var(--accent-text); }
.ct-below { display: flex; justify-content: flex-end; margin-top: 14px; }
.ct-pad { padding: 4px 20px 20px; }
.ct-narrow { max-width: 720px; }

/* create / edit form */
.ct-kind { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; width: 100%; }
.ct-kind label { cursor: pointer; }
.ct-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ct-kind span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: var(--radius-btn); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font-weight: 600; }
.ct-kind input:checked + span { border-color: var(--accent); background: var(--accent-50); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent); }
.ct-kind input:focus-visible + span { box-shadow: var(--focus-ring); }
.ct-roles { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.ct-roles-l { color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
.ct-form .text-warning { color: var(--warning); }

/* notes + persons */
.ct-note-form { display: flex; gap: 10px; align-items: flex-start; }
.ct-note-form textarea { min-height: 48px; }
@media (max-width: 700px) { .ct-note-form { flex-direction: column; align-items: stretch; } }
.ct-notes { list-style: none; margin: 0; padding: 0 20px 8px; }
.ct-notes li { padding: 14px 0; border-top: 1px solid var(--border); }
.ct-notes p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-persons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ct-persons li { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* articles */
.ar-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
@media (max-width: 700px) { .ar-price-row { grid-template-columns: minmax(0, 1fr); } }
.ar-margin { color: var(--text-3); font-size: 14px; }
@media (max-width: 700px) { .ct-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* USt-IdNr with check button, Skonto in one line, check result */
.ct-vat { display: flex; gap: 8px; align-items: center; }
.ct-vat input { flex: 1; min-width: 0; }
.ct-vat .btn { flex: none; }
.ct-skonto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--text-2); font-size: var(--fs-sm); }
.ct-skonto input { width: 76px; flex: none; }
.ct-form .hint.ok { color: var(--success); }
.ct-form .hint.bad { color: var(--danger); }
.ct-av.addr { background: var(--surface-3); color: var(--text-2); }
.ct-av.addr .ico { width: 16px; height: 16px; }
.page-top .actions { flex-wrap: wrap; }

/* CSV import */
.ci-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface-2); transition: border-color var(--dur-fast), background var(--dur-fast); }
.ci-drop:hover, .ci-drop.over { border-color: var(--accent); background: var(--accent-50); }
.ci-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ci-drop:focus-within { box-shadow: var(--focus-ring); }
.ci-drop-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-text); }
.ci-drop-ico .ico { width: 22px; height: 22px; }
.ci-drop b { font-size: var(--fs-md); }
.ci-drop .muted { font-size: var(--fs-sm); }
.ci-err { color: var(--danger); margin: 14px 0 0; }
.ci-help { margin-top: 20px; color: var(--text-2); font-size: var(--fs-sm); }
.ci-help ul { margin: 6px 0 12px; padding-left: 20px; columns: 2 260px; column-gap: 28px; }
.ci-help li { margin: 2px 0; break-inside: avoid; }
.ci-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ci-sum > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--text-2); }
.ci-sum .ci-n { font: 700 26px/1.1 var(--font-display, var(--font)); color: var(--text); font-variant-numeric: tabular-nums; }
.ci-sum .bad .ci-n { color: var(--danger); }
.ci-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 14px; }
.ci-file .ico { width: 16px; height: 16px; }
.ci-col { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); }
.ci-rows { max-height: 60vh; overflow: auto; }
.ci-row { cursor: default; }
.ci-row:hover { background: none; }

/* articles: free texts */
.ar-free { margin-top: 22px; }
.ar-free-sub { margin: 0; padding: 0 20px 8px; font-size: var(--fs-sm); }
.ar-free-row { cursor: default; }
.ar-free-row .r-side { flex-direction: row; align-items: center; gap: 12px; }
@media (max-width: 700px) {
  .ar-free-row { grid-template-columns: minmax(0, 1fr); }
  .ar-free-row .r-side { width: 100%; justify-content: space-between; }
  .ci-sum .ci-n { font-size: 22px; }
}
.ci-info { color: var(--text-2); font-size: var(--fs-sm); }
@media (max-width: 480px) { .ar-list .r-side .xs { display: none; } }

/* ---- review round 1 (helper C): address search, number lock, sub tabs, bank cards, history, article price preview ---- */
.geo-combo { position: relative; width: 100%; }
.geo-list .geo-row { flex-wrap: nowrap; gap: 10px; padding: 9px 12px; }
.geo-row > .ico { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.geo-foot { padding: 6px 12px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--border); }
.num-lock { display: flex; gap: 6px; align-items: center; }
.num-lock input { flex: 1; min-width: 0; }
.num-lock input[readonly] { background: var(--surface-2); color: var(--text-2); cursor: default; }
.num-lock-btn { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); }
.num-lock.is-open .num-lock-btn { color: var(--accent-text); border-color: var(--accent-100); background: var(--accent-50); }
.ct-subtabs { margin: 0 0 16px; }
.ct-panel[hidden] { display: none !important; }
.ct-banks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ct-banks { grid-template-columns: minmax(0, 1fr); } }
.ct-bank { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 6px; background: var(--surface); }
.ct-bank h4 { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.ct-bank h4 .ico { width: 16px; height: 16px; color: var(--text-3); }
.ct-addr-main { margin-bottom: 4px; }
.ct-addr-row { cursor: pointer; }
.ct-def { font-size: 12px; color: var(--text-3); font-weight: 500; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist-i { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.hist-i:first-child { padding-top: 2px; }
.hist-i:last-child { border-bottom: 0; }
.hist-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.hist-created .hist-av, .hist-payroll_created .hist-av { background: var(--accent-50); color: var(--accent-text); }
.hist-txt { min-width: 0; flex: 1; }
.hist-h { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: var(--fs-sm); }
.hist-h .muted { font-size: 12.5px; }
.hist-ch { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-sm); color: var(--text-2); display: grid; gap: 3px; }
.hist-ch li { overflow-wrap: anywhere; }
.hist-f { color: var(--text-3); }
.hist-ch .hi-f { color: var(--text-3); }
.hi-from { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent); color: var(--text-3); }
.hi-to { font-weight: 600; color: var(--text); }
.hi-arrow { color: var(--text-3); padding: 0 2px; }
.hist-more { margin-top: 8px; }
.hist-wrap { margin-top: 18px; }
.sticky-actions + .hist-wrap { margin-top: 0; }
.ar-calc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ar-calc:empty { display: none; }
.ar-calc b { color: var(--text); font-weight: 600; }
.ar-calc .ar-calc-main { color: var(--text); }
.ar-type-chip { margin-left: 6px; vertical-align: 1px; }
.cb-send { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-width: 460px; }
.cb-send select { height: 36px; }
.cust-box .cb-txt .cb-send span { font-size: 12.5px; }
.cb-send-link { margin-top: 6px; }
.cust-box .cb-txt .cb-meta .ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.ct-form > .sticky-actions[hidden] { display: none !important; }