:root {
  color-scheme: light;
  --ink: #20231f;
  --muted: #66706a;
  --line: #d9ded8;
  --paper: #fbfbf8;
  --panel: #ffffff;
  --accent: #285f52;
  --accent-dark: #1f4d43;
  --gold: #b78846;
  --rose: #f3e6df;
  --blue: #e5edf0;
  --control-height: 38px;
  --control-padding: 8px 10px;
  --hub-module-header-min-height: 78px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.fileButton {
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  cursor: pointer;
}

.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.primary:hover {
  background: var(--accent-dark);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 2px solid #d29f46;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
  box-shadow: 0 1px 0 rgba(12, 28, 54, 0.04);
}

.topbarBrand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.topbarLogo {
  display: block;
  height: 62px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  flex-shrink: 0;
}

.topbarCopy {
  min-width: 0;
}

.topbarCopy h1 {
  font-size: 20px;
  font-weight: 600;
  color: #0c1c36;
  line-height: 1.2;
}

.topbarVersion {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #d5dbe3;
  background: #f4f6f8;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

.topbarVersion.topbarUpdate {
  margin-left: 6px;
  border-color: #e8c878;
  background: #fff6e6;
  color: #5c3d00;
  max-width: min(52vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbarVersion.topbarUpdate.hidden {
  display: none;
}

.topbarUpdateAction {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  vertical-align: baseline;
}

.topbarUpdateAction:hover {
  color: #3d2800;
}

.topbarCopy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.topbarActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
}

.topbarNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.navBtn {
  border: 1px solid var(--line);
  background: #fff;
  color: #0c1c36;
  font-weight: 500;
}

.navBtn:hover {
  border-color: #c9b48a;
  background: #faf8f3;
}

.navBtn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.appView {
  display: none;
}

.appView.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#quotesView.is-active > .layout {
  flex: 1 1 auto;
  min-height: 0;
}

.customersLayout {
  padding: 18px;
  height: calc(100vh - 84px);
  overflow: hidden;
  min-height: 0;
}

.customersPanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.customersHeader,
.nabavkeHeader {
  min-height: var(--hub-module-header-min-height);
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #fafaf8;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.customersHeader h2,
.nabavkeHeader h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0c1c36;
  line-height: 1.2;
}

.customersHeader #customerCount,
.customersHeader #financeSupplierCount,
.customersHeader #magacinStockCount,
.nabavkeHeader #nabavkeOrderCount {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  min-height: calc(13px * 1.35);
}

.customersToolbarActions,
.customerFormActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.customersPanel .toolbarBtnFixed {
  width: auto;
  min-width: 108px;
  max-width: none;
  font-size: 12px;
  font-weight: 400;
  min-height: var(--control-height);
  height: var(--control-height);
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.customersBody {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.customersListPane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
  background: #fcfcfa;
}

.customerListSearchRow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.customerListSearchRow input[type="search"] {
  flex: 1;
  min-width: 0;
  width: auto;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.customerFilterReset {
  flex: 0 0 var(--control-height);
  width: var(--control-height);
  min-width: var(--control-height);
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: var(--muted);
}

.customerFilterReset:hover {
  color: var(--ink);
  border-color: #c9b48a;
  background: #f8f7f4;
}

.customerListFilters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.customerListFilters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.customerListFilters select {
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.customerListPhaseFilter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
  min-width: 0;
}

.customerListPhaseFilterLabel {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
}

.customerListPhaseOptions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

.customerListPhaseOption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.customerListPhaseOption input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.customerList {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customerList li {
  margin: 0;
}

.customerList button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.customerListDocAlert {
  display: inline;
  margin-right: 4px;
  color: #c98a2e;
  font-size: 14px;
  line-height: 1.35;
  vertical-align: 0;
}

.customerList button:hover {
  border-color: #c9b48a;
}

.customerList button.is-selected {
  border-color: var(--accent);
  background: #f8f3ea;
}

.customerList strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #0c1c36;
}

.customerList button > span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.customerForm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.customerFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.customerFormRow--identity {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.customerFormRow--contact,
.customerFormRow--meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.customerFormRow--meta {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.customerFormRow--meta .customerRegionField,
.customerFormRow--meta .customerMainCategoryField,
.customerFormRow--meta .customerCategoryField,
.customerFormRow--meta .customerStageField,
.customerFormRow--meta .customerProbabilityField {
  grid-column: span 2;
}

.customerProbabilityScale {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: var(--control-height);
  min-height: var(--control-height);
}

.customerProbabilityTick {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 1px solid #d5dbe3;
  border-radius: 5px;
  background: #f7f8fa;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1;
  user-select: none;
}

.customerProbabilityTick.is-active {
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}

.customerProbabilityTick.is-active[data-value="0"] {
  background: #9aa3ad;
}

.customerProbabilityTick.is-active[data-value="5"] {
  background: #9aa3ad;
}

.customerProbabilityTick.is-active[data-value="10"] {
  background: #4a90c4;
}

.customerProbabilityTick.is-active[data-value="25"] {
  background: #d29f46;
}

.customerProbabilityTick.is-active[data-value="50"] {
  background: #6b5b95;
}

.customerProbabilityTick.is-active[data-value="100"] {
  background: #2f7a4f;
}

.customerCityField .customerCityOther {
  margin-top: 6px;
}

.customerCityField .customerCityOther.hidden {
  display: none;
}

.customerFormGrid label,
.customerFormRow--identity label,
.customerFormRow--contact label,
.customerFormRow--meta label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.customerFormGrid input,
.customerFormGrid select,
.customerFormGrid textarea {
  min-height: var(--control-height);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}

.supplierRightPane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#customersView .customersBody {
  position: relative;
}

#customersView .customersListPane {
  border-right: none;
}

#customersView .supplierRightPane {
  margin-top: calc(-1 * var(--hub-module-header-min-height));
  min-height: calc(100% + var(--hub-module-header-min-height));
  border-left: 1px solid var(--line);
  background: #fff;
}

#suppliersView .customersBody {
  position: relative;
}

#suppliersView .customersListPane {
  border-right: none;
}

#suppliersView .supplierRightPane {
  margin-top: calc(-1 * var(--hub-module-header-min-height));
  min-height: calc(100% + var(--hub-module-header-min-height));
  border-left: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

#suppliersView .supplierSubTabs {
  flex-shrink: 0;
}

#suppliersView .supplierKufPanel:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#suppliersView .supplierKufPanel > .customerKufActions,
#suppliersView .supplierKufPanel > .supplierKufSharepointBusy,
#suppliersView .supplierKufPanel > .supplierKufStatus {
  flex-shrink: 0;
}

#suppliersView .supplierKufSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#suppliersView .supplierKufHeading,
#suppliersView .supplierKufFiltersWrap,
#suppliersView #supplierKufEmpty {
  flex-shrink: 0;
}

#suppliersView .supplierKufTableScroll {
  flex: 1 1 0;
  min-height: 220px;
  max-height: min(58vh, 600px);
  overflow: auto;
  overscroll-behavior: contain;
  margin-bottom: 0;
}

#suppliersView .supplierKufTableScroll .customerQuotesTable.supplierKufTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

#magacinView .customersBody {
  position: relative;
}

#magacinView .customersListPane {
  border-right: none;
}

#magacinView .supplierRightPane {
  margin-top: calc(-1 * var(--hub-module-header-min-height));
  min-height: calc(100% + var(--hub-module-header-min-height));
  border-left: 1px solid var(--line);
  background: #fff;
}

#magacinView .magacinStatus,
#suppliersView .supplierKufStatus {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

#magacinView .magacinStatus.is-error,
#suppliersView .supplierKufStatus.is-error {
  color: #b42318;
}

#magacinView .magacinStockSection,
#suppliersView .supplierKufSection {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

#magacinView .magacinStockSection .magacinStockHeading,
#suppliersView .supplierKufSection .supplierKufHeading {
  margin-bottom: 14px;
}

#suppliersView .supplierKufHeading .customerQuotesHeaderMain {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}

.supplierKufHeaderDivider {
  width: 1px;
  height: 14px;
  background: var(--line);
  flex-shrink: 0;
}

.supplierKufHeaderDivider.hidden {
  display: none;
}

.supplierKufSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}

.supplierKufSummary.hidden {
  display: none;
}

.supplierKufSummaryItem strong {
  color: #0c1c36;
  font-weight: 600;
}

.supplierKufSummaryDiff.is-match strong,
.supplierKufSummaryDiff.is-overpaid strong {
  color: #2e7d32;
}

.supplierKufSummaryDiff.is-underpaid strong {
  color: #e65100;
}

#suppliersView tr.supplierKufLedgerPayment {
  background: #fafbf8;
}

#suppliersView tr.supplierKufLedgerPayment.supplierKufLedgerIncoming {
  background: #f8fbff;
}

#suppliersView tr.supplierKufLedgerPayment.supplierKufLedgerIncoming .supplierKufLedgerKindBadge {
  background: #e8f0fa;
  color: #2c5282;
}

#suppliersView .supplierKufLedgerKindBadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2e5c8a;
  background: #e8f1f8;
  vertical-align: middle;
}

#suppliersView .supplierKufLedgerPaymentLabel {
  vertical-align: middle;
}

#suppliersView .supplierKufLedgerMuted {
  color: var(--muted);
}

#suppliersView .supplierKufLedgerPaymentAmount {
  color: #2e5c8a;
  font-weight: 600;
}

#magacinView .hubPanelFiltersWrap,
#suppliersView .hubPanelFiltersWrap,
#financeAppPanel .financeInvoicesFiltersWrap.hubPanelFiltersWrap {
  margin: 0 -16px 16px;
  padding: 16px;
  background: #fcfcfa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --field-label-height: 16px;
  --panel-label-gap: 10px;
  --panel-block-gap: 16px;
  --panel-form-row-height: calc(var(--field-label-height) + var(--panel-label-gap) + var(--control-height));
}

#financeAppPanel .financeInvoicesFiltersWrap.hubPanelFiltersWrap {
  margin: 0 0 16px;
}

#magacinView .hubPanelFiltersWrap .catalogueControls.magacinStockFilters,
#suppliersView .hubPanelFiltersWrap .catalogueControls.supplierKufFilters,
#financeAppPanel .financeInvoicesFiltersWrap .catalogueControls.financeInvoicesFilters {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 0;
}

#magacinView .hubPanelFiltersWrap .catalogueControls .filters,
#suppliersView .hubPanelFiltersWrap .catalogueControls .filters,
#financeAppPanel .financeInvoicesFiltersWrap .catalogueControls .filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#magacinView .hubPanelFiltersWrap .catalogueFilterBlock,
#magacinView .hubPanelFiltersWrap .cataloguePriceBlock,
#suppliersView .hubPanelFiltersWrap .catalogueFilterBlock,
#suppliersView .hubPanelFiltersWrap .cataloguePriceBlock,
#financeAppPanel .financeInvoicesFiltersWrap .catalogueFilterBlock {
  margin: 0;
}

#magacinView .hubPanelFiltersWrap .filterRowsSelects .catalogueFilterField,
#magacinView .hubPanelFiltersWrap .filterRowsPrices > label,
#magacinView .hubPanelFiltersWrap .filterRowsPrices .priceRangeField,
#magacinView .hubPanelFiltersWrap .filterRowsPrices .filterSearchField,
#suppliersView .hubPanelFiltersWrap .filterRowsSelects .catalogueFilterField,
#suppliersView .hubPanelFiltersWrap .filterRowsPrices > label,
#suppliersView .hubPanelFiltersWrap .filterRowsPrices .priceRangeField,
#suppliersView .hubPanelFiltersWrap .filterRowsPrices .filterSearchField,
#suppliersView .hubListFiltersWrap .filterRowsSelects .catalogueFilterField,
#financeAppPanel .financeInvoicesFiltersWrap .filterRowsSelects .catalogueFilterField {
  display: grid;
  grid-template-rows: var(--field-label-height) var(--control-height);
  gap: var(--panel-label-gap);
  margin: 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

#magacinView .hubPanelFiltersWrap .catalogueFilterField span,
#magacinView .hubPanelFiltersWrap .filterRowsPrices label > span,
#magacinView .hubPanelFiltersWrap .filterRowsPrices .priceRangeField > span,
#magacinView .hubPanelFiltersWrap .filterSearchField > span,
#suppliersView .hubPanelFiltersWrap .catalogueFilterField span,
#suppliersView .hubPanelFiltersWrap .filterRowsPrices label > span,
#suppliersView .hubPanelFiltersWrap .filterRowsPrices .priceRangeField > span,
#suppliersView .hubPanelFiltersWrap .filterSearchField > span,
#suppliersView .hubListFiltersWrap .catalogueFilterField span,
#financeAppPanel .financeInvoicesFiltersWrap .catalogueFilterField span {
  display: flex;
  align-items: center;
  min-height: var(--field-label-height);
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

#magacinView .hubPanelFiltersWrap .filterRowsPrices .resetFilters.quoteActionBtn,
#suppliersView .hubPanelFiltersWrap .filterRowsPrices .resetFilters.quoteActionBtn,
#suppliersView .hubPanelFiltersWrap .supplierKufFilterRow .resetFilters.quoteActionBtn,
#financeAppPanel .financeInvoicesFiltersWrap .financeInvoicesFilterRow .resetFilters.quoteActionBtn {
  margin-top: calc(var(--field-label-height) + var(--panel-label-gap));
}

#suppliersView .hubPanelFiltersWrap.hidden {
  display: none;
}

#suppliersView .supplierKufFilters .supplierKufFilterRow.filterRowsSelects {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

#suppliersView .supplierKufKindFilterField .financeFilterRadioGroup {
  width: 100%;
  min-width: 0;
}

