:root {
  --bg: #f3f5f8; --card: #fff; --ink: #1d2433; --muted: #6b7486; --line: #e1e5ec;
  --pri: #1f5fbf; --pri-ink: #fff; --ok: #1e8a4c; --warn: #b7791f; --err: #c53030;
  --radius: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 14px; }
h1 small { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 8px; }
h3 { margin: 0 0 10px; font-size: 15px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.r { text-align: right; } .c { text-align: center; } .b { font-weight: 600; } .nowrap { white-space: nowrap; }

/* Горна лента */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #15233d; color: #dfe6f3; padding: 8px 20px; }
.top a { color: #dfe6f3; }
.brand { font-weight: 700; font-size: 16px; color: #fff !important; }
.issuer-switch select { background: #22375c; color: #fff; border: 1px solid #3a5585; border-radius: 6px; padding: 5px 8px; max-width: 210px; font-weight: 600; }
.issuer-switch label { font-size: 12px; display: flex; align-items: center; gap: 6px; color: #9fb0cc; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.top nav a { padding: 6px 10px; border-radius: 6px; }
.top nav a.on, .top nav a:hover { background: #22375c; text-decoration: none; }
.top nav a.btn-nav { background: var(--pri); color: #fff; }
.top .user { font-size: 13px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.head-row > div { display: flex; gap: 6px; flex-wrap: wrap; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; border: 1px solid; }
.flash.ok { background: #e9f7ef; border-color: #b4e2c6; color: #145c34; }
.flash.err { background: #fdecec; border-color: #f3b9b9; color: #8a1f1f; }
.flash.warn { background: #fdf6e7; border-color: #f0d9a6; color: #7a5210; }
.flash.info { background: #eaf1fb; border-color: #bcd2f0; color: #1c4380; }

/* Бутони и полета */
.btn { display: inline-block; padding: 7px 14px; border: 1px solid #c6ccd8; background: #fff; color: var(--ink); border-radius: 6px; cursor: pointer; font: inherit; line-height: 1.3; }
.btn:hover { background: #f1f4f9; text-decoration: none; }
.btn.primary { background: var(--pri); border-color: var(--pri); color: var(--pri-ink); }
.btn.primary:hover { background: #184f9f; }
.btn.danger { color: var(--err); border-color: #eab5b5; }
.btn.warn { color: var(--warn); border-color: #e8cf9c; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid #c6ccd8; border-radius: 6px; background: #fff; width: 100%; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid #b8cff2; border-color: var(--pri); }
input[readonly] { background: #f4f6f9; }
input[type=checkbox] { width: auto; }
label { display: block; font-size: 12px; color: var(--muted); }
label input, label select, label textarea { margin-top: 3px; font-size: 14px; }
label.chk { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); padding-top: 18px; }

.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.form .w2 { grid-column: span 2; } .form .w3 { grid-column: span 3; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 14px; padding: 10px 14px 4px; }
legend { font-weight: 600; padding: 0 6px; }
.actions-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions-bar .right { margin-left: auto; }
.actions-bar.sticky { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.need input { border-color: var(--warn); background: #fffaf0; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 16px; }
.filters label { min-width: 130px; }
.filters .grow { flex: 1; min-width: 200px; }
.filters > input { flex: 1; }
.quick { display: flex; gap: 12px; font-size: 13px; padding-bottom: 7px; }

/* Таблици */
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.grid th { font-size: 12px; color: var(--muted); font-weight: 600; background: #f8f9fb; }
.grid th.r, .grid td.r { text-align: right; }
.grid tr:hover td { background: #fafbfd; }
.grid tr.dim td { opacity: .5; }
.grid tr.annulled td { text-decoration: line-through; color: var(--muted); }
.grid tr.annulled td.actions { text-decoration: none; }
.grid tr.t3 td:nth-child(3) { color: var(--err); }
.grid tr.total td { font-weight: 700; background: #f3f6fb; border-top: 2px solid var(--line); }
.grid .actions a { font-size: 17px; padding: 0 4px; }
.grid .actions form { display: inline; }
.grid input, .grid select { padding: 4px 6px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: #eef1f6; color: var(--muted); }
.tag.red { background: #fdecec; color: var(--err); }

/* Редове на документа */
table.lines { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.lines th { font-size: 12px; color: var(--muted); text-align: left; padding: 4px; font-weight: 600; }
.lines td { padding: 3px 4px; }
.lines .c-no { width: 28px; color: var(--muted); text-align: center; }
.lines .c-code { width: 110px; } .lines .c-m { width: 80px; } .lines .c-q { width: 100px; } .lines .c-p { width: 110px; }
.lines .c-v { width: 80px; } .lines .c-s { width: 110px; text-align: right; }
.lines td.sum { font-weight: 600; white-space: nowrap; }
.lines .x { border: 0; background: none; font-size: 18px; color: #a0a7b5; cursor: pointer; }
.lines .x:hover { color: var(--err); }
.totals { display: flex; justify-content: flex-end; }
.totals table { border-collapse: collapse; min-width: 300px; }
.totals td { padding: 4px 8px; text-align: right; }
.totals td:first-child { color: var(--muted); }
.totals .grand td { font-size: 17px; font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); }

.login-box { max-width: 360px; margin: 10vh auto; }
.login-box label { margin-bottom: 10px; }
.login-box .btn { width: 100%; margin-top: 6px; }

/* Документ за печат */
.paper { max-width: 900px; }
.invoice { color: #000; font-size: 13px; }
.inv-head { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
.inv-title { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.inv-no { font-size: 16px; font-weight: 600; }
.inv-ref { font-size: 13px; }
.inv-label { font-size: 18px; font-weight: 700; letter-spacing: 2px; text-align: right; }
.annul { color: #c00; border: 2px solid #c00; padding: 2px 8px; margin-top: 6px; font-size: 16px; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.party { border: 1px solid #999; padding: 8px 10px; border-radius: 4px; }
.party .ph { font-size: 11px; text-transform: uppercase; color: #555; letter-spacing: 1px; margin-bottom: 3px; }
.party b { font-size: 15px; }
.inv-lines { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.inv-lines th, .inv-lines td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
.inv-lines th { background: #eee; font-size: 12px; }
.inv-lines .r { text-align: right; }
.inv-bottom { display: flex; justify-content: space-between; gap: 20px; }
.inv-info div { margin-bottom: 3px; }
.inv-info span { color: #444; }
.inv-info .note { margin-top: 6px; font-style: italic; }
.inv-totals { border-collapse: collapse; min-width: 280px; align-self: flex-start; }
.inv-totals td { padding: 3px 6px; text-align: right; border-bottom: 1px solid #ddd; }
.inv-totals .grand td { font-weight: 800; font-size: 15px; border-top: 2px solid #000; border-bottom: 0; }
.signs { display: flex; justify-content: space-between; margin-top: 40px; }
.signs span { display: inline-block; min-width: 200px; border-bottom: 1px dotted #000; padding: 0 6px; }
.printpage { background: #fff; }
.printpage .invoice { padding: 10mm 12mm; }
.pagebreak { page-break-after: always; break-after: page; }

@media print {
  .top, .noprint, .actions-bar { display: none !important; }
  body { background: #fff; }
  .card { border: 0; padding: 0; }
  @page { size: A4; margin: 8mm; }
}
@media (max-width: 760px) {
  .top { padding: 8px 12px; }
  .top nav { flex-basis: 100%; order: 3; }
  .top .user { margin-left: auto; }
  .filters label, .filters .grow { min-width: 0; flex: 1 1 45%; }
  .wrap { padding: 12px; }
  .form .w2, .form .w3 { grid-column: auto; }
  .parties { grid-template-columns: 1fr; }
  .grid { font-size: 13px; }
  .card { overflow-x: auto; }
}
.scroll { overflow-x: auto; margin-top: 12px; }
.grid.tiny th, .grid.tiny td { font-size: 12px; padding: 4px 6px; white-space: nowrap; }
label.chk.inline { display: inline-flex; padding: 0 12px 6px 0; }
/* Меню по модули */
.menu { align-items: center; }
.menu .dd { position: relative; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: #dfe6f3; outline: none; }
.menu .dd > span::after { content: ' ▾'; font-size: 10px; opacity: .7; }
.menu .dd.on, .menu .dd:hover, .menu .dd:focus-within { background: #22375c; }
.menu .dd-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,50,.18); padding: 6px; }
.menu .dd:hover .dd-menu, .menu .dd:focus-within .dd-menu { display: block; }
.menu .dd-menu a { display: block; color: var(--ink) !important; padding: 7px 10px; border-radius: 5px; }
.menu .dd-menu a:hover, .menu .dd-menu a.on { background: #eef3fb; text-decoration: none; }
.menu a.btn-nav { background: var(--pri); color: #fff; padding: 6px 12px; border-radius: 6px; margin-right: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.neg { color: var(--err); } .pos { color: var(--ok); }
.tag.green { background: #e9f7ef; color: var(--ok); } .tag.amber { background: #fdf6e7; color: var(--warn); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.perm-grid label { font-size: 13px; color: var(--ink); display: flex; gap: 6px; align-items: center; }
.menu .dd, .menu a.btn-nav { font-size: 13.5px; }
.top nav { gap: 2px; }

.top .brand { font-size: 15px; }
.menu .dd { padding: 6px 7px; }
.menu .dd, .menu a.btn-nav { font-size: 13px; }
.issuer-switch select { max-width: 190px; }
@media (min-width: 1500px) { .menu .dd, .menu a.btn-nav { font-size: 14px; } .menu .dd { padding: 6px 9px; } }
.eik-wrap { display: flex; gap: 4px; margin-top: 3px; }
.eik-wrap input { margin-top: 0; }
.eik-btn { border: 1px solid #c6ccd8; background: #eef3fb; color: var(--pri); border-radius: 6px; padding: 0 9px; font-weight: 700; cursor: pointer; font-size: 12px; }
.eik-btn:hover { background: #dfe9f8; }
.eik-msg { font-size: 11px; color: var(--muted); min-height: 14px; margin-top: 2px; }
.eik-msg.ok { color: var(--ok); } .eik-msg.err { color: var(--err); }
.print-bar { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 10px 16px; }
.print-bar .pb-group { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.paper { max-width: 900px; padding: 24px; }
.top .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; letter-spacing: .3px; }
.top .brand b { font-weight: 800; color: #9fd9ff; }
.top .brand img { display: block; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 26px; }
.login-brand b { font-weight: 800; color: var(--pri); }
.login-brand small { display: block; font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.login-box { overflow: hidden; }
.login-top { background: #080C15; margin: -16px -16px 18px; padding: 16px 20px; }
.login-top img { display: block; }
.app-foot { max-width: 1280px; margin: 10px auto 24px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 12px; }
.app-foot img { background: #080C15; padding: 5px 9px; border-radius: 6px; box-sizing: content-box; }
@media print { .app-foot { display: none; } }
.dlg { border: 0; border-radius: 10px; padding: 18px 20px; width: min(640px, 94vw); box-shadow: 0 20px 60px rgba(10,20,40,.35); }
.dlg::backdrop { background: rgba(15,25,45,.45); }
.dlg h3 { margin-top: 0; }
.novat .gcol { display: none; }
tr.newitem td .name { border-color: var(--warn); background: #fffaf0; }
.lines .gross { background: #f7fbff; }

/* Сканирани фактури */
.drop { display: block; border: 2px dashed #b9c4d6; border-radius: var(--radius); padding: 22px; text-align: center; cursor: pointer; background: #fafcff; margin-bottom: 10px; }
.drop.over { border-color: var(--pri); background: #eef4ff; }
.drop input[type=file] { display: none; }
.drop span { display: block; margin-top: 4px; }
.drop .picked { color: var(--pri); font-weight: 600; }
.tabs { display: flex; gap: 4px; margin: 14px 0 -1px; }
.tabs a { padding: 7px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: #eef1f6; color: var(--muted); text-decoration: none; }
.tabs a.on { background: var(--card); color: var(--ink); font-weight: 600; }
button.lnk { background: none; border: 0; color: var(--pri); cursor: pointer; font-size: 15px; padding: 0 4px; }
.red-t { color: var(--err); }
.scans td.msg { max-width: 320px; color: var(--warn); }
.scanview { display: grid; grid-template-columns: minmax(300px, 36%) 1fr; gap: 14px; align-items: start; }
.scanview .lines .c-code { width: 70px; } .scanview .lines .c-m { width: 60px; } .scanview .lines .c-q { width: 78px; }
.scanview .lines .c-p { width: 88px; } .scanview .lines .c-v { width: 76px; } .scanview .lines .c-s { width: 84px; }
.scanview .lines td:nth-child(3) { min-width: 180px; }
.scanview .preview { position: sticky; top: 8px; height: calc(100vh - 30px); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; background: #555; }
.scanview .preview img { width: 100%; display: block; }
.scanview .preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 1300px) { .scanview { grid-template-columns: 1fr; } .scanview .preview { position: static; height: 60vh; } }
.scans .actions .btn { font-size: 13px; }
.scans .tag { white-space: nowrap; }

#upform .upopts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
#upform .upopts .mode { flex: 0 1 380px; min-width: 0; }
#upform .upopts .mode select { width: 100%; }
#upform .upopts .chk { flex: 1 1 280px; margin: 0; }
#upform .upopts .btn { flex: 0 0 auto; }
@media (max-width: 700px) { #upform .upopts > * { flex: 1 1 100%; } }

/* Авторски знак */
.login-copy { text-align: center; font-size: 11px; color: var(--muted); margin: 18px auto 0; max-width: 560px; padding: 0 12px; }
.copyright { position: fixed; right: 8px; bottom: 6px; font-size: 10.5px; color: rgba(29,36,51,.45); background: rgba(243,245,248,.9); padding: 1px 8px; border-radius: 8px; pointer-events: none; user-select: none; z-index: 5; white-space: nowrap; }
body { padding-bottom: 22px; }
@media print { .copyright, .login-copy { display: none !important; } }
@media (max-width: 700px) { .copyright { right: 0; left: 0; text-align: center; font-size: 9.5px; white-space: normal; } }

/* ДМА */
.printonly { display: none; }
@media print { .printonly { display: block; font-size: 14pt; } .grid.assets { font-size: 9pt; } .card { border: 0; padding: 0; box-shadow: none; } }
.grid tr.grp td { background: #eef3fb; font-weight: 700; color: #1f3d6e; padding-top: 8px; }
.grid tr.subtotal td { font-weight: 600; background: #fafbfd; border-top: 1px solid var(--line); }
.grid.assets td { white-space: nowrap; } .grid.assets td:nth-child(2) { white-space: normal; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.month { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: #fff; }
.month .m { font-weight: 700; } .month.ok { border-color: #9fd6b4; background: #f3fbf6; } .month.diff { border-color: #f0c36d; background: #fffaf0; } .month.sel { outline: 2px solid var(--pri); }
.month .s { font-size: 12px; color: var(--muted); } .month form { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

/* ТРЗ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.warn-t { color: var(--warn); }
.grid.payroll td { vertical-align: top; } .grid.payroll input.num { width: 84px; }
.grid.payroll th { white-space: normal; font-size: 11px; }
@media print { .grid.payroll { font-size: 8pt; } .grid.payroll input { border: 0; } @page { size: A4 landscape; } }
.slip { border: 1px solid #999; padding: 10px 14px; margin: 0 0 14px; page-break-inside: avoid; font-size: 10pt; background: #fff; }
.slip h3 { margin: 0 0 4px; font-size: 12pt; } .slip table { width: 100%; border-collapse: collapse; }
.slip td { padding: 2px 4px; border-bottom: 1px dotted #ccc; } .slip td.r { text-align: right; white-space: nowrap; }
.slip .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .slip .tot td { font-weight: 700; border-top: 1px solid #000; }
.grid.payroll td.r { white-space: nowrap; }
.slip .cols { align-items: start; }
@media (min-width: 1000px) { .menu .dd { padding: 6px 6px; font-size: 13.5px; } .top nav { gap: 2px; } }
@media (min-width: 1000px) and (max-width: 1520px) { .menu .dd { padding: 6px 4px; font-size: 13px; } .top { gap: 8px 8px; } }
.doclinks { display: flex; flex-wrap: wrap; gap: 8px; }
a.btn.disabled { pointer-events: none; opacity: .5; }