/* Minimāls kastoms virs tīra Bootstrap 5. Tablet-first, lielas tač-cēli. */

body {
  background: #f6f7f9;
}

/* Навбар: ниже по высоте (~-15%); базовые линии текста выровнены. */
.navbar {
  padding-top: 3px;
  padding-bottom: 3px;
}
/* Бренд — того же размера, что и пункты меню (nav-link, 1rem). */
.navbar-brand {
  font-size: 1rem;
}
.navbar .container-fluid {
  align-items: baseline;
}
.navbar-username-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* Aktīvā lapa navbārā: lapām pašām virsraksta nav, tāpēc atvērto sadaļu rāda
   izceltais izvēlnes punkts (gaiša "tablete" + balts treknraksts). */
.navbar .nav-link.active {
  color: #fff !important;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

/* Hamburgers: container-fluid līdzina pa bāzes līniju, bet pogai teksta nav —
   centrējam to pret brendu un dodam tač-izmēru. */
.navbar-toggler {
  align-self: center;
  padding: 6px 10px;
  border-color: rgba(255, 255, 255, 0.25);
}
.navbar-toggler:focus {
  box-shadow: none;
}
/* Saliektā izvēlne (telefons): punkti kolonnā ar elpu starp tačiem. */
@media (max-width: 767.98px) {
  .navbar-collapse .navbar-nav .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .navbar-collapse .navbar-nav {
    align-items: flex-start;
  }
  .navbar-collapse .lang-switch {
    padding-bottom: 0.25rem;
  }
}

/* ── Kārtojamas kolonnas (pavadzīmju saraksts + arhīvs). ──
   Virsraksts ir poga; aktīvajai kolonnai blakus parādās bultiņa (▲/▼). */
.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sortable:hover {
  background: rgba(0, 0, 0, 0.04);
}
.sortable.sorted {
  color: #0d6efd;
}
.sort-ind {
  font-size: 0.7em;
  margin-left: 0.35em;
  vertical-align: 1px;
}

/* Numura prefikss stāv darbību joslā blakus "Excel" — bez uzraksta un šaurs
   (garāks lauks nevajadzīgi izstieptu rindu). */
.prefix-input {
  width: 120px;
}

/* Darbību josla /invoices: viens augstums visiem elementiem (poga/ievade/select),
   citādi josla izskatās nelīdzena (.prefix-input un .form-select bija atšķirīgā
   augstumā ar pogām). 38px = Bootstrap `.form-control` dabiskais augstums; pogas
   uz to noved kopīgais `.btn` noteikums zemāk. Ar `height: 38px` (nevis
   min-height) pogas palika 48px — min-height uzvar pār height — un josla kļuva
   vēl nelīdzenāka. */
.action-bar .btn,
.action-bar .form-control,
.action-bar .form-select {
  min-height: 38px;
}

/* "Arhivēt" outline-poga ar tumšu tekstu — btn-outline-secondary dod pelēku
   uzrakstu, ko grūti nolasīt blakus zaļajai "Excel". Krāsu liekam caur Bootstrap
   mainīgajiem, nevis `color:` — `.btn:disabled` (0,2,0) uzvarētu pār `.btn-archive`
   (0,1,0), un neaktīvā poga (tā ir noklusējuma stāvoklis, kamēr nekas nav atzīmēts)
   paliktu pelēka. */
.btn-archive {
  --bs-btn-color: #212529;
  --bs-btn-disabled-color: #212529;
}

/* Pogas augstums = ievadlauka augstums (Bootstrap `.form-control` = 38px), lai
   visās lapās poga un lauks blakus izskatītos vienā līmenī (īpašnieka lēmums
   02.08.2026). Tač-cēli, kas svarīgi uz planšetes — daudzuma steperis un dzēšanas
   poga saskaņošanas ekrānā — savu izmēru nosaka paši zemāk (38px augstums,
   52–56px platums), tāpēc kopīgā 48px grīda tos neietekmēja. */
.btn {
  min-height: 38px;
  touch-action: manipulation;
  vertical-align: middle;
  /* min-height uz inline-block pogas neizlīdzina tekstu vertikāli (paliek augšā);
     inline-flex + center novieto uzrakstu/ikonu tieši pogas centrā. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.input-group > .btn,
.navbar .btn {
  min-height: unset;
}

.btn [class^="bi-"],
.btn [class*=" bi-"] {
  margin-right: 5px;
}

.btn-sm {
  min-height: 38px;
}

/* ── Saskaņošanas ekrāns (Screen 4) — pēc prototypes/invoice-edit.html ── */
:root {
  --photo: 88px;
}

.item-photo {
  width: var(--photo);
  height: var(--photo);
  flex: 0 0 var(--photo);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9f3ec;
  color: #4c8c5e;
  font-size: 2rem;
  overflow: hidden;
}
.item-photo.no-photo {
  background: #eceef1;
  color: #aeb4bc;
  font-size: 1.6rem;
}
.item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Quantity stepper ── */
.input-group.qty-group {
  width: 172px;
  flex: 0 0 172px;
  flex-wrap: nowrap !important;
}

.qty-group .btn {
  width: 52px;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
  touch-action: manipulation;
  user-select: none;
}

.qty-group .form-control {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  box-shadow: none !important;
}

/* Stepper height must match the delete button (btn-sm floor = 38px). The
   `.input-group > .btn { min-height: unset }` rule above strips that floor from
   the stepper buttons (they are direct input-group children), collapsing them
   to content height, so re-assert it on the qty controls. */
.input-group.qty-group,
.input-group.qty-group > .btn,
.input-group.qty-group > .form-control {
  min-height: 38px;
}

.item-name {
  word-break: break-word;
}

/* ── Kompaktas pozīciju rindas (backlog #14) — vairāk pozīciju uz planšetes. ── */
.item-compact {
  --photo: 68px;
}
.item-compact .card-body {
  padding: 0.5rem 0.75rem;
}
.item-compact .item-photo {
  border-radius: 0.4rem;
  font-size: 1.5rem;
}
.item-compact .item-photo.no-photo {
  font-size: 1.25rem;
}
/* Šaurāks daudzuma stepperis — kompakts variants. */
.item-compact .input-group.qty-group {
  width: 152px;
  flex: 0 0 152px;
}
.item-compact .qty-group .btn {
  width: 42px;
  font-size: 1.15rem;
}
.item-compact .act-btn {
  width: 48px;
  flex: 0 0 48px;
}

/* Fiksēts, vienāds platums abiem stāvokļiem (dzēst/atjaunot) — lai daudzuma
   bloks un poga sakrīt visās rindās. Poga ir tikai ikona (uzraksts —
   title/aria-label), tāpēc tā neizspiež nosaukuma kolonnu uz šaura ekrāna. */
.act-btn {
  width: 56px;
  flex: 0 0 56px;
  white-space: nowrap;
}
/* Ikona ir vienīgais pogas saturs — kopīgā .btn ikonas atkāpe to nocentrētu
   nepareizi. */
.act-btn [class^="bi-"],
.act-btn [class*=" bi-"] {
  margin-right: 0;
  font-size: 1.05rem;
}

/* ── Item card ── */
.item {
  border-radius: 10px !important;
}

/* ── Skats "bez foto" (backlog #4): kompakta divu kolonnu rinda ──
   Slēpj foto, uzblīvē kartīti, svītrkods monoplatuma; nosaukums un svītrkods
   divās kolonnās. Mīksti dzēstās rindas paliek pārsvītrotas (kopīgais .is-removed). */
.view-compact .item-photo {
  display: none;
}
.view-compact .item .card-body {
  padding: 0.35rem 0.6rem;
}
.view-compact .item-main {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.view-compact .item-code {
  order: -1;               /* svītrkods pirmajā kolonnā, monoplatuma */
  flex: 0 0 auto;
  min-width: 13ch;
  font-family: var(--bs-font-monospace, monospace);
}
/* Sarakstā rindas identificē svītrkods; nosaukums — vienā rindā ar "…"
   (garie nosaukumi citādi izplešas uz 3-4 rindām un saraksts vairs nav
   kompakts). Pilns nosaukums pieejams title/foto skatā. */
.view-compact .item-name-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Item photo — no frame around product photos ── */
.item-photo.no-photo {
  border: 1.5px dashed #c8cdd3;
}

/* ── Delete / restore button — tight and deliberate ── */
.act-btn {
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  text-transform: uppercase;
  border-width: 2px !important;
}

/* Mīksti dzēsta pozīcija: pelēka, pārsvītrota, bet redzama. */
.item.is-removed {
  opacity: 0.6;
}
.item.is-removed .item-name {
  text-decoration: line-through;
}
/* Pārsvītro arī daudzumu (ne tikai nosaukumu): read-only skaitli un
   redaktora (atspējoto) steppera ievadlauku. */
.item.is-removed .qty-group:not(.input-group),
.item.is-removed .qty-group .qty {
  text-decoration: line-through;
}
.item.is-removed .item-photo {
  filter: grayscale(1);
  background: #eceef1;
  color: #c2c7ce;
}

/* Melnrakstu sānu panelis (landšaftā fiksēta, portretā — offcanvas). */
.drafts-panel {
  width: 288px;
  flex: 0 0 288px;
}
.draft-item-active {
  background: #dbeafe;
  border-color: #cfe2ff;
  color: #1e3a5f;
}
.draft-item-active .draft-city {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a5f;
}
.draft-item-active .draft-number {
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
}
.draft-item-active .draft-badge {
  font-size: 15px;
  font-weight: 700;
  color: #1e3a5f;
}

/* ── Palešu skaitītāji (120×80 / 60×80) saskaņošanas galvenē. ── */
.pallets {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.pallet-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.pallet-size {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  text-align: center;
  line-height: 1.2;
}
.pallet-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pallet-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1;
  padding: 0;
}
.pallet-btn:active {
  background: #e5e7eb;
}
.pallet-count {
  font-size: 20px;
  font-weight: 600;
  min-width: 26px;
  text-align: center;
}
.pallet-count-zero {
  color: #d1d5db;
}
.pallet-count-set {
  color: #2d3142;
}

/* ── Iepakojuma (transporta taras) panelis virs pozīcijām. ── */
.packaging {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 12px;
}
/* Kopsvars stāv taras vienību rindas augšmalā (kā agrāk virsraksta rindā), nevis
   centrā pa vertikāli. */
.packaging-total {
  font-weight: 600;
  color: #4b5563;
  align-self: flex-start;
}
.pkg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
}
.pkg-name {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  text-align: center;
  line-height: 1.2;
}
.pkg-weight {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  line-height: 1.1;
}
.pkg-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pkg-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: none;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1;
  padding: 0;
}
.pkg-btn:active {
  background: #e5e7eb;
}
.pkg-count {
  font-size: 20px;
  font-weight: 600;
  min-width: 26px;
  text-align: center;
}
.pkg-count-zero {
  color: #d1d5db;
}
.pkg-count-set {
  color: #2d3142;
}

/* Itogi pielīp pie ekrāna apakšas. */
.app-totals {
  position: sticky;
  bottom: 0;
  z-index: 1020;
}

/* ── Šaurs ekrāns (~600px, planšete portretā): galvenes elementi nepārklājas.
   Navbara lietotājvārds tiek slēpts iekš base.html (d-none d-md-inline), lai
   absolūti centrētais bloks nenāk virsū kreisajiem/labajiem punktiem. ── */
@media (max-width: 767.98px) {
  /* Galamērķa bloks aizņem visu rindas platumu, tā ka pogas kārtīgi pārnesas
     uz nākamo rindu, nevis saspiežas/pārklājas ar galveni. */
  .invoice-header > .me-auto {
    flex: 1 1 100%;
  }
  /* Iepakojuma panelis uz šaura ekrāna: taras vienības aizņem pilnu platumu
     un centrējas, lai steppери netiek saspiesti. */
  .packaging-items {
    justify-content: center;
  }
}

/* ── Telefons (≤575px): pozīciju rinda pārnesas divās joslās. ──
   Uz telefona fiksētie elementi (foto 68 + stepperis 152 + poga 56 + atstarpes)
   aizņem gandrīz visu platumu, tāpēc nosaukuma kolonnai atlika ~1 rakstzīme un
   nosaukums tika zīmēts vertikāli, bet poga izbira ārpus ekrāna. Nosaukums
   paliek pirmajā joslā, vadīklas pārnesas uz otro un līdzinās pa labi. */
@media (max-width: 575.98px) {
  .item > .card-body {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  /* Pietiekami liels flex-basis, lai stepperis vairs neiekļaujas pirmajā joslā
     (citādi tas paliek rindā un atkal saspiež nosaukumu līdz nullei). */
  .item-main {
    flex: 1 1 55%;
  }
  /* Sarakstā (bez foto) nosaukumam+svītrkodam pieder visa pirmā josla. */
  .view-compact .item-main {
    flex: 1 1 100%;
  }
  .item > .card-body > .qty-group {
    margin-left: auto;
  }
}

/* ── Katalogs: svītrkoda pievienošana. ──
   Ievades lauks pēc noklusējuma paslēpts aiz "+" pogas (<summary>), lai katrai
   rindai nepiederētu tukšs, vienmēr redzams inputs — atveras tikai pēc klikšķa. */
.barcode-add {
  display: inline-flex;
  align-items: center;
}
.barcode-add > summary {
  list-style: none;
  cursor: pointer;
}
/* `summary.btn` beats plain `.btn.btn-sm` (equal class count, but this
   selector also carries the `summary` type selector, so its specificity is
   strictly higher regardless of source order). Needed because `.btn.btn-sm`
   sets its own padding/font-size/border-radius that would otherwise silently
   win and make this button bigger than the svītrkods chip next to it. The
   project's own `.btn`/`.btn-sm` rules above (touch-target accessibility)
   also set a 38px `min-height` that plain `height` can't beat — min-height
   wins over height per CSS box rules regardless of specificity, so it must
   be overridden explicitly too. Border color is pinned to the same
   `--bs-border-color` the svītrkods chip's `.border` utility uses — the
   outline-secondary default (`--bs-secondary-color`, darker) made the button
   read as bigger/heavier than the chip even at identical pixel size. */
.barcode-add > summary.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  min-width: 1.375rem;
  min-height: 1.375rem;
  padding: 0;
  border-radius: 0.375rem;
  border-color: var(--bs-border-color);
  line-height: 1;
}
/* Icon-only button: the generic `.btn [class^="bi-"]` rule reserves 5px on
   the right for icon+text buttons, which pushed this bare plus off-center.
   Even with that removed, the bi-plus-lg glyph's own ink isn't centered in
   its em-box (measured ~0.375px right / 1px up of true center at 8x-scale
   pixel level) — nudge the glyph itself to compensate. */
.barcode-add > summary.btn i {
  margin-right: 0;
  transform: translate(-0.375px, 1px);
}
.barcode-add > summary::-webkit-details-marker {
  display: none;
}
.barcode-add > summary i {
  pointer-events: none;
}