#suppliersView .hubListFiltersWrap {
  margin: 0 -16px;
  padding: 16px;
  background: #fcfcfa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --field-label-height: 16px;
  --panel-label-gap: 10px;
}

#suppliersView .hubListFiltersWrap .hubListFilters.filterRowsSelects {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

#magacinView .customerQuotesTable.magacinStockTable {
  min-width: 1180px;
}

#magacinView .customerQuotesTable.magacinStockTable thead th,
#suppliersView .customerQuotesTable.supplierKufTable thead th {
  padding: 0;
}

#magacinView .magacinStockSortBtn,
#suppliersView .supplierKufSortBtn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 10px 12px;
  border: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

#magacinView .magacinStockSortBtn:hover,
#magacinView .magacinStockSortBtn.is-active,
#suppliersView .supplierKufSortBtn:hover,
#suppliersView .supplierKufSortBtn.is-active {
  color: #0c1c36;
}

#magacinView .customerQuotesTable.magacinStockTable th.num .magacinStockSortBtn,
#suppliersView .customerQuotesTable.supplierKufTable th.num .supplierKufSortBtn {
  justify-content: flex-end;
  text-align: right;
}

.supplierKufPanel .customerDocMetaPreview.is-negative,
#suppliersView .customerQuotesTable.supplierKufTable td.num .customerDocMetaPreview.is-negative {
  color: #9a3b2e;
}

.supplierKufPanel .customerDocMetaPreview.is-amount-mismatch,
#suppliersView .customerQuotesTable.supplierKufTable td.num .customerDocMetaPreview.is-amount-mismatch {
  color: #c62828;
  font-weight: 700;
}

.supplierKufStornoBadge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f3e8e6;
  color: #9a3b2e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.supplierKufStorniranaBadge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eceff3;
  color: #4a5d73;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.supplierKufStornoRef {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #9a3b2e;
  vertical-align: middle;
  white-space: nowrap;
}

.customerQuoteStatus.is-storno-payment {
  background: #f3e8e6;
  color: #9a3b2e;
}

.supplierSubTabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.supplierSubTab {
  margin: 0;
  padding: 12px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.supplierSubTab.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  background: #fff;
}

.supplierSubPanel {
  flex: 1;
  min-height: 0;
}

.supplierKufPanel {
  margin: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.customerForm.supplierSubPanel,
.customerKifPanel,
.supplierKufPanel {
  padding-top: 0;
}

.customerKifPanel,
.customerDocumentsPanel,
.supplierKufPanel {
  margin: 0;
  padding: 0 16px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  overflow: auto;
}

.customerForm.supplierSubPanel > .customerPodaciActions,
.customerKifPanel > .customerKifActions,
.customerDocumentsPanel > .customerDocumentsActions,
.supplierKufPanel > .customerKufActions {
  margin-top: 0;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.supplierKufPanel > .customerQuotesSection,
.supplierKufPanel > .supplierKufSection {
  margin-top: 0;
}

.customerKifPanel > .customerQuotesSection,
.customerKifPanel > .customerKifSection,
.customerDocumentsPanel > .customerDocumentsSection {
  margin-top: 0;
}

.customerKifSection,
.customerDocumentsSection {
  margin-top: 0;
}

.customerKifTable tbody tr {
  cursor: pointer;
}

.customerKifTable tbody tr.is-selected td {
  background: #f8f3ea;
}

.customerKifTable tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

.customerKifTable tbody tr.is-selected:hover td {
  background: #f3ebdc;
}

.customerKifPathHint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted, #666);
  line-height: 1.4;
}

.customerKifPathFileLabel {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.customerKifPathField {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.customerKifPathFieldLabel {
  font-size: 0.8125rem;
  font-weight: 600;
}

.customerKifSource {
  font-size: 12px;
  color: var(--muted);
}

.customerList button.stage-Lead {
  border-left: 3px solid #9aa3ad;
}

.customerList button.stage-Contacted {
  border-left: 3px solid #4a90c4;
}

.customerList button.stage-Qualified {
  border-left: 3px solid #d29f46;
}

.customerList button.stage-Won {
  border-left: 3px solid #2f7a4f;
}

.customerList button.stage-Fridge {
  border-left: 3px solid #7a8a99;
}

.customerList button.stage-Proposal-made,
.customerList button.stage-Lost {
  border-left: 3px solid #9aa3ad;
}

.customerList button.stage-Proposal-made {
  border-left-color: #6b5b95;
}

.customerNotesField {
  grid-column: 1 / -1;
}

.customerFormActions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.customerFormActions--quotes {
  margin-top: 8px;
  padding-top: 8px;
}

.customerFormActions--quotes:not(.customerPodaciActions) {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.customerPodaciActions,
.customerKifActions,
.customerDocumentsActions,
.customerKufActions {
  margin-top: 0;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: none;
  border-bottom: 1px solid var(--line);
}

/* Kupci + Dobavljači Podaci: keep rows aligned (5 cols row 2, meta span 2, shared label/control heights). */
#customerForm[data-customer-panel="podaci"],
#financeSupplierForm[data-supplier-panel="podaci"] {
  --podaci-label-line: 17px;
  --podaci-label-gap: 6px;
  --podaci-control-height: 34px;
  --podaci-label-block-height: calc(
    var(--podaci-label-line) + var(--podaci-label-gap) + var(--podaci-control-height)
  );
}

#customerForm[data-customer-panel="podaci"] .customerFormGrid,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormGrid {
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1.2fr);
  gap: 8px 14px;
  align-items: start;
}

#customerForm[data-customer-panel="podaci"] .customerFormRow--identity,
#customerForm[data-customer-panel="podaci"] .customerFormRow--contact,
#customerForm[data-customer-panel="podaci"] .customerFormRow--meta,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--identity,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--contact,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--meta {
  grid-column: 1;
  gap: 8px 12px;
  align-items: start;
}

#customerForm[data-customer-panel="podaci"] .customerFormRow--contact,
#customerForm[data-customer-panel="podaci"] .customerFormRow--meta,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--contact,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--meta {
  min-height: var(--podaci-label-block-height);
}

#customerForm[data-customer-panel="podaci"] .customerFormRow--contact label,
#customerForm[data-customer-panel="podaci"] .customerFormRow--meta label,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--contact label,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--meta label {
  min-height: var(--podaci-label-block-height);
  align-content: start;
}

#financeSupplierForm[data-supplier-panel="podaci"] .customerFormRow--meta label {
  grid-column: span 2;
}

#customerForm[data-customer-panel="podaci"] .customerNotesField,
#financeSupplierForm[data-supplier-panel="podaci"] .customerNotesField {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#customerForm[data-customer-panel="podaci"] .customerNotesField textarea,
#financeSupplierForm[data-supplier-panel="podaci"] .customerNotesField textarea {
  min-height: 0;
  height: 100%;
  flex: 1;
}

#customerForm[data-customer-panel="podaci"] .customerFormGrid input:not([type="hidden"]),
#customerForm[data-customer-panel="podaci"] .customerFormGrid select,
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormGrid input:not([type="hidden"]),
#financeSupplierForm[data-supplier-panel="podaci"] .customerFormGrid select {
  height: var(--podaci-control-height);
  min-height: var(--podaci-control-height);
  box-sizing: border-box;
}

#customerForm[data-customer-panel="podaci"] .customerNotesField textarea,
#financeSupplierForm[data-supplier-panel="podaci"] .customerNotesField textarea {
  min-height: var(--podaci-control-height);
}

.customerFormField--spacer {
  visibility: hidden;
  pointer-events: none;
  min-height: var(--podaci-label-block-height);
}

.customerFormField--spacer .customerFormSpacerInput {
  height: var(--podaci-control-height);
  min-height: var(--podaci-control-height);
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.customerQuotesSection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#customerForm[data-customer-panel="podaci"] .customerQuotesSection {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

#customerForm[data-customer-panel="podaci"] .customerFormActions--quotes:not(.customerPodaciActions) {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.customerQuotesHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.customerQuotesHeaderMain {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.customerQuotesHeader h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0c1c36;
}

.customerQuotesCount {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}


.customerQuotesEmpty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.supplierKufSharepointBusy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.supplierKufSharepointBusy.hidden {
  display: none;
}

.supplierKufSharepointSpinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--gold, #b78846);
  border-radius: 50%;
  animation: panelLoadingSpin 0.75s linear infinite;
  flex-shrink: 0;
}

.customerQuotesTableWrap,
.customerKifTableWrap {
  overflow: auto;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 28, 54, 0.04);
}

.customerQuotesTable {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
}

.customerQuotesTable th,
.customerQuotesTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.customerQuotesTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: linear-gradient(180deg, #fafaf8 0%, #f4f2ed 100%);
  border-bottom: 2px solid #e8e6e1;
}

