:root{
  --petrol:#0E3A4F; --petrol-2:#164B63; --petrol-3:#0A2C3C;
  --paper:#EDF1F3; --surface:#FFFFFF; --line:#D3DBE0; --line-2:#E6EBEE;
  --ink:#152229; --muted:#63757F;
  --in:#0B6E5F; --in-bg:#E3F1EE;
  --out:#A2402F; --out-bg:#F7E9E6;
  --warn:#8C5A00; --warn-bg:#FBF0DA;
  --focus:#2C7FB8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Barlow',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.num,td.n,th.n,input[type=number]{font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.app{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.side{background:var(--petrol);color:#CFE0E8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand b{display:block;color:#fff;font-size:19px;font-weight:700;letter-spacing:-.2px}
.brand span{font-size:12.5px;color:#8FB3C2}
.nav{padding:10px 8px;flex:1;overflow:auto}
.nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
  color:#CFE0E8;padding:8px 10px;border-radius:5px;cursor:pointer;font-size:14.5px;font-weight:500}
.nav button:hover{background:var(--petrol-2);color:#fff}
.nav button.on{background:#fff;color:var(--petrol);font-weight:600}
.nav .grp{font-size:11.5px;color:#7EA2B2;padding:14px 10px 5px;font-weight:600}
.nav i{width:16px;text-align:center;font-style:normal;opacity:.85}
.side-foot{padding:11px 14px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#8FB3C2}

.main{display:flex;flex-direction:column;min-width:0}
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:9px 20px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.top .firma{font-weight:600}
.top .firma small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:4px 9px;font-size:14px}
.pill select{border:0;background:none;font-weight:600;cursor:pointer}
.pill.role{background:#FFF;border-style:dashed}

.wrap{padding:20px 22px 60px;max-width:1360px;width:100%}
.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.head h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.35px}
.head p{margin:2px 0 0;color:var(--muted);font-size:14px}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 13px;
  cursor:pointer;font-weight:600;font-size:14px}
.btn:hover{border-color:#A9B7BF}
.btn.p{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn.p:hover{background:var(--petrol-2)}
.btn.sm{padding:3px 9px;font-size:13.5px;font-weight:500}
.btn.dg{color:var(--out)}
label.f{display:block;font-size:13px;color:var(--muted);margin-bottom:3px;font-weight:500}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff}
input:disabled{background:var(--paper);color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>div{flex:1;min-width:150px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-bottom:16px}
.card>h3{margin:0;padding:11px 15px;border-bottom:1px solid var(--line-2);font-size:15px;font-weight:600;
  display:flex;align-items:center;gap:10px}
.card>h3 .spacer{flex:1}
.card .body{padding:15px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:8px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:#F7F9FA}
td{padding:7px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F8FAFB}
th.n,td.n{text-align:right}
.mono{color:var(--muted);font-size:13px}
.empty{padding:34px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:3px}

.tag{display:inline-block;padding:1px 7px;border-radius:20px;font-size:12.5px;font-weight:600}
.tag.in{background:var(--in-bg);color:var(--in)}
.tag.out{background:var(--out-bg);color:var(--out)}
.tag.w{background:var(--warn-bg);color:var(--warn)}
.tag.g{background:var(--paper);color:var(--muted)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 15px}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-size:13.5px}
.kpi.in .v{color:var(--in)} .kpi.out .v{color:var(--out)} .kpi.w .v{color:var(--warn)}
.issue-filters{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(170px,.55fr) minmax(260px,1fr);gap:14px;align-items:end}.issue-filters .searchbox{width:100%;max-width:none;margin:0}.issue-product-filter{width:100%}.issue-kpis{grid-template-columns:repeat(4,minmax(160px,1fr))}.issue-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.issue-charts .card{min-width:0}.issue-charts .axb{font-size:10px}.issue-charts .ax{font-size:9.5px}
@media(max-width:1050px){.issue-filters{grid-template-columns:1fr 1fr}.issue-filters>div:first-child{grid-column:1/-1}.issue-charts{grid-template-columns:1fr}.issue-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.issue-filters,.issue-kpis{grid-template-columns:1fr}.issue-filters>div:first-child{grid-column:auto}}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:7px 11px;cursor:pointer;
  color:var(--muted);font-weight:600;font-size:14px;margin-bottom:-1px}
.tabs button.on{color:var(--petrol);border-bottom-color:var(--petrol)}

/* charts */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:'Barlow',sans-serif;font-variant-numeric:tabular-nums}
.ax{font-size:11px;fill:var(--muted)}
.axb{font-size:11.5px;fill:var(--ink);font-weight:600}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);align-items:center}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px}

.line{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff;overflow:hidden}
.line-h{display:flex;gap:10px;align-items:center;padding:9px 11px;background:#F7F9FA;flex-wrap:wrap}
.line-h .no{width:22px;height:22px;border-radius:5px;background:var(--petrol);color:#fff;display:grid;
  place-items:center;font-size:12.5px;font-weight:700;flex:none}
.line-h select{max-width:300px}
.line-h .q{width:96px}
.drawer{padding:11px 13px 13px;border-top:1px dashed var(--line);background:#FCFDFD}
.drawer .dh{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.hx{width:100%;font-size:13.5px}
.hx th{background:none;padding:4px 7px;border-bottom:1px solid var(--line-2)}
.hx td{padding:4px 7px;border-bottom:1px solid #F0F4F5}
.hx input,.hx select{padding:3px 6px}
.hx .w70{width:74px} .hx .w58{width:60px}
.dev{font-weight:600;font-size:13px}
.dev.up{color:var(--out)} .dev.dn{color:var(--in)} .dev.ok{color:var(--muted)}

.ov{position:fixed;inset:0;background:rgba(12,30,40,.42);display:grid;place-items:center;z-index:60;padding:16px}
.modal{background:#fff;border-radius:11px;width:100%;max-width:560px;max-height:88vh;overflow:auto;
  box-shadow:0 18px 46px rgba(10,30,40,.28)}
.modal h3{margin:0;padding:14px 17px;border-bottom:1px solid var(--line-2);font-size:16.5px}
.modal .body{padding:17px}
.modal .foot{padding:12px 17px;border-top:1px solid var(--line-2);display:flex;gap:9px;justify-content:flex-end;background:#FAFCFC}
.fg{margin-bottom:12px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--petrol-3);color:#fff;
  padding:9px 17px;border-radius:7px;z-index:80;font-weight:500;box-shadow:0 8px 22px rgba(10,30,40,.3)}
.hint{background:var(--warn-bg);border:1px solid #EBD7A8;color:#6B4600;padding:9px 12px;border-radius:7px;
  font-size:13.5px;margin-bottom:14px}
.carry-state{margin:0 0 14px;padding:11px 14px;border:1px solid #bfd4e0;border-radius:8px;background:#f3f8fb;color:#234b60}.carry-state.carry-ok{border-color:#a9d4bf;background:#eef8f3;color:#17603d}.carry-state.carry-warn{border-color:#e8c77c;background:var(--warn-bg);color:#6b4600}
.norm-line{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.norm-line select{flex:1}
.norm-line input{width:96px}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .brand{border:0;padding:12px 14px} .nav{display:flex;flex-wrap:wrap;padding:0 8px 8px} .nav .grp{display:none}
  .side-foot{display:none} .wrap{padding:14px} .top{flex-wrap:wrap}
}
@media print{
  .side,.top,.no-print,.tabs{display:none!important}
  .app{display:block} .wrap{padding:0;max-width:none}
  .card{border:0;break-inside:avoid} body{background:#fff;font-size:12px} th{background:#fff!important}
}

input:not([type=checkbox]),textarea,select{border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:#fff;max-width:100%;font:inherit}
input[type=password],input[type=email]{width:100%}
.auth-page{display:grid;place-items:center;min-height:100vh;padding:28px 16px}
.auth-card{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 48px #0e3a4f12;width:100%;max-width:480px;padding:32px;margin:auto}
.auth-card h1{margin:10px 0;font-size:29px}.auth-card p{color:var(--muted)}
.auth-card label.f{margin-top:16px}.auth-card input:not([type=checkbox]){width:100%}
.auth-card .btn{display:inline-block;margin-top:14px;text-decoration:none}.eyebrow{color:var(--petrol);font-size:12px;letter-spacing:2px;font-weight:700}
.check{display:flex;gap:8px;align-items:flex-start;margin-top:18px}.error-text{color:var(--out)!important}
button:disabled{opacity:.5;cursor:wait}.table-scroll{overflow:auto;max-width:100%}
#statusBanner .hint{margin:12px 22px 0}.save-error{background:var(--out-bg);border:1px solid #deb0a7;color:var(--out);padding:12px 16px;margin:12px 22px 0;border-radius:8px}
.year-note{margin:0 0 14px;padding:10px 14px;border-radius:7px;background:var(--warn-bg);color:var(--warn)}
.searchbox{margin:0 0 14px;max-width:380px}.helper-note{color:var(--muted);font-size:13px;margin-top:10px}
@media print{#statusBanner,.searchbox,.year-note{display:none!important}.table-scroll{overflow:visible}.card{box-shadow:none}thead{display:table-header-group}tr{break-inside:avoid}.wrap{width:100%}button{display:none!important}input,select{border:0!important;background:none!important}body{font-family:Arial,sans-serif}@page{size:A4 landscape;margin:12mm}}

.field-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.field-label .f{margin:0}.quick-add{white-space:nowrap;color:var(--petrol)}.select-add{display:flex;align-items:center;gap:6px}.select-add select{min-width:150px;flex:1}.select-add .quick-add{flex:none}
.article-combobox{position:relative;min-width:180px;flex:1}.article-combobox>input{width:100%}.supplier-combobox{width:100%;min-width:220px}.article-results{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:35;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px #0e3a4f28;max-height:320px;overflow:auto}.article-results button{display:flex;flex-direction:column;width:100%;border:0;border-bottom:1px solid var(--line-2);background:#fff;text-align:left;padding:8px 10px;cursor:pointer}.article-results button:hover,.article-results button:focus{background:#eaf4fa}.article-results button small{color:var(--muted);margin-top:2px}.article-no-result{padding:12px;color:var(--muted)}.similar-articles{display:grid;gap:3px;margin-top:6px;font-size:12.5px;color:var(--warn)}.similar-articles span{display:block;background:var(--warn-bg);padding:4px 7px;border-radius:4px}
.client-combobox{width:100%;min-width:270px}.client-results{min-width:390px}.sold-product-combobox{min-width:280px;max-width:430px}.duplicate-warning{margin-top:10px;padding:10px 12px;border:1px solid #e0a59d;border-radius:7px;background:var(--out-bg);color:var(--out)}
.product-variant{display:grid;grid-template-columns:minmax(280px,1.3fr) minmax(280px,1fr);gap:18px;padding:14px 18px;background:#f8fbfd;border-top:1px solid var(--line-2)}.product-variant input{width:100%;box-sizing:border-box}.product-variant small{display:block;color:var(--muted);margin-top:5px}.dimension-suggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px dashed #b9ced9;border-radius:8px;background:#fff}.dimension-suggestion>div small{margin-top:2px}.material-combobox{min-width:260px}.material-stock{display:block;margin-top:4px;font-size:11.5px}.stock-ok{color:#16734a!important}.stock-low{color:#a06500!important}.stock-negative{color:#b42318!important}.hx .article-results{min-width:390px}.hx .article-results button small:last-child{font-weight:650}.hx td:first-child{overflow:visible}@media(max-width:800px){.product-variant{grid-template-columns:1fr}.dimension-suggestion{align-items:flex-start}}

.field-help{display:block;color:var(--muted,#64748b);font-size:12px;line-height:1.5;margin-top:6px}
.activity-by,.activity-name{display:block;color:var(--muted);font-size:11px;font-family:inherit;font-weight:400;line-height:1.35;margin-top:3px}
.activity-filters{margin:0 0 14px}.activity-filters .searchbox{display:block;width:100%;max-width:520px;margin:4px 0 0}
.activity-only td{vertical-align:top}

/* Expense register */
.expense-filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0}
.expense-filters .fg{flex:1;min-width:145px;margin:0}
.expense-filters .fg:first-child{flex:2;min-width:220px}
.expense-filters .searchbox{width:100%;margin:0}
.expense-filters select,.expense-filters input{width:100%}
#expenseResults .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi .btn{margin-top:10px}
@media(max-width:760px){#expenseResults .kpis{grid-template-columns:1fr}.expense-filters .fg{min-width:130px}}

input[readonly]{background:#f0f5f8;color:#47616d;border-color:#e0e8ed}

.receipt-cards{display:grid;gap:16px}.receipt-card{border:1px solid #d9e5ed;border-radius:12px;padding:18px;background:#f8fbfe}.receipt-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.receipt-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.receipt-fields input{width:100%;box-sizing:border-box}.price-calculation{padding:12px;background:#e8f3fa;border-radius:8px;line-height:1.8}.product-sale{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;padding:18px;background:#edf7ff;border-top:1px solid #d3e4ef}.product-sale input{width:100%;box-sizing:border-box;border:2px solid #2782b3;background:white}.product-sale small{display:block;color:#526879;margin-top:6px}.product-sale strong{font-size:20px}.sale-summary{display:flex;flex-wrap:wrap;gap:28px;padding:20px;margin:14px 0;background:#e6f4ed;border:1px solid #b9daca;border-radius:10px}@media(max-width:800px){.receipt-fields{grid-template-columns:1fr 1fr}.product-sale{grid-template-columns:1fr}.line-h{flex-wrap:wrap}}

.serial-editor{margin-top:12px;padding:12px;border:1px solid #a9ccdf;border-radius:9px;background:#f1f8fc}.serial-editor textarea{display:block;width:100%;box-sizing:border-box;margin-top:8px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.serial-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.serial-title small{display:block;color:var(--muted);margin-top:3px}.serial-title>span{font-weight:700;color:var(--petrol);white-space:nowrap}.serial-available{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:9px}.serial-chip{border:1px solid #86b6d1;background:white;color:#174e6b;border-radius:999px;padding:3px 8px;cursor:pointer}.serial-none{display:block;color:var(--muted);margin-top:7px}.serial-row td{background:#f8fcfe!important;padding:0 8px 12px!important}.serial-list{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;max-width:260px;overflow-wrap:anywhere}.serial-track-check span small{display:block;color:var(--muted);margin-top:3px}.article-card-report{display:block;margin-bottom:30px;padding-top:4px}.article-card-report+.article-card-report{border-top:3px solid var(--petrol);padding-top:24px}.article-card-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:4px 0 14px}.article-card-title h2{margin:2px 0 0}.article-card-title>div:last-child{text-align:right}.article-card-title>div:last-child b{font-size:20px}.card-article-picker input[type=search]{width:100%;box-sizing:border-box}.card-article-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:6px;max-height:260px;overflow:auto;margin-top:10px}.card-article-options label{display:flex;gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--line-2);border-radius:6px;background:#fbfdfe;cursor:pointer}.card-article-options label:has(input:checked){border-color:#7eb2ce;background:#eaf5fb}.card-article-options label[hidden]{display:none}@media(max-width:700px){.serial-title,.article-card-title{align-items:flex-start;flex-direction:column}.article-card-title>div:last-child{text-align:left}}

.expense-modal{width:min(820px,96vw)!important;max-width:820px!important}.expense-lines-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.expense-invoice{border:1px solid #dae6ed;background:#f6faff;border-radius:10px;padding:14px;margin:10px 0}.expense-line{display:grid;grid-template-columns:minmax(0,1fr) 145px 32px;gap:12px;align-items:end;margin-bottom:12px}.expense-line input{width:100%;box-sizing:border-box}.expense-line button{height:36px}#eAmount[readonly]{font-size:20px;font-weight:700;background:#e9f5ef;color:#164b37;width:100%;box-sizing:border-box}@media(max-width:550px){.expense-line{grid-template-columns:minmax(0,1fr) 105px 30px;gap:6px}.expense-modal .body{padding:12px}}
.expense-modal:has(.expense-item-line){width:min(1120px,97vw)!important;max-width:1120px!important}.expense-item-line{grid-template-columns:minmax(260px,2fr) 90px 85px 125px 120px 32px}.expense-item-picker .select-add{align-items:flex-end}.expense-item-picker .article-combobox{min-width:220px}.expense-item-picker .supplier-add{height:36px}.expense-breakdown .card{flex:1;min-width:300px}@media(max-width:900px){.expense-item-line{grid-template-columns:minmax(220px,2fr) 85px 80px 110px 105px 30px;gap:7px}}@media(max-width:700px){.expense-item-line{grid-template-columns:1fr 1fr}.expense-item-picker{grid-column:1/-1}.expense-item-line>button{grid-column:2;justify-self:end}.expense-modal:has(.expense-item-line){width:98vw!important}}

.supplier-add{white-space:nowrap;background:#e9f4fc;border-color:#97c4e1;color:#175b82}.field-label{flex-wrap:wrap;gap:8px}
.invoice-open-link{color:var(--petrol);font-weight:700;text-decoration:none;border-bottom:1px dashed currentColor}.invoice-open-link:hover,.invoice-open-link:focus{text-decoration:none;border-bottom-style:solid}