html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* CustomsAI UI */
.k-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 1rem}
.k-head h1{font-size:22px;font-weight:500;margin:0}
.k-muted{color:#6b6b6b}
/* Круг 21д-28: „што е: …“ под описот на редот во „Споредба по увоз“ */
.k-lo-what{font-size:12px;margin-top:2px}
/* 13.10.2026: „Ставки" — секој фактурен ред; многу колони → хоризонтален лизгач наместо збивање. */
.k-lo-scroll{overflow-x:auto;max-width:100%}
.k-lo-scroll .k-lo-grid{min-width:1370px}
.k-lo-radios .ui-radio{white-space:normal;font-size:12px;line-height:1.3}
.k-lo-same{font-size:12px;margin-top:2px}
.k-lo-rule{font-size:12px}
.k-lo-pref-yes{color:var(--ui-success,#2e7d32);font-weight:600}
.k-lo-pref-no{color:var(--ui-danger,#c62828);font-weight:600}
.k-lo-pref-none{color:var(--ui-text-muted,#777)}
.k-btn{border:1px solid #d0d0d0;background:#fff;border-radius:8px;padding:7px 14px;font-size:14px;cursor:pointer;text-decoration:none;color:#222;display:inline-block}
.k-btn:hover{background:#f3f3f3}
.k-primary{border-color:#1b6ec2;color:#1b6ec2}
.k-link{border:none;background:none;color:#b32121;cursor:pointer;font-size:14px}
.k-pill{display:inline-block;font-size:12px;padding:3px 10px;border-radius:8px;background:#eef1f5}
.k-info{background:#e6f1fb;color:#0c447c}
.k-grid{width:100%;border-collapse:collapse;font-size:13px}
.k-grid th{text-align:left;color:#6b6b6b;font-weight:500;padding:8px 10px;border-bottom:1px solid #e2e2e2}
.k-grid td{padding:6px 10px;border-bottom:1px solid #efefef}
.k-grid input{font-size:13px;padding:4px 6px;border:1px solid #d6d6d6;border-radius:5px}
.k-right{text-align:right}
.k-card{background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:1rem 1.25rem;margin:0 0 1.25rem}
.k-card h3{font-size:16px;font-weight:500;margin:0 0 12px}
.k-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 18px}
.k-form label{display:flex;flex-direction:column;font-size:12px;color:#6b6b6b;gap:4px}
.k-form input{font-size:14px;padding:6px 8px;border:1px solid #d0d0d0;border-radius:6px}
.k-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 1.25rem}
.k-metric{background:#f6f6f4;border-radius:8px;padding:0.85rem 1rem}
.k-lbl{font-size:12px;color:#6b6b6b}
.k-num{font-size:22px;font-weight:500;margin-top:2px}
.k-w-wide{width:100%;min-width:160px}
.k-w-code{width:96px}
.k-w-num{width:100px;text-align:right}
.k-w-sm{width:60px;text-align:right}
.k-search{width:100%;font-size:14px;padding:8px 10px;border:1px solid #d0d0d0;border-radius:8px}
.k-tariff{list-style:none;margin:10px 0 0;padding:0;max-height:260px;overflow:auto;border:1px solid #eee;border-radius:8px}
.k-tariff li{padding:7px 10px;border-bottom:1px solid #f0f0f0;font-size:13px}
.k-tariff code{color:#0c447c;margin-right:8px}
.k-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.k-chips{display:flex;flex-wrap:wrap;gap:8px}
.k-chip{font-size:12px;padding:4px 10px;border-radius:8px;background:#f6f6f4}
.k-chk{font-size:13px;margin:6px 0;padding-left:18px;position:relative}
.k-chk.ok::before{content:"✓";color:#3b6d11;position:absolute;left:0}
.k-chk.warn::before{content:"!";color:#854f0b;position:absolute;left:0}
.k-chk.err::before{content:"✕";color:#a32d2d;position:absolute;left:0}
.k-chk.err{color:#a32d2d}
.k-actions{display:flex;gap:8px;margin:0 0 1.25rem;flex-wrap:wrap}
.k-toast{background:#eaf3de;border:1px solid #c0dd97;border-radius:8px;padding:10px 14px;font-size:14px;margin:0 0 1rem}
.k-xml{background:#1e1e1e;color:#e6e6e6;padding:12px;border-radius:8px;overflow:auto;max-height:360px;font-size:12px;line-height:1.5}
.k-textarea{width:100%;box-sizing:border-box;font-family:Consolas,monospace;font-size:13px;padding:10px;border:1px solid #d0d0d0;border-radius:8px;resize:vertical}
.k-conf{font-size:11px;padding:2px 8px;border-radius:8px;background:#f0f0f0}
.k-conf.ok{background:#eaf3de;color:#3b6d11}
.k-conf.warn{background:#faeeda;color:#854f0b}
/* Settings form fields */
.k-fld{display:flex;flex-direction:column;font-size:12px;color:#6b6b6b;gap:4px;margin:0 0 12px}
.k-in{font-size:14px;padding:7px 9px;border:1px solid #d0d0d0;border-radius:6px;color:#222}
.k-chkfld{display:flex;align-items:center;gap:8px;font-size:14px;color:#222;margin:8px 0}
.k-saved{color:#3b6d11;font-size:14px;align-self:center}
/* Sidebar user + logout */
.nav-user{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.12)}
.nav-user-name{display:block;color:#d7d7d7;font-size:13px;margin-bottom:8px}
.nav-logout{border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:6px;padding:5px 12px;font-size:13px;cursor:pointer}
.nav-logout:hover{background:rgba(255,255,255,.12)}
/* Login page */
.k-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f3f4f6}
.k-login-card{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:34px 32px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.k-login-brand{font-size:24px;font-weight:600;color:#1b6ec2}
.k-login-label{display:block;font-size:12px;color:#6b6b6b;margin:14px 0 4px}
.k-login-input{width:100%;box-sizing:border-box;font-size:15px;padding:9px 11px;border:1px solid #d0d0d0;border-radius:8px}
.k-login-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#444;margin:14px 0}
.k-login-btn{width:100%;background:#1b6ec2;color:#fff;border:none;border-radius:8px;padding:11px;font-size:15px;cursor:pointer;margin-top:6px}
.k-login-btn:hover{background:#1861ac}
/* Најава со Microsoft 365: втор, потивок избор под локалната најава. */
.k-login-or{text-align:center;color:#6c757d;font-size:13px;margin:14px 0 4px}
.k-login-ms{display:block;text-align:center;text-decoration:none;background:#2f2f2f}
.k-login-ms:hover{background:#1f1f1f}
.k-login-err{background:#fbe9e9;border:1px solid #f0c0c0;color:#a32d2d;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}
/* ── Подесувања (круг 17): картички + под-навигација ───────────────────── */
.k-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:0 0 1.25rem}
.k-tile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:14px 16px;text-decoration:none;color:#222}
.k-tile:hover{border-color:#1b6ec2;box-shadow:0 2px 10px rgba(27,110,194,.08)}
.k-tile svg{width:18px;height:18px;fill:#1b6ec2}
.k-tile-title{font-size:15px;font-weight:500}
.k-tile-text{font-size:12px;color:#6b6b6b;line-height:1.45}
/* Круг 21д-24: табовите се единствената втора навигација — се превиткуваат (без хоризонтален скрол на 1024 px),
три групи со мал разделник, активниот таб јасно означен. */
.k-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 1rem;border-bottom:1px solid #e6e6e6;padding-bottom:6px;max-width:100%}
.k-tabs-sep{display:inline-block;width:1px;height:18px;background:#d4d4d0;margin:0 6px}
.k-tab{font-size:13px;padding:5px 11px;border-radius:8px;text-decoration:none;color:#4a4a4a;white-space:nowrap}
.k-tab:hover{background:#f1f1ef}
.k-tab-on{background:#e6f1fb;color:#0c447c;font-weight:600;box-shadow:inset 0 -2px 0 #1b6ec2}
/* Круг 21д-24: „Помош" (KasperHelp) — склопена по подразбирање, ненаметлива. */
.k-help{margin:0 0 1rem;border-color:#e6e6e6}
.k-help .k-help-header{font-size:13px;color:#4a4a4a;padding:.35rem .75rem}
.k-help .k-help-body{font-size:13px;line-height:1.55;color:#3d3d3a}
.k-help .k-help-body p{margin:0 0 .5rem}
.k-help .k-help-body h4{font-size:13px;font-weight:600;margin:.6rem 0 .25rem}
/* Круг 20ѓ: тука стоеја стиловите на горната лента за пребарување (.k-topbar,
.k-topsearch) и на страницата /search (.k-searchbar, .k-hits, .k-hit, .k-facets,
.k-pageno, .k-searchhint). Со вадењето на глобалниот пребарувач ниту еден од нив
веќе нема сопственик — избришани се. `.k-two`, `.k-tab` и `.k-search` ОСТАНУВААТ:
нив ги користат подесувањата и прецедентите. */
/* ── Круг 20а: густиот „канцелариски" распоред на формата од KASPER ──────────
Ова е ИСКЛУЧИВО распоред на контејнери (решетка од полиња), не стил на контроли —
самите контроли се UiBlazor и остануваат недопрени (директива #1 на Ангел).
Целта е формата да изгледа како во Access: полиња едно до друго, ситен натпис
одозгора, без празнина на картички. */
.k-kasper-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:0 0 8px}
.k-kasper-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-kasper-label{font-size:11px;color:#6a6a6a;line-height:1.2;min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── Круг 20б: писмо по поле и боење на состојбата ───────────────────────────
Ангел: „задолжително поле што не е пополнето = ЦРВЕНО; ако не си сигурен за
импортот = ЖОЛТО". Бојата стои на ОБВИВКАТА на полето (наш контејнер), не на
самата контрола — контролите остануваат UiBlazor и недопрени. */
.k-kasper-badge{font-size:10px;color:#8a8a8a;border:1px solid #d8d8d8;border-radius:3px;padding:0 3px;margin-inline-start:4px}
.k-kasper-req{color:#c62828;margin-inline-start:3px}
.k-kasper-field.k-red > :last-child{outline:2px solid #c62828;outline-offset:1px;border-radius:3px}
.k-kasper-field.k-red .k-kasper-label{color:#c62828;font-weight:600}
.k-kasper-field.k-yellow > :last-child{outline:2px solid #e0a800;outline-offset:1px;border-radius:3px}
.k-kasper-field.k-yellow .k-kasper-label{color:#8a6d00;font-weight:600}
.k-kasper-note{font-size:11px;color:#8a8a8a}
.k-kasper-section{margin:0 0 6px;font-size:13px;font-weight:600;color:#333}
/* ── Листа на декларации (Components/Pages/Declarations.razor) ─────────────────
Круг 20в. Овие правила ПОРАНО стоеја во Declarations.razor.css со `::deep`, но
Blazor го компајлира `::deep .k-decl-grid …` во `[b-xxxxx] .k-decl-grid …`, а
атрибутот `b-xxxxx` го добиваат само елементите напишани во таа .razor датотека.
UiGrid е компонента — немаше таков предок, па НИТУ ЕДНО правило не се применуваше:
табелата остана на `table-layout:auto` и се рашири на 16183 px при прозорец од
1600 px, така што Ангел гледаше само две колони, а другите беа десно надвор од
екранот. Затоа стиловите се тука — глобални, без скоуп. */
.k-decl-grid .ui-grid-table {
table-layout: fixed;
width: 100%;
}
/* Круг 20ѓ, ставка 3, Ангел: „зголеми ги буквите за 1 до 2 точки". 12 → 13 px, а редот
расте сразмерно со висината на редот (24px line-height + 2×1px padding + рамка ≈ 26 px
наспроти досегашните ~23). Заглавието го дели истото правило, па и тоа порасна. */
.k-decl-grid .ui-grid-cell,
.k-decl-grid .ui-grid-header-cell,
.k-decl-grid .ui-grid-filter-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1px 6px;
font-size: 13px;
line-height: 24px;
}
.k-decl-grid .ui-grid-row {
cursor: pointer;
}
/* ── круг 20г → 20ѓ → 20ж ─────────────────────────────────────────────────────
Круг 20г ја смали табелата на 75 % / 1000 px. Круг 20ѓ, Ангел: „можеш да го
прошириш малце гридот" → 85 % / 1150 px. Круг 20ж, Ангел (по сликата): „прошири
го гридот за 20 %" → 100 % од содржинската зона со таван 1380 px (= 1150 × 1,2).
Ширините по колона остануваат на ЕДНО место (процентите во Declarations.razor:
9+9+18+15+9+11+4+10+15 = 100); тука е само колку зема целата табела.
Зошто 100 % а не 102 %: процентот и таванот се две различни граници и само едната
сече на дадена ширина. Измерено во прелистувач: на 1920 px содржинската зона е
1614 px — таму сече ТАВАНОТ, па 1150 → 1380 px е точно +20 %. На 1280 px зоната е
974 px, а 85 % од неа беше 828 px; тука сече ПРОЦЕНТОТ, и 828 × 1,2 = 993 px е
ПОШИРОКО од самата зона. Затоа процентот оди на 100 % (= 974 px, +17,6 %, колку
што воопшто има место) — повеќе од тоа значи хоризонтално скролање, а тоа е токму
она од што круг 20в ја спаси страницата.
На 1380 px процентите даваат Предмет 124 · Датум 124 · Коминтент 248 · Испраќач
207 · Реф. бр. 124 · Вредност 152 · Ст. 55 · Состојба 138 · МРН 207. На 974 px:
88 · 88 · 175 · 146 · 88 · 107 · 39 · 97 · 146 — сите 9 колони видливи, без
хоризонтално скролање и на двете. Буквите (13 px) и висината на редот не се
допираат — тие се одмерени во круг 20ѓ и остануваат исти. */
.k-decl-grid {
width: 100%;
max-width: 1380px;
min-width: 0;
/* Библиотеката му дава `overflow:auto` на коренот. Тоа прави скрол-контекст во
кој `position:sticky` на заглавието никогаш не се активира (коренот нема
висина, па не скролира). Табелата тука е потесна од зоната, па скролот е
непотребен — со `visible` заглавието се лепи за САМАТА СТРАНИЦА. */
overflow: visible;
}
/* Лепливо заглавие при скролање на страницата. `border-collapse` ги отсекува
рамките на sticky ќелии во Chrome, затоа линијата е inset box-shadow. */
.k-decl-grid .ui-grid-header-cell {
position: sticky;
top: 0;
z-index: 2;
border-bottom: 0;
box-shadow: inset 0 -2px 0 var(--ui-color-border, #d5d9e0);
}
/* Филтерскиот ред: полето го зема целото место на колоната, збиено како редот. */
.k-decl-grid .ui-grid-filter-input {
box-sizing: border-box;
width: 100%;
min-width: 0;
height: 20px;
padding: 1px 4px;
font-size: 11px;
}
/* Значката за состојба не смее да го крева редот. */
.k-decl-grid .ui-badge {
font-size: 10px;
padding: 0 5px;
line-height: 16px;
}
/* Прекинувачот за густина стои над табелата, ситен. */
.k-decl-grid .ui-grid-density-toolbar {
padding: 2px 4px;
}
.k-decl-grid .ui-grid-density-btn {
font-size: 11px;
padding: 1px 6px;
}
.k-decl-cur {
color: var(--ui-color-disabled, #777);
font-size: 11px;
margin-left: 2px;
}
/* Филтерската лента се преломува наместо да ја рашири страницата (круг 20в).
Круг 20е, Ангел: „Меѓу година и коминтент треба да има празно место." Стандардниот
`gap` на `.ui-toolbar` е 8 px — таман толку што рабовите на две соседни полиња се
читаат како еден блок. 12 px ги раздвојува, а сè уште собира сè во ЕДЕН ред и на
1280 px (збир на фиксните ширини 760 px + 4 × 12 px + копчето, во зона од ~1030 px).
Растојанието стои ТУКА, а не во библиотеката: 8 px е нејзиниот доследен стандард за
секој тулбар кај секој потрошувач, а ова е барање на оваа страница.
Круг 20ж, Ангел (по сликата): „раздели ги мениата" — 12 px сè уште ги читаше како
еден блок. 24 px. Ова е ЧИСТО решение во app.css зашто `.ui-toolbar` во UiBlazor
раздвојува со `gap` на самиот flex-контејнер (ui-blazor.css: `.ui-toolbar { display:
flex; gap: 8px }` и `.ui-toolbar--md { gap: 8px }`), а НЕ со margin на ставките — па
доволно е овде да се пребрише `column-gap`. Специфичноста е иста (една класа), но
app.css се вчитува ПО ui-blazor.css (види App.razor), па подоцнежното правило победува.
Ако библиотеката некогаш премине на margin по ставка, ова место ќе престане да важи и
ќе треба `.k-decl-toolbar > * + * { margin-inline-start: … }` — затоа E2E мери
ВИСТИНСКИ bounding box меѓу соседите, не computed `gap`.
Собира ли сè уште во ЕДЕН ред: фиксните ширини се 140 + 220 + 160 + 240 = 760 px,
„Исчисти" ~78 px, четири празнини по 24 px = 96, подлогата на лентата 2 × 6 px →
~946 px во содржинска зона од 974 px на 1280 px прозорец. Таман. */
.k-decl-toolbar {
flex-wrap: wrap;
column-gap: 24px;
row-gap: 8px;
}
/* ── круг 20ѓ, ставка 1 ───────────────────────────────────────────────────────
Ангел: „направи место меѓу горното мени и гридот". Дотогаш филтер-лентата и
табелата се допираа, па окото ги читаше како едно тело и не се знаеше каде
завршува филтерот, а каде почнува резултатот. Растојанието е ДВЕ: над насловот
(страницата почнуваше залепена за врвот, откако горната лента за пребарување
замина) и под филтер-лентата. `.k-head` веќе носи 1rem под насловот. */
.k-decl-page {
padding-top: 1.25rem;
}
/* Круг 20ж, барање 3, Ангел: филтер-лентата се протегаше преку ЦЕЛАТА страница, а
гридот не — двете тела не почнуваа од иста линија и сликата изгледаше неуредно.
Сега картичката со филтрите ги носи ИСТИТЕ две граници како `.k-decl-grid`
(100 % / 1380 px), па левите рабови и ширините се поклопуваат.
Зошто картичката останува без сопствена рамка и подлога: `UiCard` дава рамка +
`.ui-card__body { padding:16px }`, а `UiToolBar` внатре носи СВОЈА рамка и подлога.
Со двете, лентата почнуваше 17 px десно од гридот (рамка + подлога) и беше потесна
за 34 px — рабовите НЕ можат да се поклопат додека има внатрешна подлога, а двете
рамки една во друга беа и визуелно двоен оквир. Затоа надворешниот оквир е снемен:
картичката е само носач на растојанието под лентата, а видливото тело е самата лента.
`overflow: visible` е тука зашто `.ui-card` има `overflow: hidden` — со него паѓачката
листа на филтрите би се отсекувала штом картичката повеќе не е висока колку страницата.
Круг 20ж-2 — ЗОШТО 2.25rem, А НЕ 1.25rem. Кога во круг 20ж ѝ се снема подлогата на
картичката (`.ui-card__body { padding: 0 }`), заедно со неа замина и долните 16 px што ги
даваше таа подлога: празнината меѓу лентата и табелата падна од ~36 px на ~20 px, а Ангел
во круг 20ѓ ИЗРЕЧНО побара „направи место меѓу горното мени и гридот". Затоа целото
растојание сега го носи ЕДНА мерка — margin-bottom = 2.25rem (36 px) — наместо збир од
подлога плус margin. Мерката ја чува E2E тестот
`There_is_air_above_the_heading_and_between_the_filters_and_the_grid` (≥ 32 px). */
.k-decl-filters {
width: 100%;
max-width: 1380px;
margin-bottom: 2.25rem;
border: 0;
background: transparent;
border-radius: 0;
overflow: visible;
}
.k-decl-filters .ui-card__body {
padding: 0;
}
/* Круг 21д-16: додека кругот не е жив, гридот е `inert` — пејџерот изгледа онеспособено. */
.k-decl-grid-host[inert] .ui-grid-pager {
opacity: .55;
}
/* ── Стандарден изглед на СЕКОЈ грид во апликацијата (круг 20г, задача 5) ──────
Ангел: „провери дали истото важи и за другите гридови". Изгледот (зебра-редови,
збиеност) доаѓа од самата библиотека — Appearance=Striped + Density=Compact на
секој . Тука е само она што библиотеката не може да го знае: дека
збирот на фиксните px ширини по колона (кај деталите до 1410 px) е ПОШИРОК од
содржинската зона при 1280 px прозорец. Со `table-layout:fixed; width:100%`
прелистувачот ги смалува пропорционално, па ниту еден грид не бара хоризонтално
скролање, а долгиот текст завршува со „…". */
.k-grid-fit {
max-width: 100%;
}
.k-grid-fit .ui-grid-table {
table-layout: fixed;
width: 100%;
}
.k-grid-fit .ui-grid-cell,
.k-grid-fit .ui-grid-header-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Ќелиите со копчиња („Уреди", „Отстрани") не смеат да бидат отсечени. */
.k-grid-fit .ui-grid-cell:has(.ui-toolbar),
.k-grid-fit .ui-grid-cell:has(button),
.k-grid-fit .ui-grid-cell:has(.ui-dropdownlist) {
overflow: visible;
text-overflow: clip;
}
/* ── Круг 21д-1: РЕГИСТАР, РАБОТНИ ЛИСТИ, КАРТИЧКА „РЕГИСТАР"/„LUCA" ─────────────
Регистарот ги дели класите на „Декларации" (k-decl-grid, k-decl-filters, k-decl-toolbar):
истата фиксна табела во процентни колони, лепливо заглавие, збиени редови. Тука се само
разликите. */
.k-reg-page {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
/* Врската „папка" (UiButton Variant=Link → ) не смее да го крева редот. */
.k-reg-grid a.ui-button {
padding: 0;
min-height: 0;
height: auto;
line-height: inherit;
font-size: 12px;
border: 0;
}
/* Пагинг (13.10.2026): „Избриши" (празен предмет) во листата „Предмети" — збиено, не го крева редот и не се сече
со „…" (ќелиите на k-decl-grid се nowrap + ellipsis). */
.k-cases-grid .ui-grid-cell:has(.k-cases-delete) {
overflow: visible;
text-overflow: clip;
}
.k-cases-grid .k-cases-delete .ui-btn {
min-height: 0;
height: 22px;
padding: 0 8px;
line-height: 20px;
font-size: 12px;
}
.k-reg-mapping {
flex-wrap: wrap;
gap: 8px 16px;
}
.k-reg-import-summary,
.k-reg-import-result {
align-items: center;
gap: 8px;
margin: 8px 0;
}
.k-registry-facts {
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 8px;
}
.k-registry-fact {
font-size: 13px;
}
.k-registry-fact .k-kasper-label {
display: inline-block;
min-width: 110px;
color: var(--ui-color-disabled, #666);
}
.k-luca-candidates .ui-badge,
.k-worklists .ui-badge {
font-size: 10px;
padding: 0 5px;
line-height: 16px;
}
/* ── Поправки по круг 21д-1 ─────────────────────────────────────────────── */
/* (а) „дупликат на реф NNN/ГГГГ" — друг наш предмет го носи истиот KASPER реф. */
.k-dup-ref { color: #9a5b00; font-weight: 600; }
/* MRN на картичката: обичен фонт и боја (не ситен розов на Bootstrap). */
.k-registry-card code { font-size: inherit; color: inherit; background: transparent; padding: 0; }
/* ── Круг 21д-2: „Подготви за Luca", „Лист за внес", „Преглед" ─────────────── */
.k-prep-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 18px; margin-bottom:10px; }
.k-prep-grid .k-registry-fact { display:flex; flex-direction:column; gap:1px; }
.k-prep-value { overflow-wrap:anywhere; }
.k-prep-edit { margin-top:6px; }
.k-prep-totals { display:flex; flex-wrap:wrap; gap:6px 28px; align-items:baseline; margin:10px 0 6px; }
.k-prep-totals strong { font-size:1.05rem; }
.k-prep-lines-grid .ui-numerictextbox, .k-prep-lines-grid input { min-width:0; }
.k-dash-head { align-items:flex-end; }
.k-dash-tiles { margin-top:12px; }
.k-dash-tile .ui-chart, .k-dash-tile svg { max-width:100%; height:auto; }
.k-dash-big { font-size:2.4rem; font-weight:600; line-height:1.1; margin:6px 0 4px; }
.k-dash-unit { font-size:1rem; font-weight:400; color:#6b6b6b; }
.k-dash-kpi { margin-bottom:6px; }
.k-dash-cleared .ui-button { margin-top:12px; }
/* Круг 21д-10: една категорија (фаза / доверба) — реченица наместо пита од 100 %. */
.k-dash-single { margin:10px 0 4px; }
.k-dash-single-text { font-size:1.35rem; font-weight:600; line-height:1.3; margin-bottom:4px; }
/* Круг 21д-13: „Преглед" со виџети — наслов + мени ⋮ во заглавието; менито излегува од плочката (не се сече). */
.k-dash-hint { margin-top:6px; font-size:12.5px; }
.k-dash-tiles > .ui-tile-layout-item { overflow:visible; }
.k-w .ui-tile-layout-item-header { gap:6px; padding:6px 8px 6px 12px; }
.k-w-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-w-menu { flex:0 0 auto; }
.k-w-menu .ui-dropdownbutton__toggle { min-width:0; padding:0 9px; font-size:18px; line-height:1; }
.k-w-menu .ui-dropdownbutton__menu { left:auto; right:0; min-width:180px; font-weight:400; }
.k-w-body { min-width:0; }
.k-w-caption { font-size:12.5px; }
.k-w-unknown { font-size:12px; margin-top:6px; overflow-wrap:anywhere; }
.k-w-level { font-weight:600; color:#9a5b00; margin-bottom:2px; }
.k-w-level-warn { color:#9a5b00; }
.k-w-level-alert { color:#b42318; }
.k-w .k-dash-to-worklist { margin-top:12px; }
.k-w-dialog .k-kasper-row { flex-wrap:wrap; }
.k-w-type-desc { margin:2px 0 10px; }
.k-sheet { max-width:1100px; }
.k-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.k-sheet h1 { font-size:20px; font-weight:600; margin:0; }
.k-sheet h2 { font-size:15px; font-weight:600; margin:16px 0 6px; }
.k-sheet-fields { display:grid; grid-template-columns:1fr; border:1px solid #c9ced6; border-radius:4px; }
.k-sheet-field { display:grid; grid-template-columns:32px 140px 1fr; gap:8px; padding:6px 10px; border-top:1px solid #e3e6ea; }
.k-sheet-field:first-child { border-top:none; }
.k-sheet-no { color:#6b6b6b; }
.k-sheet-name { font-weight:600; font-family:Consolas, monospace; }
.k-sheet-value { overflow-wrap:anywhere; }
.k-sheet-extra { margin:6px 0 0; }
.k-sheet-totals { display:flex; flex-wrap:wrap; gap:4px 28px; margin:8px 0; }
.k-sheet-sign { display:flex; flex-wrap:wrap; gap:8px 40px; margin-top:28px; }
/* ── Круг 21д-3: пакет со повеќе декларации, сет правила, дозволи ─────────── */
.k-prep-paysown-field { display:flex; flex-direction:column; gap:2px; align-self:flex-end; max-width:520px; }
.k-prep-paysown-why { font-size:12px; }
.k-prep-ruleset { margin-bottom:6px; }
.k-prep-part-of, .k-prep-duplicate { margin-bottom:10px; }
.k-sheet-package { margin-top:4px; }
.k-in-package .ui-button { margin-left:6px; }
.k-billing-semantics { margin:4px 0 10px 18px; padding:0; }
.k-billing-semantics li { margin-bottom:4px; }
.k-billing-fact { margin-left:4px; }
@media print {
.sidebar, .top-row, nav, .k-no-print, #blazor-error-ui, #components-reconnect-modal { display:none !important; }
.page, main, article, .content { margin:0 !important; padding:0 !important; width:100% !important; }
body { background:#fff !important; }
.k-sheet { max-width:none; font-size:11pt; }
.k-sheet .ui-grid { border:1px solid #999; }
.k-sheet-field { break-inside:avoid; }
}
/* ── Круг 21д-5: „Подесувања → Клиенти" (UiBlazor), „Отфрли го предметот", листот за внес ── */
.k-client-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px 18px; }
.k-client-checks { align-items:center; gap:8px 28px; margin:14px 0 6px; }
.k-client-checks .ui-checkbox, .k-client-checks label { display:inline-flex; flex-direction:row; align-items:center; gap:8px; font-size:14px; color:#222; }
.k-client-form { margin-top:12px; }
.k-discard-why { font-size:12px; margin:-6px 0 10px; }
.k-sheet-stale { margin:0 0 10px; }
/* Круг 21д-11: „Проект предмет" / „Фактура" (Luca) — заглавието во колони (не долга листа), врските, фактурите. */
.k-luca-facts { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:6px 28px; margin-bottom:8px; }
.k-luca-facts .k-registry-fact { display:flex; gap:8px; align-items:baseline; min-width:0; }
.k-luca-facts .k-registry-fact .k-kasper-label { min-width:150px; flex:none; }
.k-luca-facts .k-registry-fact span:last-child { overflow-wrap:anywhere; }
.k-luca-link { display:inline-flex; gap:6px; align-items:baseline; margin-right:16px; }
.k-luca-invoice { margin:10px 0 18px; }
.k-luca-invoice-head { align-items:baseline; gap:6px 18px; margin-bottom:6px; }
.k-luca-sums { gap:6px 28px; align-items:baseline; margin:8px 0; font-size:13px; }
.k-decl-case .k-luca-link { margin-right:12px; }
/* Круг 21д-11б: Luca по MRN се бара по рендерот — мал лоадер ВО секцијата; искрениот текст за врските. */
.k-decl-case-luca-loading { display:inline-flex; gap:6px; align-items:center; }
.k-luca-links-how { margin-top:6px; font-size:12px; }
/* Круг 21д-11: линковите (реф, ПР, наш предмет) во редовите со факти — во висина на текстот, без поместување на редот. */
.k-registry-fact a[href] { padding:0 2px; min-height:0; height:auto; line-height:inherit; vertical-align:baseline; }
/* Круг 21д-14: делови од качен PDF — „автоматски“ под видот (не преку колоната), картичката за готова ЕЦД. */
.k-kind-auto-row { margin-top:2px; line-height:1; }
.k-doc-pages { color:#5f6b7a; white-space:nowrap; }
.k-ready { margin-top:10px; padding:8px 10px; border-left:3px solid #2f7d4f; background:#f3f8f5; }
.k-ready .k-kasper-note { font-size:12px; color:#33403a; margin:2px 0 6px; }
/* Круг 21д-15: AI модели — исходот од „Тест“ се прекршува во ќелијата; колоните по модел на предметот една до друга. */
.k-ai-probe { white-space:normal; overflow-wrap:anywhere; font-size:12px; margin-top:4px; }
.k-ai-probe.ok { color:#1b6e2a; } .k-ai-probe.warn { color:#9a5b00; }
/* 13.10.2026 „AI клучеви": endpoint, моделите, состојбата и пораката под копчињата се прекршуваат во ќелијата (не се сечат). */
.k-grid-fit .k-aikey-endpoint, .k-grid-fit .k-aikey-models, .k-grid-fit .k-aikey-message { white-space:normal; overflow-wrap:anywhere; font-size:12px; margin-top:2px; }
.k-grid-fit .k-aikey-state { white-space:normal; text-align:left; line-height:1.3; }
.k-aikey-message.ok { color:#1b6e2a; } .k-aikey-message.warn { color:#9a2a00; }
/* 24.10.2026: „Бази: KASPER и Luca" — профили, порака по ред, детали од пробата, доиндексирање. */
.k-grid-fit .k-extdb-target, .k-grid-fit .k-extdb-login, .k-grid-fit .k-extdb-probe-msg, .k-grid-fit .k-extdb-message { white-space:normal; overflow-wrap:anywhere; font-size:12px; margin-top:2px; }
.k-extdb-message.ok { color:#1b6e2a; } .k-extdb-message.warn { color:#9a2a00; }
.k-extdb-active .ui-badge, .k-extdb-name + .ui-badge { margin-left:6px; }
.k-extdb-confirm-text { white-space:pre-wrap; }
/* 27.10.2026: лозинката само во датотека на серверот — состојбата по профил и објаснувањето за двата клуча. */
.k-extdb-pass.ok { color:#1b6e2a; } .k-extdb-pass.warn, .k-extdb-pass.legacy { color:#9a2a00; font-weight:600; }
.k-grid-fit .k-extdb-writes-server { white-space:normal; overflow-wrap:anywhere; font-size:12px; margin-top:2px; color:#9a2a00; }
.k-extdb-passfile-help p { margin:4px 0; } .k-extdb-create-cmd { background:#f3f4f6; padding:6px 8px; border-radius:4px; overflow-wrap:anywhere; }
.k-reindex-summary { margin-left:6px; }
.k-ai-role { margin-right:4px; }
.k-models-choice { margin-top:12px; }
.k-models-columns { display:flex; flex-wrap:wrap; gap:10px; }
.k-models-columns > .k-models-column { flex:1 1 220px; max-width:360px; }
.k-models-invalid { opacity:.7; }
.k-models-match { color:#1b6e2a; font-weight:600; } .k-models-miss { color:#9a2a00; }
.k-case-models h4 { font-size:15px; margin:12px 0 6px; }
.k-models-score, .k-ai-providers { font-size:13px; }
/* Круг 21д-15б: „тарифа непотврдена" — жолт блок за избор, обележан кога доаѓа од дијалогот пред запис. */
.k-models-disagree { background:#fff8e1; border-left:4px solid #e0a800; border-radius:6px; padding:6px 10px; }
.k-models-focus { outline:2px solid #e0a800; outline-offset:2px; }
.k-models-why { margin:0 0 6px; }
.k-models-live { margin-top:10px; }
.k-ai-env-key { margin-top:8px; }
/* Круг 21д-15в: „малку токени за тарифирање" — „Максимум токени" е горна граница. */
.k-ai-tokens-warn { color:#9a5b00; font-size:12px; margin-top:4px; white-space:normal; }
/* Круг 21д-16: „Максимум токени" = буџет за излез (вклучително reasoning). */
.k-ai-tokens-help { font-size:12px; margin-top:4px; white-space:normal; }
/* Круг 21д-18: името на моделот („prebuilt-invoice") не се сече — се прекршува во две линии (цело и во title). */
.k-grid-fit .k-ai-model-id { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.k-grid-fit .ui-grid-cell:has(.k-ai-model-id) { white-space:normal; text-overflow:clip; }
.k-ai-comparisons-title { font-size:14px; margin:12px 0 6px; }
.k-grid-fit .k-ai-comparison-note { white-space:normal; overflow-wrap:anywhere; font-size:12px; }
.k-grid-fit .ui-grid-cell:has(.k-ai-comparison-note) { white-space:normal; }
.k-models-progress { margin:4px 0; }
.k-models-saved { color:#1b6e2a; }
.k-models-help{font-size:12px;margin:6px 0 0 18px;padding:0}
/* 27.10.2026 (Ангел): блоковите што се склопуваат (Флагови, Наименувања, Напредно, Историја…) — одделени со простор,
насловот поголем и задебелен, за да се гледа каде почнува секој блок. */
.ui-expansionpanel { margin-top: 1rem; }
.ui-expansionpanel__header { padding: .7rem 1rem; }
.ui-expansionpanel__title { font-size: 1.05rem; font-weight: 700; }
/* 27.10.2026 (Ангел): бројачите во „Ставки" — поголеми и се филтри; избраниот е полн, другите со рамка. */
.k-lo-filters { align-items:center; gap:10px 12px; }
.k-lo-filters .k-lo-filter { font-size:1rem; font-weight:600; padding:.35rem .9rem; border-radius:999px; }
.k-lo-filters .k-lo-filter--on { box-shadow:0 0 0 3px rgba(0,0,0,.12); }
.k-lo-filters .k-lo-total { font-size:1rem; color:var(--ui-color-text-muted, #6c757d); }
.k-lo-filters .k-lo-filter-reset { margin-left:4px; }
.k-lo-message-inline { color:#1e7e34; font-size:.95rem; max-width:48ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 27.10.2026: кога е вклучен филтер, другите бројачи се побледи; преференцијалот во „Наименувања". */
.k-lo-filters:has(.k-lo-filter--on) .k-lo-filter:not(.k-lo-filter--on) { opacity:.45; }
.k-item-pref-yes { color:#1e7e34; font-weight:600; }
.k-item-pref-no { color:#6c757d; }
/* 27.10.2026 (Ангел: „зошто го кратиш?"): во „Ставки" описот од фактурата и „што е: …" не се сечат — се прелеваат во нов ред. */
.k-lo-grid .ui-grid-cell:has(.k-lo-desc) { white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; }
.k-lo-grid .k-lo-what { white-space:normal; line-height:1.3; }
/* 27.10.2026 (Ангел): насловите на колоните во „Ставки" смеат да бидат во два реда (потесни колони). */
.k-lo-grid .ui-grid-header-cell { white-space:normal; overflow:hidden; text-overflow:clip; line-height:1.2; vertical-align:bottom; hyphens:manual; }
/* 27.10.2026: промена на тарифата со клик на бројот. */
.k-lo-change { padding:0; border:0; }
.k-lo-change .k-lo-state { cursor:pointer; }
.k-lo-editing { display:flex; align-items:center; gap:6px; font-size:.85rem; margin-bottom:2px; }
/* 27.10.2026: „KASPER: …" ред под описот од фактурата. */
.k-lo-grid .k-lo-kasper-line { white-space:normal; font-size:12px; color:#0b5394; margin-top:2px; line-height:1.3; }
/* 27.10.2026: „✕" отстранува ред (не се царини), „↺" го враќа; отстранетиот опис е прецртан. */
.k-lo-exclude, .k-lo-restore { padding:0 4px; font-weight:700; }
.k-lo-exclude { color:#b02a37; }
.k-lo-grid .k-lo-excluded { text-decoration:line-through; color:#6c757d; }
/* 27.10.2026: исклучен прецедент (сомнително спарување / друга база) во листата на тарифни прецеденти. */
.k-prec-excluded { color:#9a5b00; font-size:12px; margin-top:2px; white-space:normal; }
.k-prec-check-card .k-kasper-row { flex-wrap:wrap; gap:8px; }
/* 27.10.2026: 🚚 под „✕" — превоз/трошок; вклучено = полно, исклучено = бледо. */
.k-lo-freight { padding:0 4px; opacity:.35; display:block; }
.k-lo-freight--on { opacity:1; background:#fff3cd; border-radius:4px; }
/* 28.10.2026: „Наименувања" — денарите ситно под фактурната вредност; белегот ⚠ од збирната табела во „Ставки". */
.k-item-den { font-size:11px; line-height:1.2; }
.k-lo-origin-hint, .k-lo-pref-hint { white-space:nowrap; }
/* 28.10.2026: ✎ „Уреди го редот" — под „✕/↺", над 🚚; белегот „рачно"; дијалогот за целиот ред. */
.k-lo-edit { padding:0 4px; display:block; }
.k-lo-edited { font-size:10px; margin-left:4px; vertical-align:middle; cursor:help; }
.k-lo-edit-dialog .k-kasper-row { flex-wrap:wrap; gap:8px 12px; }
.k-lo-edit-dialog .k-lo-edit-wide { width:100%; display:block; margin:6px 0; }
.k-lo-edit-dialog .ui-alert { margin-top:8px; }
.k-lo-edit-original, .k-lo-edit-note { font-size:12px; margin:6px 0 0; }
/* 28.10.2026: „AI модели" — предлог решен со изборот во „Ставки". */
.k-models-superseded { font-size:11px; text-decoration:line-through; }
.k-summary-check { margin:0 0 8px; display:flex; flex-direction:column; gap:6px; }
.k-summary-confirm { flex-wrap:wrap; gap:8px; align-items:center; }
.k-text-layer { margin:0 0 4px; }