.customerQuotesTable th.num,
.customerQuotesTable td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.customerQuotesTable th.col-actions,
.customerQuotesTable td.col-actions {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

.customerKifTable.customerQuotesTable th,
.customerKifTable.customerQuotesTable td,
.customerKifTable.customerQuotesTable th.num,
.customerKifTable.customerQuotesTable td.num,
.customerKifTable.customerQuotesTable th.col-actions,
.customerKifTable.customerQuotesTable td.col-actions {
  text-align: left;
}

.customerKifTable.customerQuotesTable .customerDocMetaInput {
  text-align: left;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable {
  font-size: 12px;
  min-width: 980px;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable th,
.supplierKufPanel .customerQuotesTable.supplierKufTable td {
  padding: 8px 12px;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .customerQuoteStatus {
  font-size: 10px;
  padding: 1px 6px;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .customerDocIconBtn {
  width: 22px;
  height: 20px;
  font-size: 11px;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .customerDocPaidBtn.is-paid {
  border-color: #7cb88a;
  background: #eef8f0;
  color: #1f6b34;
  font-weight: 700;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .supplierKufStatusCol {
  width: 92px;
  min-width: 92px;
}

.supplierKufStatusCell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.supplierKufStatusSub {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #8a4b12;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .customerDocMetaInput {
  height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  min-width: 88px;
  text-align: left;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .customerDocMetaSelect {
  min-width: 96px;
  max-width: 120px;
}

.supplierKufPaymentStatementCell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.supplierKufPaymentRemaining {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: #2e7d32;
  white-space: nowrap;
}

.supplierKufPaymentRemaining.is-closed {
  color: var(--muted);
}

.supplierKufPaymentRemaining.is-over {
  color: #c62828;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable .customerDocMetaPreview {
  min-height: 18px;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable th.col-actions,
.supplierKufPanel .customerQuotesTable.supplierKufTable td.col-actions {
  width: 72px;
  text-align: center;
}

.supplierKufPanel .customerQuotesTable.supplierKufTable th.num,
.supplierKufPanel .customerQuotesTable.supplierKufTable td.num {
  text-align: right;
}

.customerQuotesTable tbody tr:last-child td {
  border-bottom: none;
}

.customerQuotesTable tbody tr:hover td {
  background: #f8f7f4;
}

.customerQuotesTable tbody tr.customerQuoteRow {
  cursor: pointer;
}

.customerQuotesTable tbody tr.customerQuoteRow.is-selected td {
  background: #f8f3ea;
}

.customerQuotesTable tbody tr.customerQuoteRow.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

.customerQuotesTable tbody tr.customerQuoteRow.is-selected:hover td {
  background: #f3ebdc;
}

.customerDocumentsTree {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.customerDocumentRoot,
.customerDocumentYear {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 28, 54, 0.04);
}

.customerDocumentRootHead,
.customerDocumentYearHead,
.customerDocumentOfferHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.customerDocumentRootHead,
.customerDocumentYearHead {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fafaf8;
}

.customerDocumentRootHead > div,
.customerDocumentYearHead > div,
.customerDocumentOfferHead > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.customerDocumentRootHead strong,
.customerDocumentOfferHead strong {
  color: #0c1c36;
  font-size: 14px;
}

.customerDocumentRootHead span,
.customerDocumentYearHead span,
.customerDocumentOfferHead span,
.customerDocumentPath {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customerDocumentRootHead > span {
  flex: 0 0 auto;
  text-align: right;
}

.customerDocumentStructureHint {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.customerDocumentPathCrumb {
  font-size: 13px;
  font-weight: 600;
  color: #0c1c36;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.customerDocumentProfileLine {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customerDocumentsToolbar {
  display: flex;
  justify-content: flex-start;
  padding: 10px 12px 12px;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
}

.customerDocumentsYearFilter {
  width: auto;
  max-width: 100%;
}

.customerDocumentsTableWrap {
  overflow: auto;
  padding-top: 2px;
  background: #fff;
}

.customerDocumentsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.customerDocumentsTable th,
.customerDocumentsTable td {
  border-bottom: 1px solid #edf1f6;
  text-align: left;
}

.customerDocumentsTable thead th {
  padding: 2px 8px;
  background: #f6f8fc;
  color: #465569;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: middle;
}

.customerDocumentsTable tbody td {
  padding: 7px 10px;
  font-size: 12px;
  vertical-align: top;
}

.customerDocumentsTable tbody tr:last-child td {
  border-bottom: 0;
}

.customerDocumentsTable tbody tr:hover td {
  background: #fafbfd;
}

.customerDocumentsSortBtn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 1px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
  cursor: pointer;
}

.customerDocumentsSortBtn:hover,
.customerDocumentsSortBtn.is-active {
  color: var(--accent, #1a5fb4);
}

.customerDocumentsNameCell {
  min-width: 180px;
  overflow-wrap: anywhere;
}

.customerDocumentYear {
  margin: 12px;
}

.customerDocumentYearHead h4,
.customerDocumentCustomerFiles h4 {
  margin: 0;
  color: #0c1c36;
  font-size: 14px;
}

.customerDocumentsYearLink {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.customerDocumentCustomerFiles {
  padding: 12px 14px 0;
}

.customerDocumentCustomerFiles h4 {
  margin-bottom: 8px;
}

.customerDocumentOffers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

.customerDocumentOffer {
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.customerDocumentOfferHead {
  padding: 10px 12px;
  background: #fbfbfd;
  border-bottom: 1px solid #edf1f6;
}

.customerDocumentOfferHead code {
  flex: 0 1 auto;
  max-width: 45%;
  padding: 3px 6px;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  background: #fff;
  color: #465569;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.customerDocumentPath {
  padding: 8px 12px;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
}

.customerDocumentFiles {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customerDocumentFiles--root {
  padding: 8px 0;
}

.customerDocumentFiles--nested {
  grid-column: 1 / -1;
  margin-top: 6px;
  border-top: 1px solid #edf1f6;
}

.customerDocumentFile {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.4fr) minmax(120px, 0.8fr) 100px;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px 8px calc(12px + (var(--doc-level, 0) * 18px));
  border-bottom: 1px solid #edf1f6;
  font-size: 12px;
}

.customerDocumentFile:last-child {
  border-bottom: none;
}

.customerDocumentKind {
  color: #0c1c36;
  font-weight: 600;
}

.customerDocumentName,
.customerDocumentMeta {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #334155;
}

.customerDocumentStatus {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #d4dbe6;
  background: #f6f8fc;
  color: #465569;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.customerDocumentFolderStatus {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #d4dbe6;
  background: #f6f8fc;
  color: #465569;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.customerDocumentFile--found .customerDocumentStatus,
.customerDocumentFile--linked .customerDocumentStatus,
.customerDocumentFolderStatus--found {
  color: #13653b;
  background: #e9f8ef;
  border-color: #bfe7cd;
}

.customerDocumentFile--missing .customerDocumentStatus,
.customerDocumentFile--not_found .customerDocumentStatus,
.customerDocumentFolderStatus--missing,
.customerDocumentFolderStatus--not_found {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.customerDocumentFile--folder .customerDocumentStatus {
  color: #0f4f9c;
  background: #eaf3ff;
  border-color: #c7defa;
}

.customerDocumentEmptyInside {
  padding: 12px 14px 14px;
}

.customerQuotePaymentField {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #d6dde8;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}

.customerQuotePaymentField:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(40, 95, 82, 0.12);
}

.customerQuotePaymentSelect {
  cursor: pointer;
}

.customerQuoteMatchEdit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
}

.customerQuoteMatchConfirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #0c1c36;
  cursor: pointer;
  user-select: none;
}

.customerQuoteMatchConfirm input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.customerFormActions .toolbarBtnFixed:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.customerQuoteOpen {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #0c1c36;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.customerQuoteOpen:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.customerQuoteCollapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  border: 1px solid #d6dde8;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #f6f8fc);
  color: #415065;
  margin-right: 6px;
  cursor: pointer;
  line-height: 1;
  font-size: 11px;
  vertical-align: middle;
}

.customerQuoteCollapse--empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.customerQuoteStatus {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.customerQuoteStatus.is-new {
  color: #0f4f9c;
  background: #eaf3ff;
  border-color: #c7defa;
}

.customerQuoteStatus.is-unpaid-payment {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.customerQuoteStatus.is-partial-payment {
  color: #854d0e;
  background: #fefce8;
  border-color: #fde047;
  white-space: normal;
  line-height: 1.3;
  max-width: 220px;
}

.customerQuoteMatch {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.customerQuoteMatch.is-exact {
  color: #13653b;
  background: #e9f8ef;
  border-color: #bfe7cd;
}

.customerQuoteMatch.is-guess {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.customerQuoteMatch.is-manual {
  color: #0f4f9c;
  background: #eaf3ff;
  border-color: #c7defa;
}

.customerQuoteMatch.is-linked {
  color: #5b21b6;
  background: #f3e8ff;
  border-color: #e9d5ff;
}

.customerQuoteStatus.is-sent {
  color: #3b6ea8;
  background: rgba(59, 110, 168, 0.08);
  border-color: rgba(59, 110, 168, 0.22);
}

.customerQuoteStatus.is-accepted {
  color: #13653b;
  background: #e9f8ef;
  border-color: #bfe7cd;
}

.customerQuoteInvoiceLink {
  color: var(--accent, #1a5fb4);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.customerQuoteInvoiceLink:hover {
  color: var(--accent-hover, #3584e4);
}

.customerQuoteDocsRow td {
  background: #fbfbfd;
  border-top: 0;
  padding: 10px 12px;
}

.customerQuoteDocsWrap {
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.customerQuoteDocsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.customerQuoteDocsTable th,
.customerQuoteDocsTable td {
  padding: 8px 10px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
}

.customerQuoteDocsTable thead th {
  background: #f6f8fc;
  color: #465569;
  font-weight: 700;
}

.customerQuoteDocsTable tbody tr:last-child td {
  border-bottom: 0;
}

.customerDocActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customerDocIconBtn {
  width: 26px;
  height: 24px;
  border: 1px solid #d4dbe6;
  border-radius: 6px;
  background: #fff;
  color: #3f4f65;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.customerDocIconBtn:hover {
  border-color: #aeb9cc;
  background: #f6f8fc;
}

.customerDocMetaPreview {
  display: inline-block;
  min-height: 20px;
  color: #1f2937;
}

.customerDocMetaInput {
  width: 100%;
  min-width: 88px;
  height: 28px;
  border: 1px solid #d6dde8;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
}

.customerDocPickerModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: grid;
  place-items: center;
  z-index: 90;
}

.productDetailModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: grid;
  place-items: center;
  z-index: 95;
  padding: 16px;
}

.productDetailCard {
  width: min(820px, 96vw);
  max-height: min(90vh, 920px);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  font-size: 0.74rem;
}

.productDetailHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
}

.productDetailHeader h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.25;
  color: #0c1c36;
}

.productDetailSubtitle {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.productDetailClose {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.productDetailClose::before {
  content: "×";
  display: block;
  transform: translateY(-0.5px);
}

.productDetailClose:hover {
  border-color: rgba(59, 110, 168, 0.35);
  color: var(--text);
}

.productDetailHeaderCopy {
  min-width: 0;
}

.productDetailBody {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  overflow: auto;
  min-height: 0;
}

.productDetailMedia {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.productDetailImage,
.productDetailGalleryImage,
.productDetailImageFallback {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f7f8fa;
}

.productDetailImage,
.productDetailGalleryImage {
  object-fit: contain;
  display: block;
}

.productDetailImageFallback {
  background: linear-gradient(135deg, var(--blue), var(--rose));
}

.productDetailLoadImages {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 0.68rem;
  cursor: pointer;
}

.productDetailLoadImages:hover:not(:disabled) {
  border-color: rgba(15, 23, 42, 0.25);
  background: #f8fafc;
}

.productDetailLoadImages:disabled {
  opacity: 0.7;
  cursor: wait;
}

.productDetailGalleryStatus {
  margin: 0;
  font-size: 0.64rem;
  color: var(--muted);
  line-height: 1.35;
}

.productDetailGallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.productDetailSections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  --productDetailLabelWidth: 34%;
}

.productDetailSectionTitle {
  margin: 0 0 4px;
  padding: 0 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text);
}

.productDetailTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid rgba(217, 222, 216, 0.95);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.productDetailTable tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.02);
}

.productDetailTable th,
.productDetailTable td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(217, 222, 216, 0.9);
  vertical-align: top;
  line-height: 1.3;
  text-align: left;
}

.productDetailTable tr:last-child th,
.productDetailTable tr:last-child td {
  border-bottom: none;
}

.productDetailTable th {
  width: var(--productDetailLabelWidth);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.productDetailTable td {
  width: calc(100% - var(--productDetailLabelWidth));
  font-size: 0.72rem;
  color: var(--text);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.productDetailDescLabel {
  font-weight: 700;
  color: var(--text);
}

.productDetailDescSep {
  color: var(--muted);
}

.productDetailActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
}

.productDetailActions .primary {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 0.74rem;
}

@media (max-width: 640px) {
  .productDetailBody {
    grid-template-columns: 1fr;
  }

  .productDetailMedia {
    position: static;
    max-width: 120px;
    margin: 0 auto 4px;
  }

  .productDetailSections {
    --productDetailLabelWidth: 38%;
  }

  .productDetailTable th {
    white-space: normal;
  }
}

.customerDocPickerCard {
  width: min(340px, 92vw);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 18px 20px 16px;
  display: grid;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.customerDocPickerCard h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0c1c36;
  text-align: center;
}

.customerDocPickerTypes {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.customerDocPickerTypesLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.customerDocPickerOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f4f6f8;
  border: 1px solid #e8ecf1;
}

.customerDocPickerOption {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customerDocPickerOption:hover {
  border-color: #c5d0de;
}

.customerDocPickerOption:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.customerDocPickerOption input[type="radio"] {
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.customerDocPickerActions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 4px;
}

.customerDocPickerActions .toolbarBtnFixed {
  min-width: 100px;
}

.financePartyLinkModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: grid;
  place-items: center;
  z-index: 95;
}

.financePartyLinkCard {
  width: min(420px, 94vw);
  max-height: min(88vh, 640px);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 18px 20px 16px;
  display: grid;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.financePartyLinkCard h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0c1c36;
}

.financePartyLinkCounterparty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}

.financePartyLinkSearchLabel {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.financePartyLinkSearchLabel input {
  font-size: 13px;
}

.financePartyLinkSelect {
  width: 100%;
  min-height: 220px;
  font-size: 13px;
  border: 1px solid #d9e0ea;
  border-radius: 8px;
  padding: 4px;
}

.financePartyLinkActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.financePartyLinkBtn {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--link, #1d4ed8);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  line-height: 1.35;
  word-break: break-word;
}

.financePartyLinkBtn:hover {
  color: #1e40af;
}

.financeTekuciTable--erste td.col-party-link.is-party-mapped {
  background: #e8f5e9;
}

.financeTekuciTable--erste td.col-party-link.is-party-unmapped {
  background: #fff3e0;
}

.financePartyLinkBtn--mapped {
  color: #1b5e20;
  text-decoration-color: rgba(27, 94, 32, 0.45);
}

.financePartyLinkBtn--unmapped {
  color: #9a5b00;
  text-decoration-color: rgba(154, 91, 0, 0.45);
}

.customerQuoteStatus.is-archived {
  color: #5b6472;
  background: #f0f2f5;
  border-color: #d8dee7;
}

.customerListEmpty {
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0;
}

.adminLayout {
  padding: 18px;
  height: calc(100vh - 84px);
  overflow: auto;
  min-height: 0;
}

.adminPanel {
  max-width: 920px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.adminHeader {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.adminHeader h2 {
  margin: 0 0 6px;
}

.adminLead {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.adminSections {
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
}

.adminSection {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fcfcfa 0%, #f7f8f6 100%);
}

.adminSection h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.adminSection p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.adminSectionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adminCustomerDedupeToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.adminCustomerDedupeSearch {
  flex: 1 1 220px;
  min-width: 180px;
}

.adminCustomerDedupeStatus {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

.adminSuppliersSharepointToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 10px;
}

.adminSuppliersSharepointDryRun {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}

.adminSuppliersSharepointStatus {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.adminSuppliersSharepointStatus.adminEnvStatus--error {
  color: var(--danger, #b42318);
}

.adminSuppliersSharepointDetails {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.85rem;
  line-height: 1.45;
  max-height: 280px;
  overflow: auto;
}

.adminSuppliersSharepointDetails ul {
  margin: 6px 0 0;
  padding-left: 1.2rem;
}

.adminCustomerDedupeGroups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adminCustomerDedupeGroup {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
}

.adminCustomerDedupeGroupHead {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.adminCustomerDedupeGroupHead strong {
  font-size: 1rem;
}

.adminCustomerDedupeTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.adminCustomerDedupeTable th,
.adminCustomerDedupeTable td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.adminQuotePickerToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.adminQuotePickerSearch {
  flex: 1 1 220px;
  min-width: 180px;
}

.adminQuotePickerStatus {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

.adminQuotePickerResults {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.adminQuotePickerRow {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
}

.adminQuotePickerRowMain {
  flex: 1 1 200px;
  min-width: 0;
}

.adminQuotePickerRowMain strong {
  display: block;
  font-size: 0.95rem;
}

.adminQuotePickerRowMeta {
  font-size: 0.85rem;
  color: var(--muted);
}

.adminQuotePickerRowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adminDiskSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.adminDiskStat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
}

.adminDiskStatLabel {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.adminDiskStatValue {
  font-size: 0.95rem;
  font-weight: 600;
  word-break: break-all;
}

.adminDiskToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.adminDiskKeepDays {
  flex: 0 1 120px;
}

.adminDiskKeepDays input {
  width: 100%;
}

.adminDiskBreadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.adminDiskBreadcrumb button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.adminDiskBreadcrumb span {
  color: var(--muted);
}

.adminDiskStatus {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.adminDiskTableWrap {
  overflow: auto;
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
}

.adminDiskTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.adminDiskTable th,
.adminDiskTable td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.adminDiskColCheck {
  width: 36px;
}

.adminDiskTable tbody tr:hover {
  background: rgba(40, 95, 82, 0.06);
}

.adminDiskNameBtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
}

.adminDiskTag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--blue);
  color: var(--ink);
}

.adminDiskTag--locked {
  background: var(--rose);
}

.adminDiskDeleteBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.adminSubheading {
  margin: 16px 0 6px;
  font-size: 1rem;
}

.adminSectionLead {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.adminSectionActions .primary {
  min-width: 120px;
}

.topbarUserBadge {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2f6;
  color: #0c1c36;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.topbarUserArea {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbarLogoutBtn {
  padding: 6px 12px;
  border: 1px solid #c8d0dc;
  border-radius: 999px;
  background: #fff;
  color: #0c1c36;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.topbarLogoutBtn:hover {
  border-color: #0c1c36;
  background: #f5f7fa;
}

.adminUserForm {
  margin-bottom: 16px;
}

.adminUserFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.adminFormField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.adminFormFieldLabel {
  font-size: 12px;
  color: var(--muted);
}

.adminFormField input,
.adminFormField select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--ink);
}

.adminFormField--table {
  min-width: 160px;
  margin: 0;
}

.adminEnvEditor {
  display: block;
  width: 100%;
  min-height: 220px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}

.adminEnvEditor:disabled {
  opacity: 0.65;
  background: #f3f5f4;
}

.adminEnvActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.adminEnvStatus {
  margin: 0;
  flex: 1 1 100%;
  width: 100%;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.adminEnvStatus--error {
  color: #b42318;
}

.adminUsersTableWrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.adminUsersTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.adminUsersTable th,
.adminUsersTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.adminUsersTable th {
  background: #f3f5f4;
  font-size: 12px;
  color: var(--muted);
}

.adminUsersTable tr:last-child td {
  border-bottom: none;
}

.adminRolePermissionsStatus {
  margin: 0 0 12px;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted);
}

.adminRolePermissionsStatus.is-saved {
  color: var(--accent-dark);
}

.adminRolePermissionsStatus.is-error {
  color: #b42318;
}

.adminRolePermissionsTableWrap {
  overflow: auto;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.adminRolePermissionsTable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.adminRolePermissionsTable th,
.adminRolePermissionsTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.adminRolePermissionsTable th:first-child,
.adminRolePermissionsTable td:first-child {
  text-align: left;
  min-width: 120px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}

.adminRolePermissionsTable thead th {
  background: #f3f5f4;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.adminRolePermissionsTable thead th:first-child {
  background: #f3f5f4;
}

.adminRolePermissionsTable tr:last-child td {
  border-bottom: none;
}

.adminRolePermissionsTable tbody th {
  font-weight: 600;
  color: #0c1c36;
  background: #fafaf8;
}

.adminRolePermissionsCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.adminRolePermissionsCheck input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.adminRolePermissionsCheck input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.adminUserActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adminUserInactive {
  opacity: 0.55;
}

.adminUserEditModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: grid;
  place-items: center;
  z-index: 95;
}

.hubDialogOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  place-items: center;
  z-index: 10001;
  padding: 20px;
}

.hubDialogOverlay.hidden {
  display: none;
}

.hubDialogCard {
  width: min(440px, 94vw);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 18px 20px 16px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.16);
}

.hubDialogTitle {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: #0c1c36;
  line-height: 1.25;
}

.hubDialogMessage {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: #334155;
  white-space: pre-wrap;
}

.hubDialogMessage.hidden {
  display: none;
}

.hubDialogInputWrap {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.hubDialogInputWrap.hidden {
  display: none;
}

.hubDialogInputLabel {
  font-size: 12px;
  color: var(--muted);
}

.hubDialogInput {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
}

.hubDialogActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.adminUserEditCard {
  width: min(420px, 94vw);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 18px 20px 16px;
  display: grid;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.adminUserEditCard h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0c1c36;
}

.adminUserEditForm {
  display: grid;
  gap: 12px;
}

.adminUserEditActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.financeLayout {
  padding: 18px;
  height: calc(100vh - 84px);
  overflow: hidden;
  min-height: 0;
}

.financePanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

body.hub-auth-pending > header,
body.hub-auth-pending > .appView,
body.hub-login-open > header,
body.hub-login-open > .appView {
  display: none !important;
}

.hubLoginOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(210, 159, 70, 0.12), transparent 70%),
    linear-gradient(180deg, #fcfcfa 0%, #f0f3f0 100%);
}

.hubLoginOverlay.hidden {
  display: none;
}

.hubLoginCard {
  width: min(440px, 100%);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 40px rgba(12, 28, 54, 0.08);
  overflow: hidden;
}

.hubLoginBrand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 28px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
}

.hubLoginLogo {
  display: block;
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 14px;
}

.hubLoginBrandName {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: #0c1c36;
  letter-spacing: -0.01em;
}

.hubLoginBrandTagline {
  margin: 0;
  max-width: 32ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.hubLoginDivider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, #d29f46 20%, #d29f46 80%, transparent);
  height: 2px;
  opacity: 0.55;
}

.hubLoginBody {
  padding: 24px 28px 8px;
}

.hubLoginBody h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: #0c1c36;
}

.hubLoginLead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.hubLoginForm label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

.hubLoginForm input {
  min-height: var(--control-height);
}

.hubLoginSubmit {
  width: 100%;
  margin-top: 4px;
  font-weight: 600;
}

.hubLoginError {
  margin: 10px 0 0;
  color: #b42318;
  font-size: 13px;
}

.hubLoginFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 16px 28px 22px;
  font-size: 13px;
  color: var(--muted);
}

.hubLoginHelpBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hubLoginHelpBtn::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.hubLoginHelpBtn:hover {
  background: #f4f7f6;
  border-color: #c5d0cb;
}

.hubLoginFooterSep {
  color: #c5cdc8;
  user-select: none;
}

.hubLoginFooterMail {
  color: var(--muted);
  text-decoration: none;
}

.hubLoginFooterMail:hover {
  color: var(--accent);
  text-decoration: underline;
}

.financeAccess {
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fcfcfa 0%, #f4f6f4 100%);
}

.financeMessageCard {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(12, 28, 54, 0.06);
}

.financeMessageCard h2 {
  margin: 0 0 8px;
}

.financeMessageLead {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.financeNotConfigured {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff4e8;
  border: 1px solid #e8c9a0;
  color: #6b4a1f;
  font-size: 13px;
  line-height: 1.45;
}

.financeHeader {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #fafaf8;
}

.financeTabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #fafaf8;
}

.financeTab {
  margin: 0;
  padding: 12px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.financeTab.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  background: #fff;
}

.financeTabPanel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

.financeTabPanel.is-active {
  display: flex;
}

#financeTabTekuci,
#financeTabDevizni,
#financeTabFakture {
  position: relative;
}

#financeAppPanel .financeInvoicesFilterRow.filterRowsSelects {
  grid-template-columns: repeat(6, minmax(0, 1fr)) 82px;
  gap: 8px 10px;
  width: 100%;
  min-height: var(--panel-form-row-height);
  align-items: end;
}

#financeAppPanel .financeInvoicesTableWrap {
  margin: 0 16px 16px;
}

.financeInvoicesPartyCell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.financeInvoicesPartyType {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.financeInvoicesPartyName {
  font-size: 12px;
  font-weight: 600;
  color: #0c1c36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.financeInvoicesOverviewTable th:first-child,
.financeInvoicesOverviewTable td:first-child {
  min-width: 160px;
  max-width: 220px;
}

.financeInvoicesTotals .financeTekuciTotalsValues strong {
  color: var(--muted);
  font-weight: 600;
}

.financeImportOverlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}

.financeImportOverlay.hidden {
  display: none;
}

.financeImportOverlayCard {
  width: min(440px, 94%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 10px;
  border: 1px solid #d4d8de;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

#financeTabPregled .financeDashboardFilters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 0 16px 12px;
}

#financeTabPregled .financeDashboardFilters label {
  width: auto;
  min-width: 180px;
  max-width: 220px;
}

#financeTabPregled .financeDashboardFilters .financeDashboardRefresh {
  align-self: flex-end;
  margin-left: auto;
}

.financeTekuciActions--spacer {
  visibility: hidden;
  pointer-events: none;
}

.financeTekuciActions--spacer .financeUploadBtn {
  display: inline-block;
  min-height: var(--control-height);
  min-width: 140px;
}

.financeDashboardSummary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 16px 12px;
}

.financeDashboardSummaryCol {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fafbfd;
}

.financeDashboardSummaryCol h4 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.financeDashboardSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  font-size: 13px;
}

.financeDashboardSummaryGrid strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

.financeDashboardBalance {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.financeDashboardBalance strong {
  color: var(--text);
}

.financeDashboardLedgers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 0 16px 12px;
  align-items: stretch;
}

.financeDashboardLedgers--totals {
  padding-bottom: 0;
}

.financeDashboardLedgers--tables {
  position: relative;
  padding-top: 0;
  min-height: 120px;
}

.financeDashboardLedgerCol {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.financeDashboardLedgers--totals .financeTekuciTotals {
  margin: 0;
}

.financeDashboardLedgers--totals .financeTekuciTotalsValues {
  gap: 10px 14px;
  font-size: 13px;
}

.financeDashboardLedgerCol .financeTekuciTableWrap {
  margin: 0;
  flex: 1;
  min-height: 0;
}

.financeDashboardLedgerCol .financeTekuciEmpty {
  margin: 8px 0 0;
}

.financeDashboardTable {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .financeDashboardLedgers {
    grid-template-columns: 1fr;
  }
}

.financeTekuciHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 10px;
}

.financeTekuciHead h3 {
  margin: 0 0 4px;
}

.financeTekuciMeta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.financeTekuciActions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.financeTekuciActions .toolbarBtnFixed {
  width: auto;
  min-width: 108px;
  max-width: none;
  white-space: nowrap;
  font-size: 12px;
}

.financeTekuciTotals {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 16px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f7;
}

.financeTekuciTotalsLabel {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.financeTekuciTotalsValues {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-size: 14px;
}

.financeTekuciTotalsValues strong {
  margin-left: 6px;
}

.financeTekuciFilters {
  display: grid;
  grid-template-columns: minmax(120px, 1.35fr) minmax(88px, 0.95fr) minmax(80px, 0.85fr) minmax(64px, 0.6fr) minmax(
      128px,
      0.82fr
    ) 32px;
  gap: 8px;
  padding: 0 16px 10px;
  align-items: end;
}

.financeTekuciFilters label,
.financeTekuciFilters .financeFilterPartyLink {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.financeFilterPartyLinkLabel {
  display: block;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.financeTekuciFilters input,
.financeTekuciFilters select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  box-sizing: border-box;
}

.financeFilterPartyLink {
  border: none;
  margin: 0;
  padding: 0;
}

.financeFilterRadioGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #d4d8de;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}

.financeFilterRadioGroup label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  color: #0c1c36;
  cursor: pointer;
  white-space: nowrap;
}

.financeFilterReset {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid #d4d8de;
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  align-self: end;
}

.financeFilterReset:hover {
  color: var(--ink);
  border-color: #c9b48a;
  background: #f8f7f4;
}

.financeFilterRadioGroup input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.financeTekuciTableWrap {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 16px 16px;
  border: 1px solid #d4d8de;
  border-radius: 4px;
  overflow: auto;
  background: #fff;
}

.financeTableWrap--loading > table,
.financeTableWrap--loading > .financeTekuciEmpty {
  visibility: hidden;
}

.financeTekuciTable {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: Tahoma, Geneva, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.25;
  color: #1a1f2e;
}

.financeTekuciTable th,
.financeTekuciTable td {
  padding: 4px 5px;
  border: 1px solid #d4d8de;
  vertical-align: middle;
  text-align: left;
  overflow: hidden;
}

.financeTekuciTable tbody tr:nth-child(even) td {
  background: #f7f8fa;
}

.financeTekuciTable tbody tr:hover td {
  background: #eef2f7;
}

.financeTekuciTable tbody tr:nth-child(even):hover td {
  background: #e8edf3;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(1),
.financeTekuciTable td.financeTekuciDate {
  width: 7%;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(2),
.financeTekuciTable td.financeTekuciStatement {
  width: 7%;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(3),
.financeTekuciTable:not(.financeTekuciTable--erste) td.financeTekuciName,
.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(4),
.financeTekuciTable:not(.financeTekuciTable--erste) td.financeTekuciDesc,
.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(5),
.financeTekuciTable:not(.financeTekuciTable--erste) td.financeTekuciCategoryCell {
  width: 15.5%;
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(9),
.financeTekuciTable:not(.financeTekuciTable--erste) td.financeTekuciNoteCell {
  width: 24.5%;
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(6),
.financeTekuciTable:not(.financeTekuciTable--erste) td:nth-child(6) {
  width: 5%;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(7),
.financeTekuciTable:not(.financeTekuciTable--erste) td:nth-child(7) {
  width: 5%;
}

.financeTekuciTable:not(.financeTekuciTable--erste) th:nth-child(8),
.financeTekuciTable:not(.financeTekuciTable--erste) td:nth-child(8) {
  width: 5%;
}

.financeTekuciTable--erste {
  min-width: 1780px;
}

.financeTekuciTable--erste .col-date { width: 3.25%; }
.financeTekuciTable--erste .col-statement { width: 3%; }
.financeTekuciTable--erste .col-party { width: 14%; }
.financeTekuciTable--erste .col-party-link { width: 11%; }
.financeTekuciTable--erste .col-account { width: 8%; }
.financeTekuciTable--erste .col-exchange-rate { width: 4%; }
.financeTekuciTable--erste .col-transfer-no {
  width: 1.6rem;
  max-width: 1.6rem;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
  white-space: nowrap;
}
.financeTekuciTable--erste .col-purpose { width: 14%; }

.financeTekuciTable--erste .col-date,
.financeTekuciTable--erste .col-statement {
  font-size: 10px;
  padding-left: 3px;
  padding-right: 3px;
  white-space: nowrap;
}

.financeTekuciTable--erste th.col-date .financeTekuciSortBtn,
.financeTekuciTable--erste th.col-statement .financeTekuciSortBtn {
  font-size: 10px;
}
.financeTekuciTable--erste .col-payment-code { width: 8%; }
.financeTekuciTable--erste .col-ref-debit,
.financeTekuciTable--erste .col-ref-credit { width: 5.5%; }
.financeTekuciTable--erste .col-document { width: 11%; min-width: 140px; }
.financeTekuciTable--erste .col-debit,
.financeTekuciTable--erste .col-credit { width: 5.8%; }
.financeTekuciTable--erste .col-net { width: 4.5%; }

.financeTekuciTable--erste .col-debit,
.financeTekuciTable--erste .col-credit,
.financeTekuciTable--erste .col-net {
  white-space: nowrap;
}
.financeTekuciTable--erste .col-category { width: 9%; }
.financeTekuciTable--erste .col-note { width: 10%; }

.financeTekuciTable--erste .col-party,
.financeTekuciTable--erste .col-party-link,
.financeTekuciTable--erste .col-account,
.financeTekuciTable--erste .col-exchange-rate,
.financeTekuciTable--erste .col-purpose,
.financeTekuciTable--erste .col-payment-code,
.financeTekuciTable--erste .col-ref-debit,
.financeTekuciTable--erste .col-ref-credit,
.financeTekuciTable--erste .col-document,
.financeTekuciTable--erste .col-note {
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
}

.financeTekuciTable--erste .col-document .financePartyLinkBtn {
  max-width: 100%;
}

.financeTekuciTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  background: #0c1c36;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  border-color: #0c1c36;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.financeTekuciSortBtn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-height: 26px;
  padding: 5px 6px;
  border: none;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.financeTekuciSortBtn--num {
  justify-content: flex-end;
  text-align: right;
}

.financeTekuciSortBtn:hover {
  background: #152a4d;
}

.financeTekuciSortBtn.is-sorted {
  background: #1a3560;
}

.financeTekuciSortIndicator {
  min-width: 10px;
  font-size: 9px;
  line-height: 1;
  color: #d4a24e;
}

.financeTekuciTable td.num,
.financeTekuciTable th.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.financeTekuciTable td.positive {
  color: #1f4d43;
  font-weight: 600;
}

.financeTekuciTable td.negative {
  color: #9a3412;
  font-weight: 600;
}

.financeTekuciTable.financeDashboardTable {
  min-width: 0;
  width: 100%;
}

.financeTekuciTable.financeDashboardTable th:nth-child(1),
.financeTekuciTable.financeDashboardTable td:nth-child(1) {
  width: 40%;
}

.financeTekuciTable.financeDashboardTable th:nth-child(2),
.financeTekuciTable.financeDashboardTable td:nth-child(2),
.financeTekuciTable.financeDashboardTable th:nth-child(3),
.financeTekuciTable.financeDashboardTable td:nth-child(3),
.financeTekuciTable.financeDashboardTable th:nth-child(4),
.financeTekuciTable.financeDashboardTable td:nth-child(4),
.financeTekuciTable.financeDashboardTable th:nth-child(5),
.financeTekuciTable.financeDashboardTable td:nth-child(5) {
  width: 15%;
}

.financeTekuciTable.financeDashboardTable tbody td {
  padding: 8px 5px;
}

.financeTekuciTable.financeDashboardTable td.financeDashboardCategory {
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
}

.financeTekuciTable.financeDashboardTable tbody tr.financeDashboardRow--yearTransfer td {
  font-style: italic;
  background: #f4f7fa !important;
}

.financeTekuciTable.financeDashboardTable tbody tr.financeDashboardRow--yearTransfer:hover td {
  background: #f4f7fa !important;
}

.financeTekuciTable.financeDashboardTable tbody tr.financeDashboardRow--total td {
  font-weight: 700;
  background: #e3eaf2 !important;
}

.financeTekuciTable.financeDashboardTable tbody tr.financeDashboardRow--total:hover td {
  background: #e3eaf2 !important;
}

.financeTekuciCategorySelect,
.financeTekuciNoteInput {
  width: 100%;
  min-height: 22px;
  height: 22px;
  padding: 2px 4px;
  border: 1px solid #c5cad1;
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
  box-sizing: border-box;
  background: #fff;
}

.financeTekuciTable tbody tr:nth-child(even) .financeTekuciCategorySelect,
.financeTekuciTable tbody tr:nth-child(even) .financeTekuciNoteInput {
  background: #fff;
}

.financeTekuciCategorySelect {
  max-width: 100%;
}

.financeTekuciNoteInput {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financeTekuciNoteInput:focus,
.financeTekuciCategorySelect:focus {
  white-space: normal;
  overflow: visible;
  height: auto;
  min-height: 22px;
  outline: 2px solid #d4a24e;
  outline-offset: 0;
}

.adminFinanceCategoryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.adminLedgerCategoryBlock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.adminLedgerCategoryTitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.adminLedgerCategoryRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}

.adminLedgerCategoryField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: min(100%, 220px);
  font-size: 12px;
  color: var(--muted);
}

.adminLedgerCategoryField select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--ink);
}

.adminLedgerCategoryAction {
  flex: 0 0 auto;
  min-height: var(--control-height);
}

.adminLedgerCategoryAction:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.adminLedgerCategoryEditRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid #e8c878;
  border-radius: 8px;
  background: #fff9ed;
}

.adminLedgerCategoryEditRow.hidden {
  display: none;
}

.adminLedgerCategoryEditRow .adminLedgerCategoryField input {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.adminLedgerCategoryForm {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.adminLedgerCategoryForm input {
  flex: 1;
  min-width: 140px;
  min-height: var(--control-height);
}

.financeTekuciEmpty {
  margin: 0 16px 16px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 720px) {
  .adminFinanceCategoryGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .financeTekuciHead {
    flex-direction: column;
  }

  .financeTekuciActions {
    flex-wrap: wrap;
  }

  .financeTekuciFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeFilterPartyLink {
    grid-column: 1 / -1;
  }
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
  letter-spacing: 0;
}

h2 {
  font-size: 18px;
  letter-spacing: 0;
}

h3 {
  font-size: 15px;
}

.panelHeading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0c1c36;
  line-height: 1.2;
  letter-spacing: 0;
  font-family: inherit;
}

.panelHeadingMeta {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
  font-family: inherit;
}

.layout {
  --panel-pad-x: 16px;
  --panel-pad-top: 16px;
  --panel-pad-bottom: 8px;
  --panel-body-gap: 8px;
  --panel-header-row: 58px;
  --panel-header-status-height: 14px;
  --panel-header-block-height: calc(var(--control-height) + 4px + var(--panel-header-status-height));
  --panel-form-row-height: calc(var(--field-label-height) + var(--panel-label-gap) + var(--control-height));
  --panel-label-gap: 10px;
  --panel-block-gap: 16px;
  --field-label-height: 16px;
  display: grid;
  grid-template-columns: minmax(280px, 38fr) minmax(480px, 62fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.layout > .catalogue,
.layout > .quotePanel {
  min-height: 0;
}

.catalogue,
.quotePanel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 0;
}

.catalogue {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.catalogueControls {
  --catalogue-ui-font: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--panel-block-gap);
  flex: 0 0 auto;
  flex-shrink: 0;
  padding: var(--panel-pad-top) var(--panel-pad-x) var(--panel-pad-bottom);
  border-bottom: 1px solid var(--line);
  background: #fafaf8;
  font-size: var(--catalogue-ui-font);
  font-weight: 400;
}

.catalogueHeading {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  align-self: start;
}


.catalogueHeader .catalogueToolbarActions {
  display: contents;
}

.catalogueHeader .catalogueExcelGroup {
  grid-column: 4 / -1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: auto var(--panel-header-status-height);
  gap: 4px;
  align-self: stretch;
  min-width: 0;
}

.catalogueHeader .catalogueExcelButtons {
  grid-row: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.catalogueHeader #excelStatus {
  grid-row: 2;
  align-self: center;
  min-height: var(--panel-header-status-height);
  line-height: var(--panel-header-status-height);
  text-align: center;
}

.toolbarBtnFixed {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
  padding-left: 8px;
  padding-right: 8px;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

.excelInlineStatus {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.excelInlineStatus.ready {
  color: var(--accent-dark);
}

.catalogueControls label,
.catalogueControls .priceRangeField,
.catalogueControls .priceRangeField span {
  font-weight: 400;
}

.catalogueControls .filters input,
.catalogueControls .filters select,

.catalogueControls .filters {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--panel-block-gap);
}

.catalogueControls button.quoteActionBtn {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.catalogueControls .quoteCatalogSourceToggle .quoteCatalogSourceBtn {
  min-height: 0;
  padding: 0 6px;
}

.priceRangeField span,
.catalogueFilterField span {
  display: flex;
  align-items: center;
  min-height: var(--field-label-height);
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

.catalogueFilterField {
  display: grid;
  grid-template-rows: var(--field-label-height) var(--control-height);
  gap: var(--panel-label-gap);
  min-width: 0;
  margin: 0;
  color: var(--muted);
}

.catalogueFilterBlock {
  margin: 0;
}

.priceRangeField {
  min-width: 0;
  color: var(--muted);
}

.filterRowsSelects,
.filterRowsPrices,
.quoteLibrary.panelAlignLibrary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px 10px;
  width: 100%;
  min-height: var(--panel-form-row-height);
  align-items: end;
}

.filterRowsSelects {
  margin: 0;
}

.filterRowsPrices {
  margin: 0;
}

.filterRowsPrices > .priceRangeField:nth-child(1) {
  grid-column: 1;
}

.filterRowsPrices > .priceRangeField:nth-child(2) {
  grid-column: 2;
}

.filterRowsPrices > .filterSearchField {
  grid-column: 3 / span 3;
}

.filterRowsPrices > .resetFilters {
  grid-column: 6;
}

.catalogueControls .filterRowsSelects .catalogueFilterField,
.catalogueControls .filterRowsPrices > label,
.catalogueControls .filterRowsPrices .priceRangeField,
.quoteEditor .quoteLibrary > label,
.quoteEditor .quoteEditorGrid.panelAlignMeta > label,
.quoteEditor .quoteEditorGrid.panelAlignMeta .quoteMetaTail > label {
  display: grid;
  grid-template-rows: var(--field-label-height) var(--control-height);
  gap: var(--panel-label-gap);
  margin: 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

.catalogueControls .filterRowsPrices label > span,
.catalogueControls .filterRowsPrices .priceRangeField > span,
.catalogueControls .filterRowsPrices .filterSearchField > span,
.quoteEditor label > .fieldLabel,
.quoteEditor label > .quoteFieldHead.fieldLabel {
  display: flex;
  align-items: center;
  min-height: var(--field-label-height);
  margin: 0;
  padding: 0;
}

.quotePanel {
  position: static;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.toolbar,
.actions,
.quoteHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toolbar.catalogueHeader {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: var(--control-height) var(--panel-header-status-height);
  gap: 4px 10px;
  align-items: stretch;
  justify-content: normal;
  min-height: var(--panel-header-block-height);
  margin: 0;
}

.toolbarActions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.statusLine {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f6f7f4;
  color: var(--muted);
}

.statusLine.ready {
  border-color: #bdd1c9;
  background: #f1f8f5;
  color: var(--accent-dark);
}

.fileButton {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.fileButton input {
  display: none;
}


.filterRowsSelects select,
.filterRowsSelects input[type="date"],
.filterRowsPrices .priceRangeField input,
.filterRowsPrices .filterSearchField input,
.filterRowsPrices .resetFilters,
.catalogueControls .filters select {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

.priceRangeField span {
  white-space: nowrap;
}

.filterRowsPrices .filterSearchField {
  min-width: 0;
}

.filterRowsPrices .filterSearchField input {
  width: 100%;
}

.filterRowsPrices .resetFilters.quoteActionBtn,
#suppliersView .supplierKufFilters .supplierKufFilterRow .resetFilters.quoteActionBtn,
#financeAppPanel .financeInvoicesFilterRow .resetFilters.quoteActionBtn {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 82px;
  min-width: 82px;
  max-width: 82px;
  min-height: var(--control-height);
  height: var(--control-height);
  margin-top: calc(var(--field-label-height) + var(--panel-label-gap));
  padding: 0 8px;
  align-self: end;
  justify-self: end;
}

.filters input,
.filters select,
label input,
label select,
textarea {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: var(--control-padding);
  box-sizing: border-box;
}

textarea {
  height: auto;
  min-height: 72px;
}

.catalogueListScroll {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.hubStartupOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(248, 250, 252, 0.92);
}

.hubStartupOverlay.hidden {
  display: none;
}

.hubStartupOverlayCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 32px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 14px;
}

.hubStartupOverlaySpinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--gold, #b78846);
  border-radius: 50%;
  animation: panelLoadingSpin 0.75s linear infinite;
}

.panelLoading,
.catalogueLoading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.88);
  color: #475569;
  font-size: 13px;
  text-align: center;
}

.panelLoading.hidden,
.catalogueLoading.hidden {
  display: none;
}

.panelLoadingSpinner,
.catalogueLoadingSpinner {
  width: 30px;
  height: 30px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--gold, #b78846);
  border-radius: 50%;
  animation: panelLoadingSpin 0.75s linear infinite;
}

@keyframes panelLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

.financeImportProgress {
  width: min(420px, 92%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.financeImportProgress.hidden {
  display: none;
}

.financeImportProgressTitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1a1f2e;
}

.financeImportProgressFile {
  margin: 0;
  font-size: 12px;
  color: #475569;
  word-break: break-all;
  line-height: 1.35;
  max-height: 2.7em;
  overflow: hidden;
}

.financeImportProgressTrack {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.financeImportProgressFill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #b78846, #d4a85a);
  transition: width 0.2s ease;
}

.financeImportProgressCount {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.productList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: var(--panel-body-gap) var(--panel-pad-x) var(--panel-pad-x);
  align-content: start;
  grid-auto-rows: max-content;
}

.productList .empty {
  grid-column: 1 / -1;
}

.appView:not(.is-active) .productList {
  content-visibility: hidden;
}

.product {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  min-height: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 76px;
}

.product--clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.product--clickable:hover {
  border-color: rgba(59, 110, 168, 0.35);
  background: rgba(59, 110, 168, 0.04);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.product--clickable:focus-visible {
  outline: 2px solid rgba(59, 110, 168, 0.45);
  outline-offset: 2px;
}

.product .primary {
  align-self: center;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--blue), var(--rose));
  object-fit: contain;
}

.productMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: center;
  min-width: 0;
}

.productCollection {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.productStockQty {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-dark, #1f4d43);
  line-height: 1.2;
}

.productMeta .productTitle {
  display: block;
  line-height: 1.25;
  font-size: 12px;
  font-weight: 700;
  color: #0c1c36;
}

.productSku {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.productPack {
  color: var(--ink);
  font-weight: 600;
}

.productWeight {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  color: var(--muted);
  font-weight: 400;
}

.productWeightSep {
  color: #b8c0bc;
  font-weight: 300;
}

.productPrices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.priceInline {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.priceValue {
  color: var(--accent-dark);
  font-weight: 700;
}

.panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: #fffaf2;
}

.hidden {
  display: none;
}

.mapping {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.brand {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quoteMeta {
  display: grid;
  grid-template-columns: 150px 150px;
  gap: 8px;
}

.clientGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.quoteTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.quoteTable th,
.quoteTable td {
  border-bottom: 1px solid var(--line);
  padding: 9px 6px;
  text-align: left;
  vertical-align: top;
}

.quoteTable th:nth-child(n + 2),
.quoteTable td:nth-child(n + 2) {
  text-align: right;
}

.quoteTable input {
  width: 68px;
  min-height: 32px;
  text-align: right;
}

.quoteTable button {
  min-height: 32px;
  padding: 5px 8px;
}

.itemName {
  font-weight: 700;
}

.itemSku {
  color: var(--muted);
  font-size: 12px;
}

.totals {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(190px, 0.9fr);
  gap: 12px;
  align-items: start;
  margin-top: 18px;
}

dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  font-weight: 750;
  text-align: right;
}

dl dt:last-of-type,
dl dd:last-of-type {
  color: var(--accent-dark);
  font-size: 17px;
}

.notes {
  margin-top: 18px;
}

textarea {
  resize: vertical;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .quotePanel {
    position: static;
  }

  .customersBody {
    grid-template-columns: 1fr;
  }

  .customersListPane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 240px;
  }

  .customerFormRow--identity,
  .customerFormRow--contact,
  .customerFormRow--meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .topbar,
  .toolbar,
  .filters,
  .toolbarActions {
    align-items: stretch;
    flex-direction: column;
  }

  .topbarActions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .catalogueToolbarActions {
    align-items: stretch;
  }

  .excelInlineStatus {
    max-width: none;
    text-align: left;
  }

  .filterRowsSelects,
  .filterRowsPrices {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .catalogueHeader {
    grid-template-columns: 1fr;
  }

  .catalogueHeading,
  .catalogueHeader .catalogueExcelGroup {
    grid-column: 1;
    grid-row: auto;
  }

  .catalogueHeader .catalogueExcelButtons {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .catalogueHeader .catalogueExcelButtons .quoteActionBtn {
    flex: 0 0 auto;
  }


  .filterRowsPrices > .priceRangeField:nth-child(1),
  .filterRowsPrices > .priceRangeField:nth-child(2),
  .filterRowsPrices > .filterSearchField,
  .filterRowsPrices > .resetFilters {
    grid-column: 1;
  }

  .filterRowsPrices .resetFilters {
    grid-column: 1;
  }

  .quoteEditorHeader,
  .quoteLibrary.panelAlignLibrary {
    grid-template-columns: 1fr;
  }

  .quoteEditorHeader > .panelHeading,
  .quoteToolbarTail {
    grid-template-columns: 1fr;
  }

  .quoteLibrary .quoteLibraryCustomerField,
  .quoteLibrary .quoteListField,
  .quoteToolbarTail,
  .quoteBrojActions,
  .quoteMetaTail,
  .quoteEditorGrid.panelAlignMeta > label,
  .quoteMetaTail > label,
  .quoteMetaTail .quotePreviewZoom {
    grid-column: 1;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .quoteBrojActions,
  .quoteMetaTail,
  .quoteToolbarTail {
    grid-template-columns: 1fr;
  }

  .quoteBrojActions .quoteLibraryActions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }

  .quoteToolbarTail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1;
    grid-row: auto;
  }

  .quoteToolbarActions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .quoteStatusBanner {
    flex: 1 1 100%;
    max-width: none;
  }

  .quoteToolbarTail .toolbarBtnFixed {
    width: auto;
    min-width: 0;
    max-width: none;
    justify-self: auto;
  }

  .productList {
    grid-template-columns: 1fr;
  }

  .clientGrid,
  .totals,
  .quoteMeta {
    grid-template-columns: 1fr;
  }
}

/* Nabavke — nalog za nabavku */
.nabavkeLayout {
  padding: 18px;
  height: calc(100vh - 84px);
  overflow: hidden;
  min-height: 0;
}

.nabavkePanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.nabavkePanel.hidden,
.nabavkeAccess.hidden {
  display: none;
}

.nabavkeAccess {
  padding: 24px;
}

.nabavkeMessageCard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  max-width: 520px;
}

.nabavkeMessageLead {
  color: var(--muted);
  margin-top: 8px;
}

.nabavkeToolbarActions,
.nabavkeFormHeadActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nabavkePanel .toolbarBtnFixed {
  width: auto;
  min-width: 108px;
  max-width: none;
  font-size: 12px;
  font-weight: 400;
  min-height: var(--control-height);
  height: var(--control-height);
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.nabavkeBody {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}

#nabavkeView .nabavkeBody {
  position: relative;
}

#nabavkeView .nabavkeListPane {
  border-right: none;
}

#nabavkeView #nabavkeEditorWorkspace.supplierRightPane {
  margin-top: calc(-1 * var(--hub-module-header-min-height));
  min-height: calc(100% + var(--hub-module-header-min-height));
  border-left: 1px solid var(--line);
  background: #fff;
}

#nabavkeView .nabavkeOrderForm.supplierSubPanel,
#nabavkeView .nabavkePregledPanel {
  overflow: auto;
  margin: 0;
  padding: 0 16px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

#nabavkeView .nabavkeOrderForm.supplierSubPanel > .nabavkeFormHead,
#nabavkeView .nabavkeOrderForm.supplierSubPanel > #nabavkeEditorEmpty {
  padding-top: 12px;
}

#nabavkeView .nabavkePregledPanel > .nabavkePregled {
  padding-top: 12px;
}

#nabavkeView .nabavkeOrderForm.is-idle > :not(#nabavkeEditorEmpty) {
  display: none;
}

#nabavkeView .nabavkeEditorEmpty {
  margin: 0;
  padding: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #0c1c36;
  text-align: left;
  line-height: 1.45;
}

.nabavkeListPane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
  background: #fcfcfa;
}

.nabavkeListSearchRow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.nabavkeListSearchRow input[type="search"] {
  flex: 1;
  min-width: 0;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.nabavkeFilterReset {
  flex: 0 0 var(--control-height);
  width: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
  font-size: 22px;
  color: var(--muted);
}

.nabavkeFilterReset:hover {
  color: var(--ink);
  border-color: #c9b48a;
  background: #f8f7f4;
}

.nabavkeOrderList {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.nabavkeOrderList li {
  margin: 0;
}

.nabavkeOrderList button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.nabavkeOrderList button:hover {
  border-color: #c9b48a;
}

.nabavkeOrderList button.is-selected {
  border-color: var(--accent);
  background: #f8f3ea;
}

.nabavkeOrderList strong {
  display: block;
  font-size: 14px;
  color: #0c1c36;
}

.nabavkeOrderList span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.nabavkeListEmpty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.nabavkeEditorEmpty.hidden {
  display: none;
}

.nabavkePregled {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
}

.nabavkePregledEmpty {
  margin: 0;
  padding: 20px 0;
  color: var(--muted);
  font-size: 14px;
}

.nabavkePregledHead {
  margin: 0;
}

.nabavkePregledTitle {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #0c1c36;
}

.nabavkePregledNotes {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.nabavkePregledMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nabavkePregledMetric {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafaf8;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nabavkePregledMetricLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.nabavkePregledMetricValue {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0c1c36;
  font-variant-numeric: tabular-nums;
}

.nabavkePregledBlock {
  margin: 0;
}

.nabavkePregledBlockTitle {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0c1c36;
}

.nabavkePregledTableWrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.nabavkePregledTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.nabavkePregledTable th,
.nabavkePregledTable td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eef1ee;
  vertical-align: middle;
}

.nabavkePregledTable th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #fafaf8;
}

.nabavkePregledTable td.num,
.nabavkePregledTable th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nabavkePregledTable tbody tr:last-child td {
  border-bottom: 0;
}

.nabavkePregledTotalRow td {
  background: #f8f9f7;
  border-top: 1px solid var(--line);
}

.nabavkePregledBlock--summary {
  max-width: 420px;
}

.nabavkePregledSummary {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.nabavkePregledSummaryRow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid #eef1ee;
  font-size: 13px;
}

.nabavkePregledSummaryRow:last-child {
  border-bottom: 0;
}

.nabavkePregledSummaryRow dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}

.nabavkePregledSummaryRow dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0c1c36;
}

.nabavkePregledSummaryRow--sub dd,
.nabavkePregledSummaryRow--sub dt {
  font-size: 12px;
}

.nabavkePregledSummaryRow--emph {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.nabavkePregledSummaryRow--emph dt,
.nabavkePregledSummaryRow--emph dd {
  font-size: 14px;
  font-weight: 700;
  color: #0c1c36;
}

@media (max-width: 900px) {
  .nabavkePregledMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nabavkePregledBlock--summary {
    max-width: none;
  }
}

.nabavkeOrderForm {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.nabavkeOrderForm:not(.hidden) {
  margin-top: 0;
}

.nabavkeFormHead {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.nabavkeField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.nabavkeField input,
.nabavkeField textarea,
.nabavkeField select {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.nabavkeField--grow {
  flex: 1;
  min-width: 200px;
}

.nabavkeSection {
  margin-bottom: 24px;
}

.nabavkeSectionHead h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #0c1c36;
}

.nabavkeStepFrame {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafaf8;
  box-shadow: 0 1px 3px rgba(12, 28, 54, 0.06);
}

.nabavkeStepHead {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.nabavkeStepTitle {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0c1c36;
}

.nabavkeStepLead {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
}

.nabavkeStepSubtitle {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0c1c36;
}

.nabavkeSectionLead {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.nabavkeOffersEmpty.hidden {
  display: none;
}

.nabavkeQuoteFilters.nabavkeOfferShuttleToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0;
}

.nabavkeOfferShuttle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto minmax(220px, 280px);
  column-gap: 12px;
  row-gap: 10px;
  align-items: stretch;
}

.nabavkeOfferShuttleToolbar {
  grid-column: 1;
  grid-row: 1;
  min-height: var(--control-height);
}

.nabavkeOfferShuttleToolbarSpacer {
  grid-column: 3;
  grid-row: 1;
  min-height: var(--control-height);
}

.nabavkeOfferShuttleActions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 0;
}

.nabavkeOfferShuttlePanel--available {
  grid-column: 1;
  grid-row: 2;
}

.nabavkeOfferShuttlePanel--selected {
  grid-column: 3;
  grid-row: 2;
}

.nabavkeOfferShuttlePanel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nabavkeOfferShuttlePanelBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.nabavkeOfferShuttleTitle {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #0c1c36;
}

.nabavkeOfferShuttleEmpty {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #d4d8de;
  border-radius: 8px;
  background: #fafaf8;
}

.nabavkeOfferShuttleEmpty.hidden {
  display: none;
}

.nabavkeOfferShuttleTableWrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  margin-top: 0;
}

.nabavkeOfferShuttleBtn {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nabavkeOfferShuttleBtn svg {
  width: 16px;
  height: 16px;
}

.nabavkeOfferShuttleBtn:hover:not(:disabled) {
  border-color: #c9b48a;
  background: #f8f7f4;
  color: var(--accent-dark);
}

.nabavkeOfferShuttleBtn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.nabavkeOffersTableWrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.nabavkeOfferShuttle .nabavkeOffersTableWrap {
  margin-top: 0;
}

.nabavkeOffersTableWrap.hidden {
  display: none;
}

.nabavkeOffersTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.nabavkeOffersTable th,
.nabavkeOffersTable td {
  text-align: left;
}

.nabavkeOffersTable th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #fafaf8;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.nabavkeOffersTable td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef1ee;
  vertical-align: middle;
  color: #0c1c36;
}

.nabavkeOffersTable tbody tr:last-child td {
  border-bottom: 0;
}

.nabavkeOffersTable tbody tr:hover td {
  background: #fcfcfa;
}

.nabavkeOffersTable tbody tr.nabavkeOfferRow {
  cursor: pointer;
}

.nabavkeOffersTable tbody tr.nabavkeOfferRow.is-selected td {
  background: #e8f0ec;
}

.nabavkeOffersTable tbody tr.nabavkeOfferRow.is-selected:hover td {
  background: #dce8e2;
}

.nabavkeOffersTable th.num,
.nabavkeOffersTable td.num {
  text-align: right;
  white-space: nowrap;
}

.nabavkeOffersTitle {
  font-weight: 500;
  max-width: 220px;
}

.nabavkeOffersInvoice {
  min-width: 140px;
}

.nabavkeInvoiceLinkWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.nabavkeInvoiceNameBtn {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nabavkeInvoiceNameBtn:hover {
  color: var(--accent-dark);
}

.nabavkeInvoiceClear {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.nabavkeInvoiceClear:hover {
  color: #b91c1c;
}

.nabavkeOffersDate {
  width: 100%;
  max-width: 132px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.nabavkeOffersInvoiceField {
  width: 100%;
  max-width: 120px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.nabavkeOffersActions {
  width: 36px;
  text-align: center;
}

.nabavkeOfferRemove {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.nabavkeOfferRemove:hover {
  color: #b91c1c;
}

.nabavkeStepFrame .nabavkeAddOffer {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.nabavkeAddOfferBtn {
  margin-bottom: 0;
}

.nabavkeAddOfferActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.nabavkeOfferStatus {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.nabavkeOfferStatus.hidden {
  display: none;
}

.nabavkeOfferStatus.is-error {
  color: #b42318;
  font-weight: 500;
}

.nabavkeOfferStatus.is-ok {
  color: var(--accent-dark);
}

.nabavkeOffersSubtitle {
  margin-top: 12px;
}

.nabavkeQuoteFilterInput,
.nabavkeQuoteClientFilter {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.nabavkeQuoteDateFilter {
  flex: 0 0 auto;
  height: var(--control-height);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.nabavkeQuoteSelect {
  width: 100%;
  min-height: 88px;
  margin-bottom: 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.nabavkeSection--step2 .nabavkeStepFrame .nabavkeAddSupplierFromOffer {
  margin: 0 0 4px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.nabavkeSelectedOfferHint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.nabavkeSection--step2 .nabavkeStepSubtitle {
  margin-top: 0;
}

.nabavkeAddSupplierFromOffer.hidden {
  display: none;
}

.nabavkeAddSupplierFromOfferRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nabavkeSupplierStatus {
  flex: 1 1 200px;
  min-width: 140px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.nabavkeSupplierStatus:empty {
  display: none;
}

.nabavkeSupplierStatus.is-error {
  color: #b42318;
  font-weight: 500;
}

.nabavkeSupplierStatus.is-ok {
  color: var(--accent-dark);
}

.nabavkeAddSupplier {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.nabavkeSupplierOfferPick {
  flex: 1 1 200px;
  min-width: 160px;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
}

.nabavkeSupplierPick {
  flex: 1 1 220px;
  width: auto;
  min-width: 160px;
  max-width: 320px;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
}

.nabavkeSupplierEmpty {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.nabavkeSupplierEmpty.hidden {
  display: none;
}

.nabavkeSupplierTableWrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.nabavkeSupplierTableWrap.hidden {
  display: none;
}

.nabavkeSupplierTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.nabavkeSupplierTable th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #fafaf8;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.nabavkeSupplierTable td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef1ee;
  vertical-align: middle;
}

.nabavkeSupplierTable tbody tr:last-child td {
  border-bottom: 0;
}

.nabavkeSupplierSelect {
  width: 100%;
  min-width: 100px;
  max-width: 130px;
  height: 32px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.nabavkeSection--step3 .nabavkeAddTransportForm {
  margin: 0 0 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.nabavkeSection--step3 .nabavkeStepSubtitle {
  margin-top: 0;
}

.nabavkeAddTransportActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nabavkeAddTransportForm {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(100px, 1fr)) auto;
  gap: 8px 10px;
  align-items: end;
}

.nabavkeAddTransportField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.nabavkeAddTransportFieldLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.nabavkeTransportCostPick,
.nabavkeTransportFormInput {
  width: 100%;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
}

.nabavkeAddTransportBtn {
  align-self: end;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nabavkeAddTransportForm {
    grid-template-columns: 1fr 1fr;
  }

  .nabavkeAddTransportField--type {
    grid-column: 1 / -1;
  }

  .nabavkeAddTransportBtn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.nabavkeTransportStatus {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.nabavkeTransportStatus:empty {
  display: none;
}

.nabavkeTransportStatus.is-error {
  color: #b42318;
  font-weight: 500;
}

.nabavkeTransportStatus.is-ok {
  color: var(--accent-dark);
}

.nabavkeTransportEmpty {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.nabavkeTransportEmpty.hidden {
  display: none;
}

.nabavkeTransportTableWrap {
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.nabavkeTransportTableWrap.hidden {
  display: none;
}

.nabavkeTransportTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.nabavkeTransportTable th,
.nabavkeTransportTable td {
  text-align: left;
}

.nabavkeTransportTable th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #fafaf8;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.nabavkeTransportTable td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef1ee;
  vertical-align: middle;
  color: #0c1c36;
}

.nabavkeTransportTable tbody tr:last-child td {
  border-bottom: 0;
}

.nabavkeTransportLabel {
  font-weight: 500;
}

.nabavkeTransportTable tbody tr.nabavkeTransportRow {
  cursor: pointer;
}

.nabavkeTransportTable tbody tr.nabavkeTransportRow.is-selected td {
  background: #e8f5ef;
}

.nabavkeTransportTable tbody tr.nabavkeTransportRow.is-selected:hover td {
  background: #dff0e8;
}

.nabavkeTransportFormInput[readonly] {
  background: #f4f6f4;
  color: var(--muted);
}

.nabavkeClearTransportBtn.hidden {
  display: none;
}

.nabavkeAmountInput {
  width: 100%;
  max-width: 96px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: right;
}

.nabavkeDocLinkWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.nabavkePiPickerOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}

.nabavkePiPickerOverlay.hidden {
  display: none;
}

.nabavkePiPickerCard {
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.nabavkePiPickerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nabavkePiPickerTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.nabavkePiPickerStatus {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.nabavkePiPickerStatus.is-error {
  color: #b42318;
}

.nabavkePiPickerToolbar {
  display: flex;
  gap: 8px;
}

.nabavkePiPickerTableWrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.nabavkePiPickerTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.nabavkePiPickerTable th,
.nabavkePiPickerTable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.nabavkePiPickerTable th {
  background: #f8fafc;
  font-weight: 600;
}

.nabavkePiPickerPick {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent, #0f766e);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.nabavkePiPickerPick:hover {
  text-decoration: underline;
}

.nabavkePiPickerEmpty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.nabavkePiPickerEmpty.hidden {
  display: none;
}

.nabavkeField--notes {
  display: block;
  margin-top: 8px;
  margin-bottom: 32px;
}

.nabavkeField--notes textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
}

.nabavkeSaveStatus {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 18px;
}

.nabavkeSaveStatus:empty {
  display: none;
  margin: 0;
}

.nabavkeSaveStatus.is-error {
  color: #b42318;
  font-weight: 500;
}

.nabavkeLegacy.hidden {
  display: none !important;
}

button.danger,
.toolbarBtnFixed.danger {
  border-color: #e8b4b4;
  color: #b42318;
  background: #fff;
}

button.danger:hover,
.toolbarBtnFixed.danger:hover {
  background: #fef2f2;
}

@media (max-width: 900px) {
  .nabavkeBody {
    grid-template-columns: 1fr;
  }

  .nabavkeListPane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 240px;
  }

  .nabavkeOfferShuttle {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 8px;
  }

  .nabavkeOfferShuttleToolbar,
  .nabavkeOfferShuttleToolbarSpacer,
  .nabavkeOfferShuttleActions,
  .nabavkeOfferShuttlePanel--available,
  .nabavkeOfferShuttlePanel--selected {
    grid-column: 1;
    grid-row: auto;
  }

  .nabavkeOfferShuttleToolbarSpacer {
    display: none;
  }

  .nabavkeOfferShuttlePanel--available,
  .nabavkeOfferShuttlePanel--selected {
    min-height: 220px;
  }

  .nabavkeOfferShuttleActions {
    flex-direction: row;
    justify-content: center;
    padding: 4px 0;
  }

  .nabavkeOffersTableWrap,
  .nabavkeOfferShuttleTableWrap {
    overflow-x: auto;
  }
}

/* Marža — legacy / internal totals */
.marzaLayout {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 20px 32px;
}

.marzaPanel {
  display: block;
}

.marzaPanel.hidden {
  display: none;
}

.marzaMessageCard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  max-width: 520px;
}

.marzaMessageLead {
  color: var(--muted);
  margin-top: 8px;
}

.marzaHeader {
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.marzaSearch {
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.marzaBody {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.marzaListPane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.marzaBatchList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.marzaBatchCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.marzaBatchCard:hover {
  border-color: #9eb4d0;
}

.marzaBatchCard.is-active {
  border-color: #0c1c36;
  background: #f4f7fb;
}

.marzaBatchCardTitle {
  font-weight: 600;
  color: #0c1c36;
  font-size: 14px;
}

.marzaBatchCardMeta,
.marzaBatchCardMargin {
  font-size: 12px;
  color: var(--muted);
}

.marzaEditorPane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  min-height: 420px;
}

.marzaEmpty {
  color: var(--muted);
  padding: 24px 8px;
}

.marzaBatchForm label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.marzaBatchForm input,
.marzaBatchForm select,
.marzaBatchForm textarea {
  font-size: 14px;
  color: #0c1c36;
}

.marzaFormHead {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.marzaField--grow {
  flex: 1;
  min-width: 200px;
}

.marzaFormHeadActions {
  display: flex;
  gap: 8px;
}

.marzaTransport {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.marzaTransport legend {
  font-size: 13px;
  font-weight: 600;
  color: #0c1c36;
  padding: 0 6px;
}

.marzaTransportGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}

.marzaLinesHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.marzaLinesHead h3 {
  font-size: 15px;
  color: #0c1c36;
}

.marzaTableWrap {
  overflow: auto;
  margin-bottom: 12px;
}

.marzaTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.marzaTable th,
.marzaTable td {
  border-bottom: 1px solid var(--line);
  padding: 6px 4px;
  vertical-align: top;
}

.marzaTable th {
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.marzaTable th.num,
.marzaTable td.num {
  text-align: right;
}

.marzaTable input,
.marzaTable select {
  width: 100%;
  min-width: 64px;
  padding: 4px 6px;
  border: 1px solid #d5dbe3;
  border-radius: 6px;
}

.marzaMini {
  margin-top: 4px;
  font-size: 11px;
}

.marzaCheckCell {
  text-align: center;
}

.marzaCheckCell input {
  width: auto;
  min-width: 0;
}

.marzaLineRemove {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.marzaLineRemove:hover {
  color: #b91c1c;
}

.marzaTotalsRow td {
  background: #f8fafc;
}

.marzaTotalsRow--emph td {
  font-weight: 600;
}

.marzaMargins {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.marzaMarginCard {
  background: #f4f7fb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.marzaMarginLabel {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.marzaMarginCard strong {
  font-size: 18px;
  color: #0c1c36;
}

.marzaField--notes textarea {
  width: 100%;
  resize: vertical;
}

.marzaSaveStatus {
  font-size: 13px;
  color: #64748b;
  margin-top: 8px;
}

.marzaSaveStatus.is-error {
  color: #b91c1c;
}

.marzaListHeading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 8px;
}

.marzaOrderSection {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.marzaOrderSection h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #0c1c36;
}

.marzaSectionLead {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.marzaOfferPickRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.marzaOfferFilter {
  margin-bottom: 6px;
}

.marzaQuoteSelect {
  width: 100%;
  min-height: 140px;
  font-size: 13px;
}

.marzaOfferPickActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 2px;
}

.marzaQuotePreview {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}

.marzaQuotePreview--empty {
  color: var(--muted);
}

.marzaQuotePreviewHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.marzaQuotePreviewHead strong {
  font-size: 15px;
  color: #0c1c36;
}

.marzaQuotePreviewBadge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
}

.marzaQuotePreviewBadge.is-attached {
  background: #dcfce7;
  color: #166534;
}

.marzaQuotePreviewTotals {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.marzaQuotePreviewTotals div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.marzaQuotePreviewTotals dt {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.marzaQuotePreviewTotals dd {
  margin: 0;
  font-weight: 600;
  color: #0c1c36;
}

.marzaQuotePreviewHint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.marzaSaleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px 12px;
}

.marzaOrderMore {
  margin-bottom: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 12px 12px;
}

.marzaOrderMore summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
}

@media (max-width: 900px) {
  .marzaOfferPickRow {
    grid-template-columns: 1fr;
  }

  .marzaQuotePreviewTotals {
    grid-template-columns: repeat(2, 1fr);
  }

  .marzaSaleGrid {
    grid-template-columns: 1fr;
  }
}

button.danger {
  background: #fff;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

@media (max-width: 1100px) {
  .marzaBody {
    grid-template-columns: 1fr;
  }

  .marzaListPane {
    max-height: 220px;
  }
}

@media (max-width: 900px) {
  .customerDocumentRootHead,
  .customerDocumentYearHead,
  .customerDocumentOfferHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .customerDocumentRootHead > span {
    text-align: left;
  }

  .customerDocumentOfferHead code {
    max-width: 100%;
  }

  .customerDocumentFile {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media print {
  body {
    background: #fff;
  }

  .topbar,
  #customersView,
  .catalogue,
  .screenOnly {
    display: none !important;
  }

  #quotesView {
    display: block !important;
  }

  .layout {
    display: block;
    padding: 0;
  }

  .quotePanel {
    border: 0;
    position: static;
    padding: 0;
    overflow: visible !important;
  }

  .quoteDocument,
  .quoteDocumentViewport {
    overflow: visible !important;
  }

  .quoteEditor textarea,
  .quoteEditor input,
  .customerForm input,
  .customerForm textarea,
  .catalogueControls input,
  .catalogueControls textarea {
    border: 0 !important;
    padding-left: 0 !important;
  }
}

/* —— Pregled (overview dashboard) —— */
.overviewLayout {
  padding: 18px 20px 24px;
  height: calc(100vh - 84px);
  overflow: auto;
  min-height: 0;
}

.overviewPageHeader {
  margin-bottom: 18px;
}

.overviewPageHeaderBody {
  width: 100%;
  min-width: 0;
}

.overviewPageHeaderTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.overviewPageHeaderTop h2 {
  margin: 0;
  font-size: 1.35rem;
}

.overviewPageHeaderBody p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.overviewRefreshBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.overviewRefreshBtn:hover {
  border-color: rgba(59, 110, 168, 0.35);
  background: rgba(59, 110, 168, 0.06);
}

.overviewRefreshBtn:focus-visible {
  outline: 2px solid rgba(59, 110, 168, 0.45);
  outline-offset: 2px;
}

.overviewRefreshBtnIcon {
  width: 16px;
  height: 16px;
  display: block;
}

.overviewGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: stretch;
}

.overviewGrid > .overviewCard {
  min-width: 0;
}

.overviewCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px 18px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.overviewCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.overviewCardHeader h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.overviewCardHeader p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.overviewCardAction,
.overviewCardBadge {
  flex: 0 0 auto;
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
}

.overviewCardAction {
  cursor: pointer;
  color: var(--accent);
  border-color: rgba(59, 110, 168, 0.25);
  background: rgba(59, 110, 168, 0.06);
}

.overviewCardAction:hover {
  background: rgba(59, 110, 168, 0.12);
}

.overviewSummaryPills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.overviewSummaryPill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  text-align: left;
}

.overviewSummaryPill--link {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.overviewSummaryPill--link:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 110, 168, 0.35);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.overviewSummaryPill--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.overviewSummaryPill strong {
  font-size: 1.15rem;
  line-height: 1.1;
}

.overviewSummaryPillLabel {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overviewSummaryPill--won {
  border-color: rgba(46, 125, 87, 0.25);
  background: rgba(46, 125, 87, 0.07);
}

.overviewSummaryPill--active {
  border-color: rgba(59, 110, 168, 0.22);
  background: rgba(59, 110, 168, 0.06);
}

.overviewSummaryPill--other {
  border-color: rgba(138, 143, 152, 0.28);
}

.overviewSummaryPill--lost {
  border-color: rgba(184, 92, 92, 0.28);
  background: rgba(184, 92, 92, 0.06);
}

.overviewCard--customers .overviewCustomersChart {
  display: block;
  flex: 0 0 auto;
}

.overviewCard--customers .overviewSalesFunnelChart {
  display: block;
  width: 100%;
  max-width: min(100%, 640px);
  margin-inline: auto;
}

.overviewSalesFunnelChart {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.overviewCard--customers .overviewPhaseBarSvg {
  width: 100%;
  max-width: min(100%, 640px);
  height: auto;
  display: block;
}

.overviewSalesFunnelSvg,
.overviewPhaseBarSvg {
  width: 100%;
  max-width: min(100%, 640px);
  height: auto;
  display: block;
  margin-inline: auto;
}

.overviewPhaseBarSvg .overviewSalesFunnelLabel {
  font-size: 0.7rem;
}

.overviewSalesFunnelGrid {
  stroke: var(--line);
  stroke-dasharray: 4 4;
  opacity: 0.7;
}

.overviewSalesFunnelAxisLine {
  stroke: var(--line);
}

.overviewSalesFunnelAxis {
  font-size: 0.68rem;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.overviewSalesFunnelBar {
  opacity: 0.92;
}

.overviewSalesFunnelLabel {
  font-size: 0.72rem;
  fill: var(--muted);
}

.overviewSalesFunnelValue {
  font-size: 0.72rem;
  fill: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.overviewSalesFunnelValue--inBar {
  fill: #fff;
}

.overviewCustomersChart {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  gap: 12px 18px;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

.overviewDonutWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.overviewDonutSvg {
  width: 188px;
  height: 188px;
  display: block;
}

.overviewDonutTotal {
  font-size: 1.65rem;
  font-weight: 700;
  fill: var(--text);
}

.overviewDonutTotalLabel {
  font-size: 0.72rem;
  fill: var(--muted);
}

.overviewLegend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 12px max-content 2.25rem;
  column-gap: 5px;
  row-gap: 8px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  font-size: 0.86rem;
}

.overviewLegendItem {
  display: contents;
}

.overviewLegendLabel {
  grid-column: 2;
  text-align: left;
  white-space: nowrap;
}

.overviewLegendSwatch {
  grid-column: 1;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.overviewLegendValue {
  grid-column: 3;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.overviewQuoteSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 8px;
  margin-bottom: 14px;
}

.overviewQuoteSummaryRow {
  display: contents;
}

.overviewQuoteSummaryRow .overviewSummaryPill--count {
  grid-row: 1;
  grid-column: var(--quote-col);
}

.overviewQuoteSummaryRow .overviewSummaryPill--value {
  grid-row: 2;
  grid-column: var(--quote-col);
}

.overviewSummaryPills--quotes,
.overviewSummaryPills--quoteValues {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

.overviewSummaryPill--value {
  cursor: default;
  pointer-events: none;
}

.overviewCard--quotes .overviewQuotesChart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.overviewCard--quotes .overviewQuoteFunnelWrap {
  width: 100%;
  min-height: 0;
  justify-content: stretch;
}

.overviewQuoteFunnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.overviewQuoteFunnelRow {
  width: 100%;
}

.overviewQuoteFunnelTrack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(217, 222, 216, 0.45);
  overflow: hidden;
}

.overviewQuoteFunnelFill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  z-index: 0;
  min-width: 0;
}

.overviewQuoteFunnelLabel {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text, #0c1c36);
  white-space: nowrap;
}

.overviewQuoteFunnelValue {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text, #0c1c36);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overviewCard--quotes .overviewQuoteFunnelSvg {
  width: 100%;
  max-width: 100%;
  height: 92px;
  display: block;
}

.overviewQuoteFunnelEmpty {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.overviewQuoteMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.overviewMetric {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  min-height: 58px;
}

.overviewMetricCopy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.overviewMetricLabel {
  font-size: 0.78rem;
  line-height: 1.2;
}

.overviewMetricHint {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overviewMetricValue {
  font-size: 1rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overviewSummaryPills--quotes .overviewSummaryPill strong {
  font-size: 0.98rem;
}

.overviewCard--topClients,
.overviewCard--segments {
  min-height: 280px;
}

.overviewTopClientsBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.overviewTopClientsTable {
  --topClients-cols: 1.75rem minmax(0, 1fr) 3.75rem 4.85rem 3.75rem;
  min-width: 0;
}

.overviewTopClientsHead,
.overviewTopClientRow {
  display: grid;
  grid-template-columns: var(--topClients-cols);
  column-gap: 10px;
  align-items: center;
}

.overviewTopClientsHead {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.overviewTopClientsHeadMetric,
.overviewTopClientMetric {
  text-align: right;
}

.overviewTopClientsList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overviewTopClientRow {
  padding: 9px 10px;
  border-radius: 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.overviewTopClientRow:nth-child(even) {
  background: rgba(15, 23, 42, 0.02);
}

.overviewTopClientRow[data-overview-customer] {
  cursor: pointer;
}

.overviewTopClientRow[data-overview-customer]:hover {
  background: rgba(59, 110, 168, 0.06);
}

.overviewTopClientRow[data-overview-customer]:focus-visible {
  outline: 2px solid rgba(59, 110, 168, 0.45);
  outline-offset: 1px;
}

.overviewTopClientRankBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.05);
}

.overviewTopClientRankBadge--top1 {
  color: #7a5c00;
  background: rgba(201, 162, 39, 0.18);
}

.overviewTopClientRankBadge--top2 {
  color: #475569;
  background: rgba(148, 163, 184, 0.22);
}

.overviewTopClientRankBadge--top3 {
  color: #8b5a2b;
  background: rgba(212, 165, 116, 0.24);
}

.overviewTopClientIdentity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.overviewTopClientName {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overviewTopClientBar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(217, 222, 216, 0.55);
  overflow: hidden;
}

.overviewTopClientBarFill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2e7d57, #3d9970);
}

.overviewTopClientMetric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

.overviewTopClientMetricCount {
  font-size: 0.82rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overviewTopClientMetricAmount {
  font-size: 0.64rem;
  line-height: 1.1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overviewTopClientMetric--accepted .overviewTopClientMetricCount {
  font-size: 0.88rem;
  color: #2e7d57;
}

.overviewTopClientMetric--lost .overviewTopClientMetricCount {
  color: #b85c5c;
}

.overviewTopClientsEmpty {
  padding: 18px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}

.overviewSegmentBody {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
}

.overviewSegmentChart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.overviewSegmentRow {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) minmax(0, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.overviewSegmentLabel {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.overviewSegmentTrack {
  position: relative;
  min-height: 22px;
  border-radius: 6px;
  background: rgba(217, 222, 216, 0.45);
  overflow: hidden;
}

.overviewSegmentFill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 0;
  border-radius: inherit;
}

.overviewSegmentValue {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  justify-self: end;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overviewSegmentTotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

.overviewSegmentTotal strong {
  font-size: 0.92rem;
  color: #2e7d57;
  font-variant-numeric: tabular-nums;
}

.overviewSegmentEmpty {
  padding: 18px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}

.overviewCard--placeholder .overviewPlaceholderBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.overviewPlaceholderChart {
  height: 120px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: linear-gradient(135deg, rgba(59, 110, 168, 0.05), rgba(46, 125, 87, 0.04));
}

.overviewError {
  padding: 18px;
  border: 1px solid #e8b4b4;
  background: #fff5f5;
  border-radius: 8px;
  color: #8a2f2f;
}

@media (max-width: 1100px) {
  .overviewGrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .overviewCard {
    height: auto;
  }

  .overviewCard--customers .overviewPhaseBarSvg {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
  }

  .overviewSummaryPills--quotes,
  .overviewSummaryPills--quoteValues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overviewCustomersChart {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .overviewQuoteMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* Pregled — phone layout only (desktop/tablet styles above stay unchanged) */
@media (max-width: 640px) {
  #overviewView.appView.is-active {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .overviewLayout {
    height: auto;
    min-height: calc(100dvh - 240px);
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
  }

  .overviewPageHeader {
    margin-bottom: 14px;
  }

  .overviewPageHeaderTop h2 {
    font-size: 1.2rem;
  }

  .overviewPageHeaderBody p {
    font-size: 0.85rem;
  }

  .overviewRefreshBtn {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .overviewGrid {
    gap: 12px;
    min-height: 0;
  }

  .overviewCard {
    padding: 14px;
    border-radius: 12px;
  }

  .overviewCardHeader {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .overviewCardHeader h2 {
    font-size: 1rem;
  }

  .overviewCardHeader p {
    font-size: 0.78rem;
  }

  .overviewCardAction {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.82rem;
  }

  .overviewCard .overviewSummaryPills:not(.overviewSummaryPills--quotes):not(.overviewSummaryPills--quoteValues) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overviewSummaryPills--quotes,
  .overviewSummaryPills--quoteValues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .overviewQuoteSummary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
  }

  .overviewQuoteSummaryRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .overviewQuoteSummaryRow .overviewSummaryPill--count,
  .overviewQuoteSummaryRow .overviewSummaryPill--value {
    grid-row: auto;
    grid-column: auto;
  }

  .overviewQuoteSummaryRow .overviewSummaryPill--value .overviewSummaryPillLabel {
    display: none;
  }

  .overviewQuoteSummaryRow .overviewSummaryPill--value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
  }

  .overviewSummaryPill {
    padding: 10px;
    min-height: 52px;
  }

  .overviewSummaryPillLabel {
    font-size: 0.66rem;
  }

  .overviewSummaryPill strong {
    font-size: 1.05rem;
  }

  .overviewQuoteSummary {
    gap: 6px;
    margin-bottom: 10px;
  }

  .overviewSalesFunnelChart {
    overflow-x: hidden;
    justify-content: center;
    width: 100%;
  }

  .overviewPhaseBarSvg,
  .overviewSalesFunnelSvg {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .overviewCard--quotes .overviewQuoteFunnelTrack {
    min-height: 28px;
  }

  .overviewQuoteFunnelLabel,
  .overviewQuoteFunnelValue {
    font-size: 0.78rem;
  }

  .overviewQuoteMetrics {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .overviewMetric {
    min-height: 0;
    padding: 10px;
  }

  .overviewMetricLabel {
    font-size: 0.82rem;
  }

  .overviewMetricValue {
    font-size: 1.05rem;
  }

  .overviewCustomersChart {
    gap: 10px;
  }

  .overviewPlaceholderChart {
    height: 96px;
  }

  .overviewTopClientsTable {
    --topClients-cols: 1.5rem minmax(9rem, 1fr) 3.25rem 4.25rem 3.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -2px;
    padding: 0 2px;
  }

  .overviewTopClientsHead,
  .overviewTopClientRow {
    min-width: 460px;
  }

  .overviewTopClientName {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .overviewSegmentBody {
    overflow-x: hidden;
    padding-right: 0;
  }

  .overviewSegmentRow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
  }

  .overviewSegmentLabel {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.72rem;
  }

  .overviewSegmentValue {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.72rem;
    max-width: 46vw;
  }

  .overviewSegmentTrack {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 18px;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 10px;
    gap: 10px;
    overflow: visible;
  }

  .topbarBrand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 6px;
    width: 100%;
    align-items: center;
  }

  .topbarCopy {
    display: contents;
  }

  .topbarLogo {
    grid-column: 1;
    grid-row: 1;
    height: 52px;
    max-width: 112px;
    justify-self: start;
    align-self: center;
  }

  .topbarCopy h1 {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    text-align: center;
  }

  .topbarCopy h1 .topbarVersion {
    margin-left: 0;
    flex: 0 0 auto;
  }

  .topbarCopy p {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    width: 100%;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
    text-align: center;
  }

  .topbarActions {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    overflow: visible;
  }

  .topbarNav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }

  .topbarNav .navBtn {
    width: 100%;
    min-height: 40px;
    padding: 8px 4px;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .topbarUserArea {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .topbarUserBadge {
    font-size: 0.82rem;
  }
}