/* BENITA internal system — monochrome to match the logo, one accent for actions. */
:root{
  --bp-black:#0d0d0d;
  --bp-ink:#1a1a1a;
  --bp-grey-900:#232323;
  --bp-grey-700:#4a4a4a;
  --bp-grey-500:#8a8a8a;
  --bp-grey-200:#e4e4e4;
  --bp-grey-100:#f2f2f0;
  --bp-paper:#fafaf8;
  --bp-accent:#b8863b;
  --bp-accent-soft:#f6efe3;
  --bp-ok:#2f7d4f;
  --bp-warn:#b8863b;
  --bp-bad:#a8352c;
  --bp-sidebar:220px;
}

body{
  background:var(--bp-paper);
  color:var(--bp-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
}

/* ---------------------------------------------------------------- shell */
.bp-shell{display:flex;min-height:100vh}
.bp-sidebar{
  width:var(--bp-sidebar);flex:0 0 var(--bp-sidebar);
  background:var(--bp-black);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.bp-sidebar__brand{padding:22px 20px 18px;border-bottom:1px solid #262626}
.bp-sidebar__brand img{width:44px;height:44px;border-radius:50%;background:#000}
.bp-sidebar__brand-name{font-weight:700;letter-spacing:.16em;font-size:13px;margin-top:10px}
.bp-sidebar__brand-sub{color:var(--bp-grey-500);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.bp-nav{padding:14px 10px;flex:1;overflow-y:auto}
.bp-nav__label{color:#5e5e5e;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:14px 10px 6px}
.bp-nav a{
  display:flex;align-items:center;gap:10px;
  color:#cfcfcf;text-decoration:none;padding:8px 10px;border-radius:6px;
  font-size:13.5px;margin-bottom:1px;
}
.bp-nav a:hover{background:#1c1c1c;color:#fff}
.bp-nav a.active{background:#fff;color:#0d0d0d;font-weight:600}
.bp-nav a i{width:16px;text-align:center;font-size:14px}
.bp-sidebar__foot{padding:14px;border-top:1px solid #262626;font-size:12px;color:var(--bp-grey-500)}

.bp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bp-topbar{
  background:#fff;border-bottom:1px solid var(--bp-grey-200);
  padding:12px 26px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:20;
}
.bp-topbar__title{font-weight:650;font-size:16px;margin:0}
.bp-topbar__meta{color:var(--bp-grey-500);font-size:12px}
.bp-content{padding:22px 26px 60px;flex:1}

/* ---------------------------------------------------------------- cards */
.bp-card{background:#fff;border:1px solid var(--bp-grey-200);border-radius:10px}
.bp-card__head{
  padding:12px 16px;border-bottom:1px solid var(--bp-grey-200);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.bp-card__title{font-weight:650;font-size:13.5px;margin:0}
.bp-card__sub{font-size:11px;color:var(--bp-grey-500);margin-top:2px}
.bp-card__body{padding:16px}

.bp-kpi{background:#fff;border:1px solid var(--bp-grey-200);border-radius:10px;padding:15px 16px;height:100%}
.bp-kpi__label{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--bp-grey-500)}
.bp-kpi__value{font-size:25px;font-weight:680;line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
.bp-kpi__sub{font-size:12px;color:var(--bp-grey-700);margin-top:3px}
.bp-kpi--dark{background:var(--bp-black);border-color:var(--bp-black);color:#fff}
.bp-kpi--dark .bp-kpi__label{color:#8a8a8a}
.bp-kpi--dark .bp-kpi__sub{color:#b5b5b5}
.bp-kpi--accent{border-left:3px solid var(--bp-accent)}

/* ---------------------------------------------------------------- tables */
.bp-table{width:100%;font-size:13px;border-collapse:separate;border-spacing:0}
.bp-table th{
  text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bp-grey-500);
  padding:9px 12px;border-bottom:1px solid var(--bp-grey-200);white-space:nowrap;
}
.bp-table td{padding:9px 12px;border-bottom:1px solid var(--bp-grey-100);vertical-align:middle}
.bp-table tbody tr:hover{background:var(--bp-grey-100)}
.bp-table .num{text-align:right;font-variant-numeric:tabular-nums}
.bp-table tfoot td{font-weight:650;border-top:2px solid var(--bp-grey-200);background:var(--bp-grey-100)}
.bp-table--flush td:first-child,.bp-table--flush th:first-child{padding-left:16px}
.bp-table--flush td:last-child,.bp-table--flush th:last-child{padding-right:16px}

.mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

/* ---------------------------------------------------------------- badges */
.bp-badge{
  display:inline-block;padding:2.5px 8px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  border:1px solid transparent;
}
.bp-badge--ok{background:#e8f3ec;color:var(--bp-ok);border-color:#c9e3d3}
.bp-badge--warn{background:var(--bp-accent-soft);color:#8a6428;border-color:#ecdcc0}
.bp-badge--bad{background:#fbeceb;color:var(--bp-bad);border-color:#f2cfcc}
.bp-badge--neutral{background:var(--bp-grey-100);color:var(--bp-grey-700);border-color:var(--bp-grey-200)}
.bp-badge--dark{background:var(--bp-black);color:#fff}

.bp-pika{
  display:inline-block;min-width:26px;text-align:center;
  background:var(--bp-black);color:#fff;border-radius:5px;
  font-size:11px;font-weight:700;padding:2px 6px;letter-spacing:.04em;
}

/* ---------------------------------------------------------------- buttons */
.btn-bp{background:var(--bp-black);color:#fff;border:1px solid var(--bp-black);font-weight:550}
.btn-bp:hover{background:#000;color:#fff}
.btn-bp-outline{background:#fff;color:var(--bp-ink);border:1px solid var(--bp-grey-200);font-weight:550}
.btn-bp-outline:hover{background:var(--bp-grey-100);color:var(--bp-ink)}
.btn-bp-accent{background:var(--bp-accent);border:1px solid var(--bp-accent);color:#fff;font-weight:550}
.btn-bp-accent:hover{background:#a2762f;color:#fff}

/* ---------------------------------------------------------------- login */
.bp-login{min-height:100vh;display:flex}
.bp-login__brand{
  flex:1;background:var(--bp-black);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;
}
.bp-login__brand img{width:170px;height:170px;border-radius:50%}
.bp-login__brand h1{font-size:22px;letter-spacing:.3em;margin-top:26px;font-weight:600}
.bp-login__brand p{color:var(--bp-grey-500);letter-spacing:.16em;font-size:11px;text-transform:uppercase;margin-top:6px}
.bp-login__brand .tag{margin-top:34px;color:#7a7a7a;font-size:12px;text-align:center;line-height:1.7;max-width:320px}
.bp-login__form{flex:0 0 420px;display:flex;align-items:center;justify-content:center;padding:40px;background:#fff}
@media (max-width:900px){.bp-login{flex-direction:column}.bp-login__brand{padding:50px 20px}.bp-login__form{flex:1;width:100%}}

/* ---------------------------------------------------------------- FP form */
.fp-grid{width:100%;font-size:12.5px;border-collapse:collapse}
.fp-grid th{
  background:var(--bp-grey-100);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bp-grey-700);padding:7px 8px;border:1px solid var(--bp-grey-200);font-weight:600;
}
.fp-grid td{border:1px solid var(--bp-grey-200);padding:3px 4px}
.fp-grid td.rownum{background:var(--bp-grey-100);text-align:center;color:var(--bp-grey-500);
  font-size:11px;width:34px;font-weight:600}
.fp-grid input,.fp-grid select{border:0;box-shadow:none!important;background:transparent;
  padding:4px 5px;font-size:12.5px;width:100%}
.fp-grid input:focus,.fp-grid select:focus{background:var(--bp-accent-soft);outline:0}
.fp-grid input.num{text-align:right;font-variant-numeric:tabular-nums}
/* An unstyled select in a borderless cell reads as a divider, not a control, so the
   model/article pickers get a chevron, a tinted ground and a real prompt. */
.fp-grid select.fp-select{
  appearance:none;-webkit-appearance:none;
  background-color:var(--bp-paper);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  border:1px solid var(--bp-grey-200);border-radius:5px;
  padding:5px 24px 5px 8px;cursor:pointer;color:var(--bp-ink);
}
.fp-grid select.fp-select:hover{border-color:var(--bp-grey-500)}
.fp-grid select.fp-select:focus{border-color:var(--bp-accent);
  background-color:var(--bp-accent-soft)}
/* Grey the prompt itself, so a chosen model stands out from an empty row. */
.fp-grid select.fp-select:has(option[value=""]:checked){color:var(--bp-grey-500)}
.fp-grid input::placeholder{color:#bdbdbd;font-size:11.5px}

/* Required header fields carry a visible marker rather than only failing on submit. */
.form-label .req{color:var(--bp-bad);font-weight:700;margin-left:2px}
.fp-grid tr:has(select.fp-select option[value=""]:checked) td.fp-calc{opacity:.45}
.fp-calc{background:var(--bp-grey-100);text-align:right;font-variant-numeric:tabular-nums;
  padding:4px 8px!important;color:var(--bp-grey-700);font-size:12px;white-space:nowrap}
.fp-ratio{font-size:11px}
.fp-ratio.ok{color:var(--bp-ok)}
.fp-ratio.off{color:var(--bp-warn)}

.bp-total-bar{
  position:sticky;bottom:0;background:var(--bp-black);color:#fff;
  border-radius:10px;padding:12px 18px;display:flex;align-items:center;gap:26px;
  box-shadow:0 -2px 18px rgba(0,0,0,.16);z-index:15;
}
.bp-total-bar .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a}
.bp-total-bar .val{font-size:21px;font-weight:680;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- misc */
.bp-timeline{list-style:none;margin:0;padding:0}
.bp-timeline li{position:relative;padding:0 0 14px 22px;border-left:1.5px solid var(--bp-grey-200)}
.bp-timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.bp-timeline li::before{
  content:'';position:absolute;left:-5.5px;top:4px;width:9px;height:9px;
  border-radius:50%;background:var(--bp-black);
}
.bp-timeline .t-title{font-size:13px;font-weight:600}
.bp-timeline .t-meta{font-size:11.5px;color:var(--bp-grey-500)}

/* P6 board: four equal columns whose card lists scroll, so the columns stay level
   however unbalanced the queue is. */
.bp-board{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
@media (max-width:1500px){.bp-board{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1200px){.bp-board{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.bp-board{grid-template-columns:1fr}}

.bp-stage-col{background:var(--bp-grey-100);border-radius:10px;padding:12px;
  display:flex;flex-direction:column;min-height:340px}
.bp-stage-col--ready{background:#e8f3ec}
.bp-stage-col__head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--bp-grey-200)}
.bp-stage-col__title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bp-grey-700);font-weight:650}
.bp-stage-col__sub{font-size:11px;color:var(--bp-grey-500);margin-top:2px}
.bp-stage-col__late{font-size:10.5px;color:var(--bp-bad);font-weight:650;margin-top:4px;
  white-space:nowrap}
.bp-stage-col__body{flex:1;overflow-y:auto;max-height:min(62vh,620px);
  padding-right:2px;scrollbar-width:thin}

.bp-wo{background:#fff;border:1px solid var(--bp-grey-200);border-radius:8px;
  padding:11px 13px;margin-bottom:9px;border-left:3px solid var(--bp-grey-200);
  display:flex;flex-direction:column;gap:5px}
.bp-wo--late{border-left-color:var(--bp-bad)}
.bp-wo--today{border-left-color:var(--bp-accent)}
.bp-wo--soon{border-left-color:#d8b25e}
.bp-wo--ok{border-left-color:var(--bp-grey-200)}
.bp-wo--none{border-left-color:var(--bp-grey-200);border-left-style:dashed}
.bp-wo__top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.bp-wo__serial{font-weight:680;font-size:13.5px}
/* A comfortable due date is a quiet date, not another badge competing for attention. */
.bp-wo__date{font-size:10.5px;color:var(--bp-grey-500);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bp-wo__who{font-size:12.5px;color:var(--bp-ink);line-height:1.35}
.bp-wo__who .bp-pika{margin-left:3px}
/* The job itself — the line the workshop plans its day around. */
.bp-wo__work{font-size:12px;color:var(--bp-grey-700);display:flex;gap:8px;
  align-items:baseline;font-variant-numeric:tabular-nums}
.bp-wo__work strong{font-size:13.5px;font-weight:680;color:var(--bp-ink)}
.bp-wo__owing{font-weight:680;color:var(--bp-bad);font-size:13px}
.bp-wo__paid{font-weight:650;color:var(--bp-ok);font-size:12.5px}
.bp-wo__since{font-size:10.5px;color:var(--bp-grey-500);line-height:1.35;
  padding-top:1px;border-top:1px solid var(--bp-grey-100)}
.bp-wo__stall{color:var(--bp-bad);font-weight:650}

.bp-steps{display:flex;gap:4px;flex-wrap:wrap}
.bp-step{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:650;
  padding:2px 5px;border-radius:4px;background:var(--bp-grey-100);
  color:var(--bp-grey-500);border:1px solid var(--bp-grey-200)}
.bp-step--done{background:#e8f3ec;color:#1f6b3f;border-color:#cfe6d8}
.bp-step i{font-size:9px;margin-right:2px}

.bp-empty{text-align:center;padding:36px 20px;color:var(--bp-grey-500);font-size:13px}
.bp-empty i{font-size:26px;display:block;margin-bottom:8px;color:var(--bp-grey-200)}

.bp-section-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bp-grey-500);font-weight:650;margin:0 0 10px}
.form-label{font-size:11.5px;font-weight:600;color:var(--bp-grey-700);margin-bottom:3px}
a{color:var(--bp-ink)}
a:hover{color:var(--bp-accent)}

/* Quick filters — the one-click answer to "what did we write today?" */
.bp-quickbar{display:flex;gap:8px;flex-wrap:wrap}
.bp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--bp-grey-200);
  color:var(--bp-grey-700);text-decoration:none}
.bp-chip:hover{border-color:var(--bp-grey-500);color:var(--bp-ink)}
.bp-chip--on{background:var(--bp-ink);border-color:var(--bp-ink);color:#fff}
.bp-chip--on:hover{color:#fff}
.bp-chip__n{font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--bp-grey-100);color:var(--bp-grey-700)}
.bp-chip--on .bp-chip__n{background:rgba(255,255,255,.22);color:#fff}

/* One block answering: where is it, is it paid, what is owed, is it made,
   is it delivered, is it a sale. Every value derived. */
.bp-state{background:#fff;border:1px solid var(--bp-grey-200);border-radius:10px;
  padding:16px 18px;margin-bottom:16px}
.bp-state__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bp-state__label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bp-grey-500);font-weight:650;margin-bottom:5px}
.bp-state__status .bp-badge{font-size:12.5px;padding:4px 11px}
.bp-state__action{font-size:15px;font-weight:700;color:var(--bp-ink)}
.bp-state__why{font-size:13px;color:var(--bp-grey-700);margin:12px 0 14px;line-height:1.5}
.bp-state__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  border-top:1px solid var(--bp-grey-200);padding-top:14px}
@media (max-width:900px){.bp-state__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.bp-state__grid{grid-template-columns:1fr}}
.bp-state__cell{min-width:0}
.bp-state__note{font-size:11px;color:var(--bp-grey-500);margin-top:6px;line-height:1.4}
.bp-state__money{width:100%;margin-top:8px;font-size:12px}
.bp-state__money td{padding:1px 0;color:var(--bp-grey-700)}
.bp-state__money td:last-child{text-align:right;font-weight:650;
  font-variant-numeric:tabular-nums}
.bp-state__money tr.owing td{color:var(--bp-bad)}

/* Zbritja — a question at the foot of the Fletëporosia, shut until answered.
   Shut, it is one quiet line; open, it is the only place money is given away, so
   it is allowed to look like it. */
.bp-discount{
  background:#fff;border:1px solid var(--bp-grey-200);border-radius:10px;
  margin-bottom:12px;
}
.bp-discount.is-open{border-color:var(--bp-accent);background:var(--bp-accent-soft)}
.bp-discount__ask{
  display:flex;align-items:center;gap:14px;padding:11px 16px;font-size:13px;
  color:var(--bp-grey-700);
}
.bp-discount__ask span{font-weight:550}
.bp-discount__ask .btn{margin-left:auto}
.bp-discount.is-open .bp-discount__ask{border-bottom:1px solid rgba(184,134,59,.3)}

.bp-discount__panel{display:none;padding:16px}
.bp-discount.is-open .bp-discount__panel{display:block}
.bp-discount__figures{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.bp-discount__figures .lbl{
  display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bp-grey-500);margin-bottom:4px;
}
.bp-discount__figures .val{
  font-size:21px;font-weight:680;font-variant-numeric:tabular-nums;line-height:1.1;
}
.bp-discount__figures .val--cut{color:var(--bp-bad)}
.bp-discount__arrow{color:var(--bp-grey-500);padding-bottom:4px;font-size:15px}
.bp-discount__pct{font-size:11.5px;color:var(--bp-bad);margin-top:2px}

.bp-discount__field{display:flex;align-items:baseline;gap:6px}
.bp-discount__field span{font-size:15px;color:var(--bp-grey-500)}
.bp-discount__input{
  width:130px;background:#fff;border:1.5px solid var(--bp-accent);border-radius:7px;
  color:var(--bp-ink);font-size:21px;font-weight:680;font-variant-numeric:tabular-nums;
  padding:3px 9px;outline:0;-moz-appearance:textfield;
}
.bp-discount__input::-webkit-outer-spin-button,
.bp-discount__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bp-discount__input:focus{box-shadow:0 0 0 3px rgba(184,134,59,.22)}

.bp-discount__note{font-size:11.5px;color:var(--bp-grey-700);margin-top:12px}

/* Every product with its value before and after — proof the reduction landed on
   all of them, not just on the total. */
.bp-discount__lines:not(:empty){
  margin-top:12px;padding-top:10px;border-top:1px solid rgba(184,134,59,.3);
  max-width:420px;
}
.bp-discount__lines-head{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bp-bad);margin-bottom:7px;
}
.bp-discount__line{
  display:flex;align-items:baseline;gap:10px;padding:3px 0;font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.bp-discount__line .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--bp-grey-700)}
.bp-discount__line .was{color:var(--bp-grey-500);text-decoration:line-through;
  min-width:64px;text-align:right}
.bp-discount__line .ar{color:var(--bp-grey-500)}
.bp-discount__line .now{min-width:64px;text-align:right;font-weight:650}
.bp-discount__line.is-sum{
  border-top:1px solid rgba(184,134,59,.3);margin-top:5px;padding-top:7px;
  font-size:13.5px;
}
.bp-discount__line.is-sum .nm{color:var(--bp-ink);font-weight:650}
.bp-discount__line.is-sum .now{font-size:15px}

/* The kapar asks the same way the zbritje does, in the system's own accent rather
   than the discount's, because taking money in is not giving it away. */
.bp-kapar.is-open{border-color:#2f7d4f;background:#f1f7f3}
.bp-kapar.is-open .bp-discount__ask{border-bottom-color:rgba(47,125,79,.3)}
.bp-kapar .bp-discount__input{border-color:#2f7d4f}
.bp-kapar .bp-discount__input:focus{box-shadow:0 0 0 3px rgba(47,125,79,.2)}
.bp-kapar select{max-width:150px}
.bp-kapar__locked{margin-left:auto;font-size:11.5px;color:var(--bp-grey-500)}

/* `× 2` — this row is that many Pjesa of the same model and forma. */
.bp-times{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;
  background:var(--bp-black);color:#fff;font-size:10.5px;font-weight:650;
  font-variant-numeric:tabular-nums;
}

/* A sortable column heading. It has to look like a control without shouting over
   the rows it labels, so it borrows the heading's own type and only gains an arrow. */
.bp-sort{
  color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap;
}
.bp-sort:hover{color:var(--bp-ink)}
.bp-sort span{font-size:10px;color:var(--bp-accent)}
.bp-sort.is-on{color:var(--bp-ink)}

/* A heading that filters. The caret and funnel say it opens; a chosen value is
   shown in the heading itself so a narrowed table never reads as an empty one. */
.bp-colmenu .bp-sort{cursor:pointer}
.bp-colmenu .bi-funnel,
.bp-colmenu .bi-funnel-fill{font-size:9.5px;color:var(--bp-grey-500)}
.bp-colmenu .bi-funnel-fill{color:var(--bp-accent)}
.bp-colmenu__on{
  display:inline-block;margin-left:3px;padding:0 6px;border-radius:9px;
  background:var(--bp-accent-soft);border:1px solid #ecdcc0;color:#8a6428;
  font-size:10px;font-weight:650;text-transform:none;letter-spacing:0;
}
.bp-colmenu__list{
  font-size:12.5px;border-color:var(--bp-grey-200);border-radius:9px;
  box-shadow:0 6px 22px rgba(0,0,0,.10);padding:5px;min-width:190px;
}
.bp-colmenu__list .dropdown-item{border-radius:6px;padding:5px 9px}
.bp-colmenu__list .dropdown-item.active{background:var(--bp-black);color:#fff}
.bp-colmenu__list .bi{font-size:11px;color:var(--bp-grey-500);margin-right:4px}

/* The phone number, on the card — a call should not start by opening the order. */
.bp-wo__phone{
  font-variant-numeric:tabular-nums;font-weight:650;font-size:12.5px;
  color:var(--bp-ink);text-decoration:none;
}
.bp-wo__phone:hover{color:var(--bp-accent)}

/* The day's money, read down the page as the sum it is. */
.bp-ledger{width:100%;border-collapse:collapse;max-width:620px}
.bp-ledger td{padding:5px 0;vertical-align:baseline}
.bp-ledger__lbl{white-space:nowrap;padding-right:18px!important}
.bp-ledger__n{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;
  white-space:nowrap;width:130px}
.bp-ledger__why{padding-left:16px!important;font-size:11px;color:var(--bp-grey-500)}
.bp-ledger__sum td{border-top:1px solid var(--bp-grey-200);padding-top:8px}
.bp-ledger__sum .bp-ledger__n{font-size:18px}

/* The day's cash, read as the equation it is. */
.bp-cash{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.bp-cash__n{font-size:21px;font-weight:680;font-variant-numeric:tabular-nums;
  line-height:1.15}
.bp-cash__n--strong{color:var(--bp-accent)}
.bp-cash__op{font-size:17px;color:var(--bp-grey-500);padding-bottom:3px}

/* A bar against the best seller — the shape of a ranked list, without a chart. */
.bp-bar{background:var(--bp-grey-100);border-radius:3px;height:7px;overflow:hidden}
.bp-bar span{display:block;height:100%;background:var(--bp-accent);border-radius:3px}

/* Which pika's work the P6 board is showing. */
.bp-pika-filter{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.bp-pika-filter .lbl{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bp-grey-500);margin-right:2px;
}
.bp-chip{
  display:inline-block;padding:3px 12px;border-radius:14px;font-size:12px;
  font-weight:600;text-decoration:none;color:var(--bp-grey-700);
  background:#fff;border:1px solid var(--bp-grey-200);
}
.bp-chip:hover{border-color:var(--bp-grey-500);color:var(--bp-ink)}
.bp-chip.is-on{background:var(--bp-black);border-color:var(--bp-black);color:#fff}
.bp-chip strong{margin-left:4px;font-variant-numeric:tabular-nums}
/* Nothing waiting under this action — still offered, but not competing for the eye. */
.bp-chip.is-empty{color:var(--bp-grey-500);background:var(--bp-grey-100)}
.bp-chip.is-empty.is-on{color:#fff;background:var(--bp-black)}

/* An over-height row, said beside the field rather than fixed behind the seller. */
.fp-warn{font-size:10px;line-height:1.25;color:var(--bp-bad);margin-top:3px}
.bp-grid input.is-too-tall,
input.is-too-tall{border-color:var(--bp-bad)!important;background:#fdf2f1}

/* A limit written into the column header, so it is read before it is hit. */
.th-hint{
  display:block;font-size:9.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--bp-accent);
}

/* Zbritja is red wherever it appears — the order page, the form, the printout. */
.bp-cut, .bp-cut td{color:var(--bp-bad)}
.bp-cut td{font-weight:600}

/* A discounted figure anywhere — the grid, the order page. The catalogue price
   stays legible above what is actually charged, because the discount is a layer
   over the prices and never a rewrite of them. */
.fp-was{display:block;font-size:10.5px;color:var(--bp-grey-500);
  text-decoration:line-through;line-height:1.25}
.fp-now{display:block;color:var(--bp-accent);font-weight:680;line-height:1.25}
.bp-discount__warn{
  font-size:12px;color:var(--bp-bad);background:#fdf2f1;border-radius:6px;
  padding:7px 10px;margin-top:10px;
}

/* Moving between days on `Mbyllja e ditës`.
   The workbook cannot do this at all — `SHD 20260831` holds 31.08 and the day before
   it was overwritten the morning somebody pasted `A8` forward. Every figure on that
   screen is folded from dated events, so the arrows are the whole point of it. */
.bp-daynav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bp-daynav__form{display:flex;align-items:center;gap:6px;margin:0}
.bp-daynav__form input[type=date]{width:auto;min-width:150px}
.bp-daynav__sep{width:1px;height:20px;background:var(--bp-grey-200);margin:0 4px}
.bp-daynav__flag{
  font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--bp-accent);
}
/* A term that only explains the line above it — quieter, and indented under it. */
.bp-ledger__sub .bp-ledger__lbl{
  padding-left:14px;font-size:11.5px;color:var(--bp-grey-500);font-weight:500;
}

/* The P6 board's search. Wide and on its own line, because on a screen that is five
   columns of cards anything small is scenery — and this is the box somebody reaches
   for while a customer is on the telephone. */
.bp-search{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;
  background:#fff;border:1px solid var(--bp-grey-200);border-radius:8px;
}
.bp-search.is-on{border-color:var(--bp-black);box-shadow:0 0 0 1px var(--bp-black)}
.bp-search__icon{color:var(--bp-grey-500);font-size:15px}
.bp-search__input{
  flex:1;border:0;outline:0;background:transparent;font-size:14px;color:var(--bp-ink);
  padding:4px 0;min-width:0;
}
.bp-search__input::placeholder{color:var(--bp-grey-500)}
.bp-search__result{
  margin:-4px 0 12px;padding:8px 12px;font-size:13px;border-radius:6px;
  background:var(--bp-grey-100);
}
.bp-search__result.is-empty{background:var(--bp-accent-soft);color:#8a6428}

/* A grid row the server refused. The grid scrolls sideways, so the row is tinted as
   well as the field marked — an error three columns off-screen is an error nobody
   reads, which is how «Formulari ka gabime» came to point at nothing at all. */
.fp-grid tr.has-error td{background:#fdf2f1}
.fp-grid tr.has-error .rownum{color:var(--bp-bad);font-weight:700}

/* `Kaparet` — its own block under the day's total. A deposit is not a sale and must
   not be read as one, but the cash is in the drawer, so the arithmetic above has
   already counted it. This block says what the money *is*, not how much there is —
   hence the rule above it and no sign in front of the figures. */
.bp-ledger__kapar-head td{
  padding-top:14px;border-top:1px solid var(--bp-grey-200);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}

/* A measurement box switched off because the row holds a service. Closed rather than
   merely ignored: a rail width typed into a `Sherbim Postar` row would be stored and
   printed on the fletëporosi as if it meant something. */
.fp-grid input.is-off, .fp-grid select.is-off{
  background:var(--bp-grey-100);color:var(--bp-grey-500);border-style:dashed;
}

/* Two ways to do the same moment, with the quick one first. The rule says they are
   alternatives rather than steps — stacked plainly, a seller reads the second button
   as the next thing to press. */
.bp-or{
  display:flex;align-items:center;gap:10px;margin:14px 0 10px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bp-grey-500);
}
.bp-or::before, .bp-or::after{
  content:"";flex:1;height:1px;background:var(--bp-grey-200);
}

/* ── Njoftimet: the bell in the top bar ─────────────────────────────────────
   Sits at the right-hand end of the bar, after any page actions, so the eye
   finds it in the same place on every screen. The count is the only red thing
   in a deliberately monochrome interface — which is what makes it work. */
.bp-bell{margin-left:8px}
.bp-bell__count{
  position:absolute;top:-5px;right:-5px;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--bp-bad);color:#fff;
  border-radius:9px;font-size:10.5px;line-height:17px;font-weight:700;
}
.bp-bell__menu{
  width:340px;max-height:430px;overflow-y:auto;padding:0;
  border:1px solid var(--bp-grey-200);border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.13);
}
.bp-bell__head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--bp-grey-200);
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--bp-grey-700);
  position:sticky;top:0;background:#fff;
}
.bp-bell__item{
  display:block;padding:9px 12px;text-decoration:none;color:var(--bp-ink);
  border-bottom:1px solid var(--bp-grey-100);
}
.bp-bell__item:hover{background:var(--bp-grey-100)}
/* An unread one is marked down its edge rather than by a coloured background:
   the list stays readable when everything in it is new. */
.bp-bell__item.is-unread{border-left:3px solid var(--bp-accent);padding-left:9px}
.bp-bell__title{font-size:13px;font-weight:600;line-height:1.3}
.bp-bell__body{font-size:11.5px;color:var(--bp-grey-700);margin-top:2px}
.bp-bell__when{font-size:10.5px;color:var(--bp-grey-500);margin-top:3px}
.bp-bell__empty{padding:18px 12px;text-align:center;color:var(--bp-grey-500);font-size:12.5px}
.bp-bell__all{
  display:block;padding:9px 12px;text-align:center;text-decoration:none;
  font-size:12px;font-weight:600;color:var(--bp-ink);background:var(--bp-grey-100);
  position:sticky;bottom:0;
}
.bp-bell__all:hover{background:var(--bp-grey-200)}
tr.is-unread td{background:var(--bp-accent-soft)}

/* ── Profili: the sidebar footer, which is one button ────────────────────────
   The avatar carries the initials. Colour is the one accent already in the
   palette rather than the per-user pastel that avatar components usually
   generate — a dozen staff would give a dozen tints and turn the calmest
   corner of the interface into a paint chart. */
.bp-profile{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 8px;background:none;border:0;border-radius:8px;
  color:inherit;text-align:left;cursor:pointer;
}
.bp-profile:hover{background:#1e1e1e}
.bp-profile[aria-expanded="true"]{background:#1e1e1e}
.bp-profile__avatar{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bp-accent);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;
}
.bp-profile__who{min-width:0;flex:1 1 auto;display:block}
/* Names run long — `Mergime Musshabanaj` is 19 characters in a 220px rail —
   so the line is clipped rather than allowed to wrap the avatar out of line. */
.bp-profile__name{
  display:block;font-size:12.5px;font-weight:600;color:#e8e8e8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bp-profile__role{
  display:block;font-size:11px;color:var(--bp-grey-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bp-profile__caret{flex:0 0 auto;font-size:11px;color:var(--bp-grey-500)}
.bp-profile__menu{
  /* Wider than the rail it hangs off — `Ndrysho fjalëkalimin` does not fit in
     200px, and the sidebar does not clip, so it may spill to the right. */
  min-width:236px;
  border:1px solid var(--bp-grey-200);border-radius:8px;padding:5px;
  box-shadow:0 -6px 26px rgba(0,0,0,.28);
}
.bp-profile__menu .dropdown-item{
  display:flex;align-items:center;gap:9px;
  border-radius:6px;font-size:13px;padding:7px 9px;
}
.bp-profile__menu .dropdown-item i{width:15px;color:var(--bp-grey-700)}
.bp-profile__menu form{margin:0}
.bp-profile__out{width:100%;border:0;background:none}
.bp-profile__out:hover{color:var(--bp-bad)}
.bp-profile__out:hover i{color:var(--bp-bad)}

/* ── Përshëndetja ─────────────────────────────────────────────────────────── */
.bp-hello{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;margin-bottom:16px;
  background:#fff;border:1px solid var(--bp-grey-200);border-radius:10px;
}
.bp-hello__avatar{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bp-accent);color:#fff;font-size:16px;font-weight:700;
}
.bp-hello__text{min-width:0}
.bp-hello__title{font-size:19px;font-weight:700;color:var(--bp-ink);line-height:1.25}
.bp-hello__meta{font-size:12.5px;color:var(--bp-grey-700);margin-top:2px}

/* ── Profili im ───────────────────────────────────────────────────────────── */
.bp-profile-head{
  display:flex;align-items:center;gap:16px;
  padding:20px;margin-bottom:16px;
  background:var(--bp-ink);border-radius:10px;color:#fff;
}
.bp-profile-head__avatar{
  flex:0 0 auto;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bp-accent);color:#fff;font-size:21px;font-weight:700;
}
.bp-profile-head__name{font-size:21px;font-weight:700;line-height:1.2}
.bp-profile-head__meta{font-size:13px;color:#b5b5b5;margin-top:3px}
.bp-facts{list-style:none;margin:0;padding:0}
.bp-facts li{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--bp-grey-100);font-size:13px;
}
.bp-facts li:last-child{border-bottom:0}
.bp-facts dt,.bp-facts .k{color:var(--bp-grey-700)}
.bp-facts .v{font-weight:600;text-align:right}

/* A standing caveat attached to a screen — «this only affects new orders».
   Quieter than an alert, which people learn to dismiss without reading. */
.bp-note{
  padding:10px 13px;border-radius:8px;font-size:12.5px;line-height:1.5;
  background:var(--bp-accent-soft);border:1px solid #ecdcc0;color:#6b5322;
}

/* A payroll row is sixteen columns wide and will not fold. It scrolls inside its
   own card rather than pushing the page sideways. */
.bp-table-scroll{overflow-x:auto}
.bp-table-scroll .bp-table{min-width:1100px}

/* Mbyllja e ditës: what stays in the drawer, said while it is still being typed.
   The one line that makes «numëruar» impossible to read as «sa po marr». */
.bp-stays{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding:10px 13px;border-radius:8px;
  background:var(--bp-grey-100);border:1px solid var(--bp-grey-200);
}
.bp-stays__label{font-size:12.5px;font-weight:600;color:var(--bp-grey-700)}
.bp-stays__value{font-size:16px;font-weight:700;color:var(--bp-ink)}
.bp-stays__value.is-bad{color:var(--bp-bad)}
.bp-warn-box{
  display:flex;gap:9px;margin-top:9px;padding:9px 12px;border-radius:8px;
  background:var(--bp-accent-soft);border:1px solid #ecdcc0;
  color:#6b5322;font-size:12px;line-height:1.5;
}
.bp-warn-box i{flex:0 0 auto;margin-top:1px}

/* Tërheqja e një faze te bordi i P6 — e ngushtë dhe e qetë, se është përjashtim. */
.bp-wo__undo{margin-top:7px;padding-top:7px;border-top:1px dashed var(--grey200)}
.bp-wo__undo input{font-size:11.5px}
.bp-wo__undo .btn{font-size:11.5px}

/* ── Telefoni dhe tableti ─────────────────────────────────────────────────────
   Under 992px the sidebar would take half a phone's width, so it becomes a
   drawer opened from the ☰ in the top bar. Wide tables scroll inside their own
   card (base.html wraps every .bp-table that is not already wrapped), so the
   page itself never scrolls sideways. Desktop is untouched: nothing here applies
   above 992px. */
.bp-menu-btn{display:none}
.bp-backdrop{display:none}
@media (max-width:991.98px){
  .bp-sidebar{
    position:fixed;left:0;top:0;bottom:0;height:100%;z-index:1050;
    transform:translateX(-100%);transition:transform .22s ease;
    width:min(280px,85vw);flex-basis:auto;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  }
  body.bp-nav-open .bp-sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.bp-nav-open{overflow:hidden}
  .bp-backdrop{
    display:block;position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  body.bp-nav-open .bp-backdrop{opacity:1;pointer-events:auto}
  .bp-menu-btn{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:38px;height:38px;border:1px solid var(--bp-grey-200);border-radius:8px;
    background:#fff;font-size:20px;color:var(--bp-ink);
  }
  .bp-topbar{
    flex-wrap:wrap;gap:8px 10px;padding:10px 14px;
    padding-left:max(14px,env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px));
  }
  .bp-topbar > .flex-grow-1{min-width:0;flex:1 1 calc(100% - 100px)}
  .bp-topbar__title{font-size:15px;line-height:1.25}
  .bp-topbar > .btn,.bp-topbar > a.btn,.bp-topbar > form{flex:0 0 auto}
  .bp-content{
    padding:14px 12px 48px;
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
  }
  .bp-table-scroll,.bp-autoscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bp-autoscroll > .bp-table{min-width:560px}
  .bp-table th,.bp-table td{white-space:nowrap}
  .bp-kpi__value{font-size:18px}
  .bp-bell__menu{width:min(340px,calc(100vw - 24px))}
  .dropdown-menu{max-width:calc(100vw - 24px)}
  /* iOS zooms into any field under 16px when it is tapped. */
  .form-control,.form-select,.form-control-sm,.form-select-sm{font-size:16px}
  .btn{white-space:nowrap}
  /* Day close: the three-column ledger fits a phone once its labels may wrap. */
  .bp-ledger__lbl{white-space:normal;padding-right:10px!important}
  .bp-ledger__why{padding-left:8px!important}
  .bp-ledger__n{white-space:nowrap}
  /* Order form: «0.00 €» on one line in the total bar. */
  .bp-total-bar .val{white-space:nowrap;font-size:18px}
}