.view {
  display: none;
}

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

.view.is-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 18px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: var(--cc-block-bottom-gap);
}

.view.is-active:has(> .active-filter-banner:not([hidden])) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
}

.view.is-active > .panel,
.view.is-active > .project-grid,
.view.is-active > .dashboard-grid,
.view.is-active > .detail-grid {
  min-height: 0;
}

.view.is-active > .panel:has(> .table-wrap) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  padding-bottom: var(--cc-block-bottom-gap);
}

.view.is-active > .panel:has(> .table-wrap) > .table-wrap {
  min-height: 0;
}

.view[data-view="materials"].is-active > .materials-catalog-panel {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 0;
  padding-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.view[data-view="materials"].is-active > .materials-catalog-panel.has-catalog-selection {
  gap: 12px;
  grid-template-rows: minmax(0, 1fr) 208px;
}

.materials-catalog-table-wrap {
  min-height: 0;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel) 86%, var(--cc-bg));
}

.material-detail-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 16px;
  min-height: 0;
}

.detail-subpanel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.detail-subpanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.option-stack {
  display: grid;
  align-content: start;
  gap: 14px;
}

.transport-stock-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 110px 110px;
  align-items: end;
  gap: 12px;
}

.transport-stock-row .field {
  min-width: 0;
}

.transport-stock-row .checkbox-field {
  min-height: 38px;
}

.transport-stock-row .count-input {
  width: 100%;
}

@media (max-width: 760px) {
  .transport-stock-row {
    grid-template-columns: 1fr;
  }
}

.material-settings-locked .scc-select-value {
  min-height: 38px;
  padding: 8px 34px 8px 10px;
  border-color: color-mix(in srgb, var(--cc-line) 72%, transparent);
  background: color-mix(in srgb, var(--cc-bg) 68%, var(--cc-panel));
  color: var(--cc-muted);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
  -webkit-text-fill-color: var(--cc-muted);
}

.material-settings-locked .scc-select-value strong,
.material-settings-locked .scc-select-value span {
  color: inherit;
}

.material-settings-locked .scc-select-value::after {
  content: "\f023";
  top: 50%;
  right: 12px;
  width: auto;
  height: auto;
  border: 0;
  transform: translateY(-50%);
  color: var(--cc-muted);
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-size: 0.76rem;
  line-height: 1;
}

.material-settings-locked .scc-select-menu {
  display: none;
}

.material-settings-locked .scc-select.is-disabled {
  pointer-events: none;
}

body.daylight .material-settings-locked .scc-select-value {
  border-color: #c6d0dc;
  background: #e3e8ef;
  color: var(--cc-text-disabled);
  -webkit-text-fill-color: var(--cc-text-disabled);
}

.nav-divider {
  display: block;
  width: var(--cc-sidebar-collapsed);
  height: 1px;
  margin: 8px 0;
  background: color-mix(in srgb, var(--cc-line) 82%, transparent);
}

.sidebar:hover .nav-divider,
.sidebar:focus-within .nav-divider {
  width: 100%;
}

body.daylight .nav-divider {
  background: #b8c7d8;
}

body.daylight .material-settings-locked .scc-select-value::after {
  color: var(--cc-text-disabled);
}

.material-planning-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  overflow: hidden;
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, var(--cc-panel));
}

.material-planning-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}

.material-planning-grid {
  --material-planning-left: 280px;
  --material-planning-action: 44px;
  --material-planning-number: 86px;
  --material-planning-day-count: 7;
  display: grid;
  grid-template-columns: minmax(210px, var(--material-planning-left)) minmax(40px, var(--material-planning-action)) repeat(2, minmax(58px, var(--material-planning-number))) minmax(0, 1fr);
  align-content: start;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--cc-line);
  border-width: 0 0 1px;
  border-radius: 0;
  overflow: hidden;
  background: var(--cc-panel);
  font-size: 0.78rem;
}

.material-planning-head,
.material-planning-timeline-head {
  display: grid;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-accent);
  background: var(--cc-panel-deep);
}

.material-planning-number-head {
  justify-items: center;
  text-align: center;
}

.material-planning-head .sort-label {
  min-width: 0;
  color: inherit;
}

.material-planning-number-head .sort-label {
  justify-content: center;
  text-align: center;
}

.material-planning-head .sort-label.is-active {
  color: var(--cc-text);
}

.material-planning-head .sort-label.is-active i {
  color: var(--cc-accent);
}

.material-planning-action-head {
  justify-items: center;
  text-align: center;
}

.material-planning-timeline-head {
  grid-template-columns: repeat(var(--material-planning-day-count), minmax(0, 1fr));
  padding: 0;
}

.material-planning-timeline-head span {
  display: grid;
  min-width: 0;
  min-height: 34px;
  place-items: center;
  padding: 6px 4px;
  border-left: 1px solid var(--cc-line);
  color: var(--cc-accent);
  font-size: 0.72rem;
  white-space: nowrap;
}

.material-planning-timeline-head span.is-weekend {
  background: var(--availability-weekend-bg, color-mix(in srgb, var(--cc-accent) 8%, transparent));
}

.material-planning-group-row {
  grid-column: 1 / -1;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--cc-line-strong) 54%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-line-strong) 16%, var(--cc-panel));
  color: var(--cc-text);
  font-weight: 700;
}

.material-planning-cell,
.material-planning-action,
.material-planning-number,
.material-planning-timeline {
  min-height: 42px;
  border-bottom: 1px solid var(--cc-line);
}

.material-planning-cell {
  display: grid;
  align-content: center;
  padding: 6px 9px;
}

.material-planning-cell strong {
  overflow: hidden;
  color: var(--cc-text);
  font-size: 0.84rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-planning-action,
.material-planning-number {
  display: grid;
  place-items: center;
  padding: 6px;
  color: var(--cc-text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.material-planning-action .small-action {
  color: var(--cc-accent);
}

.material-planning-action .small-action i {
  display: inline-block;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1;
}

.material-planning-number.is-muted {
  color: var(--cc-muted);
}

.material-planning-number .badge {
  min-width: 42px;
  justify-content: center;
}

.material-planning-defect-badge {
  min-width: 38px;
}

.material-planning-timeline {
  position: relative;
  min-height: 42px;
  overflow: hidden;
  background-color: var(--cc-panel);
}

.material-planning-bar {
  top: 50%;
  font-size: 0.72rem;
  min-height: 20px;
  border-radius: 999px;
  cursor: pointer;
}

.material-planning-bar[data-material-planning-bar] {
  cursor: pointer;
}

.material-planning-bar [data-catalog-bar-label] {
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-planning-bar.is-shortage {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc-danger) 40%, transparent);
}

body.daylight .material-planning-panel {
  border-color: #c8d5e3;
  background: #ffffff;
}

body.daylight .material-planning-grid {
  border-color: #c8d5e3;
  background: #ffffff;
}

body.daylight .material-planning-head,
body.daylight .material-planning-timeline-head,
body.daylight .material-planning-timeline-head span {
  border-color: #d4dfeb;
  background: linear-gradient(180deg, #f2f7fc, #eaf2fa);
  color: #0986be;
}

body.daylight .material-planning-group-row {
  border-color: #d4dfeb;
  background: #eef5fc;
  color: #0b1836;
}

body.daylight .material-planning-cell,
body.daylight .material-planning-action,
body.daylight .material-planning-number,
body.daylight .material-planning-timeline {
  border-color: #d4dfeb;
}

body.daylight .material-planning-timeline {
  background-color: #fbfdff;
}

@media (max-width: 1180px) {
  .material-planning-grid {
    --material-planning-left: 230px;
    --material-planning-action: 40px;
    --material-planning-number: 70px;
  }
}

.material-detail-data-grid .field > .label {
  background: transparent;
}

.archive-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 78%, transparent);
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-panel-soft) 72%, transparent);
}

.archive-option > div {
  display: grid;
  gap: 6px;
}

.archive-option .badge {
  width: max-content;
}

body.daylight .archive-option {
  border-color: #c6d0dc;
  background: #f4f7fb;
}

.table-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}

.table-section-header h2 {
  margin: 0;
}

.screen-header h1 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 400;
}

.screen-header .toolbar {
  flex: 0 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.screen-header .search-input {
  width: clamp(220px, 24vw, 360px);
  min-width: 0;
}

.screen-header .btn {
  flex: 0 0 auto;
  min-height: 34px;
}

.project-filter-button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--cc-muted);
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    border-color 0.14s ease,
    color 0.14s ease,
    background 0.14s ease;
}

.project-filter-button i {
  color: var(--cc-accent);
}

.project-filter-button:hover {
  border-color: var(--cc-accent);
  color: var(--cc-text);
  background: var(--cc-accent-soft);
}

.filter-context-panel {
  display: grid;
  gap: 14px;
}

.filter-context-panel[hidden] {
  display: none;
}

.view[data-view="dashboard"].is-active {
  grid-template-rows: auto minmax(210px, 34%) minmax(180px, 1fr);
  overflow: hidden;
}

.view[data-view="project-detail"] > .panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.view[data-view="project-detail"] > .panel > .tab-panel {
  min-height: 0;
}

.view[data-view="project-detail"] > .panel > .tab-panel[data-panel="gegevens"].is-active {
  overflow: auto;
  overscroll-behavior: contain;
}

.view[data-view="project-detail"] > .panel > .tab-panel[data-panel="gegevens"].is-active:has(.scc-select.is-open),
.view[data-view="project-detail"] > .panel > .tab-panel[data-panel="gegevens"].is-active:has(.scc-select:focus-within),
.view[data-view="project-detail"] > .panel > .tab-panel[data-panel="gegevens"].is-active:has(.relation-combobox:focus-within),
.view[data-view="project-detail"] > .panel > .tab-panel[data-panel="gegevens"].is-active:has(.relation-combobox.is-open) {
  overflow: auto;
}

.view[data-view="client-detail"] > .panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.view[data-view="client-detail"] > .panel > .tab-panel {
  min-height: 0;
}

.view[data-view="client-detail"] > .panel > .tab-panel.is-active {
  overflow: auto;
  overscroll-behavior: contain;
}

.client-detail-body {
  min-height: 0;
}

.client-detail-data-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.9fr) minmax(280px, 1fr);
  align-items: start;
}

.client-detail-form {
  grid-template-columns: minmax(0, 1fr);
}

.client-detail-section {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.defect-detail-data-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  align-items: start;
}

.defect-text-panel {
  grid-column: 1 / -1;
}

.defect-text-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.defect-status-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.defect-status-form .field:last-child {
  grid-column: 1 / -1;
}

.defect-text-grid .textarea {
  min-height: 118px;
  resize: vertical;
}

@media (max-width: 980px) {
  .defect-detail-data-grid,
  .defect-text-grid {
    grid-template-columns: 1fr;
  }
}

.client-detail-section .table-wrap {
  min-height: 0;
}

.view[data-view="client-detail"] .compact-table {
  min-width: 0;
}

.client-contact-table th:last-child,
.client-contact-table td:last-child {
  width: 86px;
  text-align: right;
}

.client-contact-table .table-actions,
.client-location-table .table-actions {
  justify-content: flex-end;
}

.client-location-table th:last-child,
.client-location-table td:last-child {
  width: 86px;
  text-align: right;
}

.client-location-table .badge:is(.address-type-invoice, .address-type-post, .address-type-visit) {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.view[data-view="client-detail"] .scc-select.is-disabled {
  pointer-events: none;
  opacity: 0.62;
}

.view[data-view="client-detail"] .scc-select.is-disabled .scc-select-value {
  cursor: not-allowed;
}

.client-location-table .address-type-invoice {
  color: #ff4fd8;
}

.client-location-table .address-type-post {
  color: #00d4ff;
}

.client-location-table .address-type-visit {
  color: #a879ff;
}

body.daylight .client-location-table .address-type-invoice {
  color: #b71991;
}

body.daylight .client-location-table .address-type-post {
  color: #007fa3;
}

body.daylight .client-location-table .address-type-visit {
  color: #6e42c1;
}

.address-map-card {
  display: grid;
  gap: 12px;
  min-height: 420px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 82%, transparent);
  border-radius: var(--cc-radius-large);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cc-panel) 92%, var(--cc-bg)), color-mix(in srgb, var(--cc-panel-deep) 88%, var(--cc-bg)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.address-map-toolbar,
.address-map-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.address-map-toolbar strong {
  color: var(--cc-accent);
  font-size: 0.78rem;
  font-weight: 400;
}

.address-map-visual {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cc-line) 76%, transparent);
  border-radius: var(--cc-radius);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 42% 56%, rgba(0, 212, 255, 0.18), transparent 34%),
    color-mix(in srgb, var(--cc-panel-deep) 92%, var(--cc-bg));
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.map-road {
  position: absolute;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-muted) 45%, transparent);
  opacity: 0.58;
}

.road-a {
  top: 42%;
  left: -8%;
  width: 122%;
  transform: rotate(-14deg);
}

.road-b {
  top: 62%;
  left: 4%;
  width: 102%;
  transform: rotate(21deg);
}

.road-c {
  top: 18%;
  left: 34%;
  width: 72%;
  transform: rotate(68deg);
}

.map-radius {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 174px;
  height: 174px;
  border: 2px solid rgba(0, 212, 255, 0.92);
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.12);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 38px rgba(0, 212, 255, 0.2);
}

.map-center-pin {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 16px;
  height: 16px;
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  background: #ff4fd8;
  transform: translate(-50%, -70%) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.map-place {
  position: absolute;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #172033;
  font-size: 0.66rem;
}

.place-hedel {
  left: 45%;
  top: 63%;
}

.place-utrecht {
  left: 34%;
  top: 35%;
}

.place-amsterdam {
  right: 12%;
  top: 16%;
}

.address-map-details {
  display: grid;
  justify-content: start;
  gap: 4px;
  color: var(--cc-muted);
  font-size: 0.74rem;
}

.address-map-details strong {
  color: var(--cc-text);
  font-size: 0.86rem;
  font-weight: 400;
}

body.daylight .address-map-card {
  border-color: #c6d0dc;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(12, 35, 72, 0.08);
}

body.daylight .address-map-visual {
  border-color: #c6d0dc;
  background:
    linear-gradient(90deg, rgba(12, 35, 72, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(12, 35, 72, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 42% 56%, rgba(0, 127, 163, 0.18), transparent 34%),
    #eef4fb;
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: 18px;
  overflow: hidden;
}

.dashboard-grid .panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.dashboard-revenue,
.dashboard-pie {
  min-width: 0;
}

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

.metric {
  --metric-color: var(--cc-accent);
  appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--metric-color) 36%, var(--cc-line));
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--metric-color) 7%, var(--cc-panel));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.metric:hover,
.metric:focus-visible {
  border-color: color-mix(in srgb, var(--metric-color) 70%, var(--cc-line));
  background: color-mix(in srgb, var(--metric-color) 11%, var(--cc-panel));
  outline: none;
}

.metric > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--metric-color) 56%, var(--cc-line));
  border-radius: 8px;
  color: var(--metric-color);
  background: color-mix(in srgb, var(--metric-color) 9%, transparent);
  font-size: 1.35rem;
}

.metric > span {
  min-width: 0;
}

.metric strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--metric-color);
  line-height: 1.05;
}

.metric small {
  display: block;
  overflow: hidden;
  color: var(--cc-muted);
  font-size: 0.68rem;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.metric-green {
  --metric-color: var(--cc-success);
}

.metric-yellow {
  --metric-color: var(--cc-warning);
}

.metric-red {
  --metric-color: #ff6b6b;
}

.metric-purple {
  --metric-color: #a176ff;
}

.active-filter-banner {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  margin: -8px 0 -6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.72rem;
}

.active-filter-banner[hidden] {
  display: none;
}

.active-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 0 5px 0 10px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-accent) 10%, var(--cc-panel-deep));
  color: var(--cc-accent);
}

.active-filter-badge > span {
  overflow: hidden;
  max-width: min(42vw, 360px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-filter-badge button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 50%, var(--cc-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-accent) 8%, transparent);
  color: var(--cc-accent);
  cursor: pointer;
}

.active-filter-badge button:hover,
.active-filter-badge button:focus-visible {
  background: color-mix(in srgb, var(--cc-accent) 18%, transparent);
  outline: none;
}

.active-filter-badge i {
  font-size: 0.62rem;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(58px, 1fr));
  gap: 12px;
  align-items: end;
  height: 100%;
  min-height: 128px;
  padding: 12px 14px 10px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 82%, transparent);
  border-radius: var(--cc-radius);
  background:
    linear-gradient(to top, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 25%,
    color-mix(in srgb, var(--cc-panel-deep) 42%, var(--cc-panel));
}

.bar-item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  align-items: end;
  height: 100%;
  min-height: 112px;
  min-width: 0;
  text-align: center;
}

.bar-value {
  color: var(--cc-muted);
  font-size: 0.74rem;
}

.bar {
  display: block;
  align-self: end;
  width: 100%;
  height: var(--bar);
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 46%, var(--cc-line));
  border-radius: var(--cc-radius) var(--cc-radius) 2px 2px;
  background: linear-gradient(180deg, var(--cc-accent), #45688e);
}

.bar-label {
  color: var(--cc-muted);
  font-size: 0.76rem;
}

.pie-layout {
  display: grid;
  gap: 12px;
  justify-items: center;
  align-content: center;
  min-height: 100%;
}

.pie-chart {
  position: relative;
  width: clamp(116px, 11vw, 150px);
  aspect-ratio: 1;
  border: 1px solid var(--cc-line);
  border-radius: 50%;
  background: conic-gradient(
    #00baff 0 62%,
    #55a3e8 62% 86%,
    #f5b400 86% 100%
  );
  box-shadow: inset 0 0 0 24px color-mix(in srgb, var(--cc-panel) 84%, var(--cc-bg));
}

.pie-chart::after {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 42%, var(--cc-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--cc-panel-deep) 72%, var(--cc-panel));
  color: var(--cc-text);
  content: "62%";
  font-size: 1rem;
}

.pie-legend {
  display: grid;
  gap: 7px;
  width: min(250px, 100%);
  color: var(--cc-muted);
  font-size: 0.78rem;
}

.pie-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pie-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dashboard-pie .panel-body {
  display: grid;
  min-height: 0;
  padding-top: 12px;
}

.dashboard-invoices {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  padding-bottom: 0;
}

.view[data-view="dashboard"].is-active > .panel.dashboard-invoices:has(> .table-wrap) {
  grid-template-rows: max-content minmax(0, 1fr);
  padding-bottom: 0;
}

.dashboard-invoices .panel-header {
  align-self: start;
}

.dashboard-invoices .table-wrap {
  min-height: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dashboard-invoices .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

body.daylight .bar-chart {
  background:
    linear-gradient(to top, rgba(69, 104, 142, 0.16) 1px, transparent 1px) 0 0 / 100% 25%,
    #eef3f8;
}

body.daylight .bar {
  border-color: var(--cc-muted);
  background: linear-gradient(180deg, #45688e, #7d96b3);
}

body.daylight .pie-chart {
  border-color: #b8c7d8;
  box-shadow: inset 0 0 0 24px #ffffff;
}

body.daylight .pie-chart::after {
  border-color: #9fb1c5;
  background: #ffffff;
  color: var(--cc-text);
}

.project-name-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-name-cell strong {
  overflow: hidden;
  color: var(--cc-text);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-name-cell span {
  overflow: hidden;
  color: var(--cc-subtle);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-link {
  color: var(--cc-accent);
  text-decoration: none;
}

.table-link:hover,
.table-link:focus-visible {
  color: var(--cc-text);
  text-decoration: underline;
}

.status-field {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.project-data-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(520px, 0.9fr);
  column-gap: clamp(28px, 3.2vw, 52px);
  row-gap: 16px;
  align-items: start;
}

.project-data-main {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  max-width: 1180px;
}

.project-meta-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 14px;
  align-content: start;
  min-width: 0;
}

.project-meta-wide {
  grid-column: 1 / -1;
}

.assignment-grid,
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.project-assignment-stack {
  grid-template-columns: 1fr;
}

.project-relations {
  display: grid;
  gap: 14px;
}

.relation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.assignment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-line-strong) 7%, var(--cc-panel));
}

.assignment-card strong {
  display: block;
  margin: 5px 0;
  font-weight: 400;
}

.readonly-input {
  color: var(--cc-subtle);
  background: color-mix(in srgb, var(--cc-bg) 70%, var(--cc-panel));
}

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

.status-select {
  --project-status-color: var(--cc-warning);
}

.status-done {
  --project-status-color: #2ebf63;
}

.status-service {
  --project-status-color: #22e992;
}

.status-quote-sent {
  --project-status-color: #70a8ff;
}

.status-please-quote {
  --project-status-color: #ff3aad;
}

.status-acquisition {
  --project-status-color: #ffc44d;
}

.status-consideration {
  --project-status-color: #35c4ee;
}

.status-select .scc-select-value {
  border-color: color-mix(in srgb, var(--project-status-color) 78%, var(--cc-line));
  background: color-mix(in srgb, var(--project-status-color) 13%, var(--cc-panel-deep));
  color: var(--project-status-color);
}

.status-option {
  color: var(--project-status-color);
}

.status-select .scc-select-value strong {
  color: inherit;
}

body.daylight .status-select .scc-select-value {
  border-color: color-mix(in srgb, var(--project-status-color) 78%, #c8d5e3);
  background: color-mix(in srgb, var(--project-status-color) 8%, #ffffff);
  color: var(--project-status-color);
}

.badge-color-select {
  --badge-select-color: #00d4ff;
}

.badge-color-cyan {
  --badge-select-color: #00d4ff;
}

.badge-color-purple {
  --badge-select-color: #a879ff;
}

.badge-color-magenta {
  --badge-select-color: #ff4fd8;
}

.badge-color-select .scc-select-value {
  border-color: color-mix(in srgb, var(--badge-select-color) 76%, var(--cc-line));
  background: color-mix(in srgb, var(--badge-select-color) 13%, var(--cc-panel-deep));
  color: var(--badge-select-color);
}

.badge-color-select .scc-select-value strong {
  color: inherit;
}

.scc-select-menu .badge-color-option {
  color: var(--badge-select-color);
}

.scc-select-menu .badge-color-option strong {
  color: inherit;
}

.scc-select-menu button:disabled,
.scc-select-menu button[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--cc-subtle);
  opacity: 0.52;
}

body.daylight .badge-color-cyan {
  --badge-select-color: #007fa3;
}

body.daylight .badge-color-purple {
  --badge-select-color: #6e42c1;
}

body.daylight .badge-color-magenta {
  --badge-select-color: #b71991;
}

body.daylight .badge-color-select .scc-select-value {
  border-color: color-mix(in srgb, var(--badge-select-color) 72%, #c8d5e3);
  background: color-mix(in srgb, var(--badge-select-color) 8%, #ffffff);
  color: var(--badge-select-color);
}

body.daylight .scc-select-menu .badge-color-option {
  color: var(--badge-select-color);
}

.material-settings-locked .badge-color-select .scc-select-value {
  border-color: color-mix(in srgb, var(--badge-select-color) 58%, var(--cc-line));
  background: color-mix(in srgb, var(--badge-select-color) 10%, var(--cc-bg));
  color: var(--badge-select-color);
  -webkit-text-fill-color: var(--badge-select-color);
}

.material-settings-locked .badge-color-select .scc-select-value::after {
  color: var(--badge-select-color);
}

body.daylight .material-settings-locked .badge-color-select .scc-select-value {
  border-color: color-mix(in srgb, var(--badge-select-color) 54%, #c6d0dc);
  background: color-mix(in srgb, var(--badge-select-color) 8%, #e3e8ef);
  color: var(--badge-select-color);
  -webkit-text-fill-color: var(--badge-select-color);
}

.quote-status-concept {
  --status-color: #f83aa6;
}

.quote-status-sent {
  --status-color: var(--cc-warning);
}

.quote-status-signed {
  --status-color: var(--cc-success);
}

.quote-status-expired {
  --status-color: var(--cc-danger);
}

.invoice-status-concept {
  --status-color: #f83aa6;
}

.invoice-status-created {
  --status-color: var(--cc-accent);
}

.invoice-status-sent {
  --status-color: var(--cc-warning);
}

.invoice-status-expired {
  --status-color: var(--cc-danger);
}

.invoice-status-paid {
  --status-color: var(--cc-success);
}

.badge:is(.quote-status-concept, .quote-status-sent, .quote-status-signed, .quote-status-expired, .invoice-status-concept, .invoice-status-created, .invoice-status-sent, .invoice-status-expired, .invoice-status-paid) {
  border-color: color-mix(in srgb, var(--status-color) 78%, var(--cc-line));
  background: color-mix(in srgb, var(--status-color) 12%, var(--cc-panel-deep));
  color: var(--status-color);
}

.action-stack {
  display: flex;
  gap: 7px;
}

.relation-combobox {
  position: relative;
  display: block;
}

.relation-combobox::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--cc-muted);
  border-bottom: 1px solid var(--cc-muted);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.relation-input {
  padding-right: 34px;
  background: var(--cc-bg);
}

.relation-results {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  z-index: var(--cc-layer-dropdown);
  display: grid;
  overflow: hidden;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
  box-shadow: var(--cc-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition:
    opacity 0.14s ease var(--cc-dropdown-hide-delay),
    transform 0.14s ease var(--cc-dropdown-hide-delay),
    visibility 0s linear calc(var(--cc-dropdown-hide-delay) + 0.14s);
}

.relation-combobox.is-open .relation-results {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.relation-combobox.is-disabled {
  cursor: not-allowed;
}

.relation-combobox.is-disabled::after {
  opacity: 0.35;
}

.relation-combobox.is-disabled .relation-input {
  cursor: not-allowed;
}

.relation-results button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cc-line) 74%, transparent);
  background: transparent;
  color: var(--cc-text);
  text-align: left;
}

.relation-results button:last-child {
  border-bottom: 0;
}

.relation-results button:hover {
  background: var(--cc-accent-soft);
}

.relation-results strong {
  margin: 0;
  font-size: 0.84rem;
}

.relation-results span {
  color: var(--cc-muted);
  font-size: 0.74rem;
}

.tab-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  margin-bottom: 10px;
}

.tab-actionbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.material-settings-badges {
  flex-wrap: wrap;
}

.detail-subpanel > .material-settings-badges {
  width: 100%;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.material-settings-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding-inline: 10px;
  font-size: 0.72rem;
}

.material-settings-badges .badge strong {
  color: inherit;
  font-weight: 400;
}

.material-settings-badges .material-type-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.material-settings-badges .material-type-icon i {
  font-size: 0.68rem;
}

.material-settings-badges .material-badge-dynamic {
  border-color: color-mix(in srgb, #8f5cff 68%, var(--cc-line));
  color: #b49aff;
  background: color-mix(in srgb, #8f5cff 12%, transparent);
}

.material-settings-badges .material-badge-fixed {
  border-color: color-mix(in srgb, #f28a18 70%, var(--cc-line));
  color: #ffad4d;
  background: color-mix(in srgb, #f28a18 13%, transparent);
}

.material-settings-badges .material-badge-individual {
  border-color: color-mix(in srgb, var(--cc-line-strong) 48%, var(--cc-line));
  color: var(--cc-subtle);
  background: color-mix(in srgb, var(--cc-line-strong) 8%, transparent);
}

.tab-picker-tools {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  width: 330px;
  max-width: 330px;
}

.tab-picker-tools .input,
.tab-picker-tools .picker-filter-button {
  min-width: 0;
  width: 100%;
}

.picker-filter-button.is-active {
  border-color: var(--cc-accent);
  color: var(--cc-text);
  background: var(--cc-accent-soft);
}

.square-action {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: transparent;
  color: var(--cc-muted);
}

.square-action:hover {
  border-color: var(--cc-accent);
  color: var(--cc-text);
  background: var(--cc-accent-soft);
}

.square-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.square-action:disabled:hover {
  border-color: var(--cc-line);
  color: var(--cc-muted);
  background: transparent;
}

.square-action.subtle-danger {
  border-color: color-mix(in srgb, var(--cc-danger) 36%, var(--cc-line));
  color: color-mix(in srgb, #ff8d8d 58%, var(--cc-muted));
}

.square-action.subtle-danger:hover {
  border-color: color-mix(in srgb, var(--cc-danger) 60%, var(--cc-line));
  color: #ffb0b0;
  background: rgba(176, 0, 22, 0.1);
}

.square-action.planning-lock-action.is-active,
.square-action.group-lock-action.is-active,
.planning-table tr.is-warehouse-locked .planning-lock-action,
:is(.project-material-table, .project-license-table) tr.is-warehouse-locked .group-lock-action {
  border-color: color-mix(in srgb, var(--cc-success) 68%, var(--cc-line));
  color: var(--cc-success);
  background: color-mix(in srgb, var(--cc-success) 16%, transparent);
  opacity: 1;
}

.small-action {
  width: 32px;
  height: 32px;
}

.goto-action {
  position: relative;
}

.goto-action i {
  display: inline-block;
}

.goto-action i::before {
  content: "\2197";
  font-family: inherit;
}

.table-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.view[data-view="project-detail"] :is(.planning-table, .project-material-table, .project-license-table, .project-labor-transport-table) th:last-child,
.view[data-view="project-detail"] :is(.planning-table, .project-material-table, .project-license-table, .project-labor-transport-table) td:last-child {
  text-align: right;
}

.view[data-view="project-detail"] :is(.planning-table, .project-material-table, .project-license-table, .project-labor-transport-table) td:last-child .table-actions {
  justify-content: flex-end;
}

.note-grid {
  margin-top: 18px;
}

.roomy-textarea {
  min-height: 128px;
  padding: 13px 14px;
  line-height: 1.55;
}

.project-note-textarea {
  min-height: 64px;
  padding: 10px 12px;
  line-height: 1.42;
}

.av-text-options {
  align-self: end;
}

.av-option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  padding: 10px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-line-strong) 6%, var(--cc-panel));
}

body.daylight .av-option-list {
  border-color: #b8c7d8;
  background: #f6f8fb;
}

.av-toggle-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 28px;
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: var(--cc-text);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

body.daylight .av-toggle-row {
  color: var(--cc-text);
}

.av-toggle-box {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cc-line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--cc-line-strong) 8%, var(--cc-panel));
}

body.daylight .av-toggle-box {
  border-color: #b8c7d8;
  background: #e8eef5;
}

.av-toggle-row:hover .av-toggle-box {
  border-color: var(--cc-accent);
}

.av-toggle-row.is-active .av-toggle-box {
  border-color: var(--cc-accent);
  background: var(--cc-accent-soft);
}

body.daylight .av-toggle-row.is-active .av-toggle-box {
  border-color: #00aeef;
  background: rgba(0, 174, 239, 0.16);
}

.av-toggle-row.is-active .av-toggle-box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: var(--cc-accent);
}

.av-toggle-row:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.av-wizard-start {
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  justify-self: center;
}

.wizard-origin-action {
  color: var(--cc-accent);
  text-decoration: none;
}

.material-wizard-launch i {
  color: var(--cc-accent);
}

.project-wizard-group-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  color: var(--cc-text);
  background: var(--cc-panel);
  box-shadow: 0 24px 70px rgba(3, 14, 34, 0.32);
}

.project-wizard-group-dialog::backdrop {
  background: rgba(3, 14, 34, 0.52);
  backdrop-filter: blur(3px);
}

.project-wizard-group-dialog form {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.project-wizard-group-dialog h2,
.project-wizard-group-dialog p {
  margin: 0;
}

.project-wizard-group-dialog p {
  color: var(--cc-muted);
  font-size: 0.82rem;
}

.project-wizard-group-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.wizard-document-grid {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.wizard-document-empty,
.wizard-document-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: var(--cc-panel);
}

.wizard-document-empty {
  color: var(--cc-muted);
}

.wizard-document-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 7px;
  color: var(--cc-accent);
  background: var(--cc-accent-soft);
  font-size: 1.2rem;
}

.wizard-document-card > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.wizard-document-card span,
.wizard-document-card small {
  color: var(--cc-muted);
}

.wizard-document-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.compact-table {
  min-width: 560px;
}

.view[data-view="project-detail"] .data-table {
  font-size: 0.76rem;
}

.view[data-view="project-detail"] .data-table th,
.view[data-view="project-detail"] .data-table td {
  padding: 6px 8px;
}

.view[data-view="project-detail"] .data-table th {
  font-size: 0.68rem;
}

.view[data-view="project-detail"] .data-table .input {
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 0.76rem;
}

.view[data-view="project-detail"] .data-table .badge {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.64rem;
}

.view[data-view="project-detail"] .data-table .square-action {
  width: 28px;
  height: 28px;
}

.view[data-view="project-detail"] .data-table .small-action {
  width: 26px;
  height: 26px;
}

.view[data-view="project-detail"] .data-table .table-actions {
  gap: 5px;
}

.view[data-view="project-detail"] .data-table .scc-select-value {
  min-height: 28px;
  padding: 5px 28px 5px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
}

.view[data-view="project-detail"] .data-table .scc-select-menu button,
.view[data-view="project-detail"] .data-table .planning-context-menu button {
  padding: 7px 9px;
  font-size: 0.74rem;
}

.view[data-view="project-detail"] .data-table .walkthrough-empty-row td {
  height: 42px;
  color: var(--cc-muted);
  text-align: center;
}

.view[data-view="project-detail"] .material-line-label,
.view[data-view="project-detail"] .material-group-name,
.view[data-view="project-detail"] .material-group-editor {
  min-width: 170px;
}

.view[data-view="project-detail"] .material-type-icon {
  width: 24px;
  height: 24px;
}

.view[data-view="project-detail"] .material-type-icon i {
  font-size: 0.78rem;
}

.view[data-view="project-detail"] .compact-input {
  min-width: 116px;
}

.view[data-view="project-detail"] .compact-time {
  min-width: 76px;
}

.view[data-view="project-detail"] .count-input {
  max-width: 58px;
}

.view[data-view="project-detail"] .money-input {
  max-width: 82px;
}

.view[data-view="project-detail"] .planning-context-field {
  min-width: 0;
  min-height: 28px;
  padding: 3px 26px 3px 8px;
}

.view[data-view="project-detail"] .planning-context-value {
  font-size: 0.72rem;
}

.view[data-view="project-detail"] .planning-period-select .scc-select-value {
  min-height: 28px;
  padding: 3px 26px 3px 8px;
}

.view[data-view="project-detail"] .planning-period-select .scc-select-value strong {
  font-size: 0.72rem;
}

.planning-table .planning-context-field {
  min-height: 34px;
  padding: 5px 30px 5px 10px;
}

.planning-table .planning-context-value {
  font-size: 0.76rem;
}

.view[data-view="project-detail"] .planning-table .planning-context-menu button {
  padding: 9px 11px;
  font-size: 0.76rem;
}

.planning-table {
  min-width: 1080px;
}

.planning-table th:first-child,
.planning-table td:first-child {
  width: 19%;
}

.planning-table th:nth-child(2),
.planning-table td:nth-child(2) {
  width: 110px;
}

.planning-context-field {
  --context-color: var(--cc-accent);
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 30px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--context-color) 54%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--context-color) 12%, var(--cc-panel-deep));
}

.planning-context-field::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--context-color);
  border-bottom: 1px solid var(--context-color);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

.planning-context-value {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--context-color);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  outline: 0;
}

.planning-context-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: var(--cc-layer-dropdown);
  display: grid;
  min-width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--context-color) 48%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
  box-shadow: var(--cc-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition:
    opacity 0.14s ease var(--cc-dropdown-hide-delay),
    transform 0.14s ease var(--cc-dropdown-hide-delay),
    visibility 0s linear calc(var(--cc-dropdown-hide-delay) + 0.14s);
}

.planning-context-field.is-open .planning-context-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.planning-context-field.is-open {
  z-index: calc(var(--cc-layer-dropdown) + 1);
}

.planning-context-menu button {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cc-line) 74%, transparent);
  background: transparent;
  color: var(--cc-text);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
}

.planning-context-menu button:last-child {
  border-bottom: 0;
}

.planning-context-menu button:hover,
.planning-context-menu button:focus {
  background: color-mix(in srgb, var(--context-color) 16%, var(--cc-panel));
  color: var(--cc-text);
  outline: 0;
}

.planning-context-menu .context-option-build {
  color: var(--cc-accent);
}

.planning-context-menu .context-option-use {
  color: var(--cc-success);
}

.planning-context-menu .context-option-break {
  color: var(--cc-warning);
}

.planning-context-menu .context-option-license {
  color: #f83aa6;
}

.context-build {
  --context-color: var(--cc-accent);
}

.context-use {
  --context-color: var(--cc-success);
}

.context-break {
  --context-color: var(--cc-warning);
}

.context-license {
  --context-color: #f83aa6;
}

body.daylight .planning-context-field {
  background: color-mix(in srgb, var(--context-color) 15%, #ffffff);
}

body.daylight .planning-context-menu {
  background: #ffffff;
}

body.daylight .planning-context-menu button {
  color: var(--cc-text);
}

body.daylight .planning-context-menu .context-option-build {
  color: #075f8f;
}

body.daylight .planning-context-menu .context-option-use {
  color: #17683b;
}

body.daylight .planning-context-menu .context-option-break {
  color: #806000;
}

body.daylight .planning-context-menu .context-option-license {
  color: #b00064;
}

body.daylight .planning-context-menu button:hover,
body.daylight .planning-context-menu button:focus {
  background: color-mix(in srgb, var(--context-color) 14%, #ffffff);
}

body.daylight .context-build {
  --context-color: #075f8f;
}

body.daylight .context-use {
  --context-color: #17683b;
}

body.daylight .context-break {
  --context-color: #806000;
}

body.daylight .context-license {
  --context-color: #b00064;
}

.planning-context-field.is-context-blocked {
  border-color: #ff4d6d;
  color: #ff4d6d;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ff4d6d 52%, transparent);
}

body.daylight .planning-context-field.is-context-blocked {
  border-color: #d90f3f;
  color: #b0002f;
  box-shadow: 0 0 0 1px color-mix(in srgb, #d90f3f 36%, transparent);
}

.compact-input {
  min-width: 136px;
}

.compact-time {
  min-width: 96px;
}

.compact-count {
  width: 76px;
  min-width: 76px;
}

.planning-table .input.is-planning-invalid {
  border-color: #ff4d6d;
  color: #ff4d6d;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ff4d6d 54%, transparent);
}

body.daylight .planning-table .input.is-planning-invalid {
  border-color: #d90f3f;
  color: #b0002f;
  box-shadow: 0 0 0 1px color-mix(in srgb, #d90f3f 35%, transparent);
}

.project-material-table {
  table-layout: fixed;
  min-width: 0;
}

.project-material-table th:first-child,
.project-material-table td:first-child {
  width: 42px;
}

.project-material-table th:nth-child(2),
.project-material-table td:nth-child(2) {
  width: auto;
}

.project-material-table th:nth-child(3),
.project-material-table td:nth-child(3) {
  width: 58px;
}

.project-material-table th:nth-child(4),
.project-material-table td:nth-child(4),
.project-material-table th:nth-child(6),
.project-material-table td:nth-child(6),
.project-material-table th:nth-child(8),
.project-material-table td:nth-child(8) {
  width: 72px;
}

.project-material-table th:nth-child(5),
.project-material-table td:nth-child(5),
.project-material-table th:nth-child(7),
.project-material-table td:nth-child(7) {
  width: 92px;
}

.project-material-table th:nth-child(7),
.project-material-table td:nth-child(7) {
  width: 112px;
}

.project-material-table th:last-child,
.project-material-table td:last-child {
  width: 72px;
  text-align: right;
}

.project-material-table .table-actions {
  justify-content: flex-end;
}

.project-material-table th:nth-child(3),
.project-material-table th:nth-child(4),
.project-material-table th:nth-child(6),
.project-material-table th:nth-child(8),
.project-material-table td:nth-child(3),
.project-material-table td:nth-child(4),
.project-material-table td:nth-child(6),
.project-material-table td:nth-child(8) {
  text-align: center;
}

.project-material-table th:nth-child(5),
.project-material-table th:nth-child(7),
.project-material-table td:nth-child(5),
.project-material-table td:nth-child(7) {
  text-align: right;
}

.project-material-table td:nth-child(4) .input,
.project-material-table td:nth-child(5) .input,
.project-material-table td:nth-child(6) .input {
  margin-inline: auto;
  text-align: center;
}

.project-material-table td:nth-child(7) .input {
  margin-left: auto;
  text-align: right;
}

.project-material-table td:nth-child(5) .input {
  margin-left: auto;
  text-align: right;
}

.project-material-table td:nth-child(8) .badge {
  margin-inline: auto;
}

.planning-table tr.is-warehouse-locked td,
:is(.project-material-table, .project-license-table) tr.is-warehouse-locked td {
  background: color-mix(in srgb, var(--cc-success) 8%, var(--cc-panel-deep));
}

.planning-table tr.is-warehouse-locked :is(.input, .planning-context-value, .scc-select-value),
:is(.project-material-table, .project-license-table) tr.is-warehouse-locked .input {
  border-color: color-mix(in srgb, var(--cc-success) 34%, var(--cc-line));
  color: var(--cc-muted);
}

:is(.project-material-table, .project-license-table) tr.is-warehouse-locked .subtle-danger {
  display: none;
}

.warehouse-lock-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  color: var(--cc-success);
  font-size: 0.76rem;
  white-space: nowrap;
}

.material-content-table th:nth-child(6),
.material-content-table td:nth-child(6) {
  text-align: right;
}

.material-content-table td:nth-child(6) .input {
  margin-left: auto;
  text-align: right;
}

.material-content-table th:nth-child(7),
.material-content-table td:nth-child(7) {
  text-align: center;
}

.material-content-table td:nth-child(7) .badge {
  margin-inline: auto;
}

.hire-table {
  min-width: 940px;
}

.hire-screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.hire-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hire-order-section {
  grid-template-rows: minmax(0, 1fr);
}

.hire-order-wrap {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, var(--cc-panel));
}

.hire-pending-body {
  display: grid;
  min-height: 0;
}

.hire-pending-body .table-wrap {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, var(--cc-panel));
}

body.daylight .hire-order-wrap,
body.daylight .hire-pending-body .table-wrap {
  border-color: #c6d0dc;
  background: #f4f7fb;
}

.compact-panel-header {
  min-height: 40px;
  padding-bottom: 10px;
}

.hire-order-table {
  min-width: 1040px;
}

.hire-order-table th:nth-child(3),
.hire-order-table td:nth-child(3),
.hire-order-table th:nth-child(5),
.hire-order-table td:nth-child(5) {
  text-align: center;
}

.hire-order-table th:last-child,
.hire-order-table td:last-child {
  width: 212px;
}

.hire-table th:nth-child(n+5),
.hire-table td:nth-child(n+5) {
  text-align: center;
}

.hire-table th:first-child,
.hire-table td:first-child {
  width: 52px;
  text-align: center;
}

.hire-table th:nth-child(2),
.hire-table td:nth-child(2) {
  width: 24%;
}

.hire-table th:nth-child(3),
.hire-table td:nth-child(3) {
  width: 120px;
}

.hire-table th:nth-child(4),
.hire-table td:nth-child(4) {
  width: 24%;
}

.hire-table th:nth-child(5),
.hire-table td:nth-child(5) {
  width: 180px;
}

.hire-table th:last-child,
.hire-table td:last-child {
  width: 96px;
}

.hire-table td:nth-child(6) {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hire-table.compact-table th,
.hire-table.compact-table td {
  padding: 8px 10px;
}

.row-check {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  cursor: pointer;
}

.row-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.row-check span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cc-line-strong) 72%, var(--cc-line));
  border-radius: 5px;
  background: var(--cc-panel-deep);
}

.row-check span::after {
  content: "";
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--cc-panel-deep);
  border-left: 2px solid var(--cc-panel-deep);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}

.row-check input:checked + span {
  border-color: var(--cc-accent);
  background: var(--cc-accent);
}

.row-check input:checked + span::after {
  opacity: 1;
}

.hire-actions {
  justify-content: center;
}

.hire-actions .square-action {
  color: var(--cc-muted);
}

.hire-actions .square-action.is-active {
  border-color: color-mix(in srgb, var(--cc-success) 62%, var(--cc-line));
  color: var(--cc-success);
  background: color-mix(in srgb, var(--cc-success) 10%, transparent);
}

.hire-actions .square-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hire-dialog {
  width: min(1120px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 48px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-accent) 48%, var(--cc-line));
}

.hire-dialog-content {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 22px 24px;
  overflow: visible;
}

.hire-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hire-dialog h2,
.hire-dialog h3 {
  margin: 0;
  color: var(--cc-text);
  font-weight: 400;
  line-height: 1.2;
}

.hire-dialog h2 {
  font-size: 1.18rem;
}

.hire-dialog h3 {
  font-size: 0.88rem;
}

.hire-dialog p {
  max-width: 560px;
  margin: 7px 0 0;
  color: var(--cc-muted);
  line-height: 1.4;
}

.hire-dialog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.hire-form-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.hire-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.hire-summary-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 42%, transparent);
}

.hire-summary-card h3 {
  margin-bottom: 2px;
}

.hire-summary-card .field {
  min-width: 0;
}

.hire-summary-card :is(.input, .scc-select-value, .relation-input) {
  min-height: 36px;
}

.hire-summary-card .scc-select-value strong {
  white-space: normal;
  line-height: 1.15;
}

.hire-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hire-lines-wrap {
  max-height: 236px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  overflow: auto;
  background: var(--cc-panel-deep);
}

.hire-lines-table {
  min-width: 720px;
  table-layout: fixed;
  font-size: 0.75rem;
}

.hire-lines-table th,
.hire-lines-table td {
  padding: 6px 8px;
}

.hire-lines-table th:first-child,
.hire-lines-table td:first-child {
  width: 116px;
}

.hire-lines-table th:nth-child(3),
.hire-lines-table td:nth-child(3) {
  width: 92px;
  text-align: center;
}

.hire-lines-table th:last-child,
.hire-lines-table td:last-child {
  width: 58px;
  text-align: center;
}

.hire-lines-table .badge {
  margin-inline: auto;
}

.hire-lines-table .input {
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding-block: 4px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.hire-lines-table .count-input {
  max-width: 64px;
  margin-inline: auto;
  text-align: center;
}

.hire-dialog-form {
  margin-top: 0;
}

.hire-dialog-form.contact-dialog-form {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) 150px 150px;
  gap: 12px 16px;
}

.hire-logistics-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.time-window-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hire-logistics-card .time-window-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hire-dialog .confirm-dialog-actions {
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.locked-header-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  white-space: nowrap;
}

.locked-header-label i {
  color: var(--cc-accent);
  font-size: 0.74rem;
  line-height: 1;
  opacity: 0;
}

.quote-price-locked .locked-header-label i {
  opacity: 1;
}

.quote-price-locked .locked-header-label {
  color: var(--cc-success);
}

.license-picker-table {
  min-width: 0;
  font-size: 0.78rem;
}

.license-picker-table th,
.license-picker-table td {
  padding: 8px 9px;
}

.project-license-table {
  table-layout: fixed;
  min-width: 0;
}

.project-license-table th:first-child,
.project-license-table td:first-child {
  width: 42px;
}

.project-license-table th:last-child,
.project-license-table td:last-child {
  width: 108px;
  text-align: right;
}

.project-license-table th:nth-child(3),
.project-license-table td:nth-child(3) {
  width: 58px;
}

.project-license-table th:nth-child(4),
.project-license-table td:nth-child(4),
.project-license-table th:nth-child(5),
.project-license-table td:nth-child(5) {
  width: 78px;
}

.project-license-table th:nth-child(6),
.project-license-table td:nth-child(6),
.project-license-table th:nth-child(7),
.project-license-table td:nth-child(7) {
  width: 98px;
}

.project-license-table th:nth-child(3),
.project-license-table th:nth-child(4),
.project-license-table th:nth-child(5),
.project-license-table td:nth-child(3),
.project-license-table td:nth-child(4),
.project-license-table td:nth-child(5) {
  text-align: center;
}

.project-license-table th:nth-child(6),
.project-license-table th:nth-child(7),
.project-license-table td:nth-child(6),
.project-license-table td:nth-child(7) {
  text-align: right;
}

.project-license-table td:nth-child(5) .input {
  margin-inline: auto;
  text-align: center;
}

.project-license-table td:nth-child(6) .input,
.project-license-table td:nth-child(7) .input {
  margin-left: auto;
  text-align: right;
}

.project-license-table .table-actions {
  justify-content: flex-end;
}

.license-period-group-row .license-period-pill {
  min-height: 28px;
  padding: 3px 8px;
}

.license-period-group-row .license-period-pill::after {
  display: none;
}

.license-calculation-note {
  display: inline;
  margin-left: 8px;
  color: var(--cc-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.project-license-table td:nth-child(5) .license-calculation-note {
  white-space: nowrap;
}

body.daylight .license-calculation-note {
  color: var(--cc-muted);
}

.license-component-row .material-line-label {
  padding-left: 38px;
}

.material-line-label,
.material-group-name {
  display: block;
  min-width: 210px;
}

.material-group-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 210px;
}

.material-group-title {
  display: block;
  overflow: hidden;
  color: var(--cc-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.daylight .material-group-title {
  color: var(--cc-text);
}

.material-type-text {
  display: inline-block;
  color: var(--cc-muted);
  font-size: 0.82rem;
}

.material-type-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 72%, transparent);
  border-radius: var(--cc-radius);
  color: var(--cc-muted);
  background: color-mix(in srgb, var(--cc-panel-deep) 54%, transparent);
}

.material-type-icon i {
  font-size: 0.88rem;
}

.material-type-icon:has(.fa-object-group) {
  border-color: color-mix(in srgb, #ff2fad 64%, var(--cc-line));
  color: #ff6cc8;
  background: color-mix(in srgb, #ff2fad 13%, var(--cc-panel-deep));
}

.material-type-icon:has(.fa-layer-group) {
  border-color: color-mix(in srgb, #8f5cff 66%, var(--cc-line));
  color: #b49aff;
  background: color-mix(in srgb, #8f5cff 15%, var(--cc-panel-deep));
}

.material-type-icon:has(.fa-block-brick),
.material-type-icon:has(.fa-lock) {
  border-color: color-mix(in srgb, #f28a18 68%, var(--cc-line));
  color: #ffad4d;
  background: color-mix(in srgb, #f28a18 14%, var(--cc-panel-deep));
}

.material-type-icon:has(.fa-tag),
.material-type-icon:has(.fa-receipt) {
  border-color: color-mix(in srgb, var(--cc-line-strong) 48%, var(--cc-line));
  color: var(--cc-subtle);
  background: color-mix(in srgb, var(--cc-line-strong) 9%, var(--cc-panel-deep));
}

.material-type-icon.type-temporary {
  border-color: color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
  color: var(--cc-accent);
  background: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep));
}

body.daylight .material-type-text {
  color: var(--cc-text-secondary);
}

body.daylight .material-type-icon {
  border-color: #6f819b;
  color: var(--cc-text-secondary);
  background: #d7e0ec;
}

body.daylight .material-type-icon:has(.fa-object-group) {
  border-color: #d52b98;
  color: #8a175f;
  background: #f4d3ec;
}

body.daylight .material-type-icon:has(.fa-layer-group) {
  border-color: #7c55d9;
  color: #4d3493;
  background: #e5dcff;
}

body.daylight .material-type-icon:has(.fa-block-brick),
body.daylight .material-type-icon:has(.fa-lock) {
  border-color: #c86b0d;
  color: #8a4a09;
  background: #fde6c7;
}

body.daylight .material-type-icon:has(.fa-tag),
body.daylight .material-type-icon:has(.fa-receipt) {
  border-color: #9fb2c8;
  color: #5f789a;
  background: #eef3f8;
}

.material-type-icon.license-period-type-icon {
  border-color: color-mix(in srgb, #ff2fad 64%, var(--cc-line));
  background: color-mix(in srgb, #ff2fad 13%, var(--cc-panel-deep));
  color: #ff6cc8;
}

body.daylight .material-type-icon.license-period-type-icon {
  border-color: #d52b98;
  background: #f4d3ec;
  color: #8a175f;
}

.data-table td:has(> .material-type-text),
.data-table td:has(> .material-type-icon) {
  text-align: center;
}

.materials-overview-table th:nth-child(2),
.materials-overview-table th:nth-child(6),
.materials-overview-table th:nth-child(7),
.material-picker-table th:nth-child(2),
.project-material-table th:nth-child(3),
.license-picker-table th:nth-child(2),
.project-license-table th:nth-child(3),
.labor-transport-picker-table th:nth-child(2),
.project-labor-transport-table th:nth-child(3),
.project-labor-transport-table th:nth-child(5) {
  text-align: center;
}

.materials-overview-table td:nth-child(6),
.materials-overview-table td:nth-child(7),
.materials-overview-table td:nth-child(8) {
  text-align: center;
  white-space: nowrap;
}

.materials-overview-table th:nth-child(8),
.materials-overview-table td:nth-child(8) {
  text-align: right;
}

.materials-overview-table td:nth-child(8) .table-actions {
  justify-content: flex-end;
}

.materials-overview-table .sort-label.is-active {
  color: var(--cc-accent);
}

.materials-overview-table .sort-label.is-active i {
  color: var(--cc-accent);
}

.catalog-group-row td {
  padding: 0;
  background: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep));
}

.catalog-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  color: var(--cc-accent);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.catalog-group-toggle i {
  width: 14px;
  transition: transform 0.14s ease;
}

.catalog-group-row.is-collapsed .catalog-group-toggle i {
  transform: rotate(-90deg);
}

.materials-overview-table tr.is-selected-row td {
  background: color-mix(in srgb, #ff2fad 24%, var(--cc-panel-deep));
  border-top-color: color-mix(in srgb, #ff2fad 78%, var(--cc-line));
  border-bottom-color: color-mix(in srgb, #ff2fad 66%, var(--cc-line));
}

.materials-overview-table tr.is-selected-row td:first-child strong {
  color: #ffffff;
}

body.daylight .materials-overview-table tr.is-selected-row td {
  background: #f4d3ec;
  border-top-color: #d52b98;
  border-bottom-color: #e65aaf;
}

body.daylight .materials-overview-table tr.is-selected-row td:first-child strong {
  color: var(--cc-text);
}

.catalog-availability-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  overflow: hidden;
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, var(--cc-panel));
}

body.daylight .view[data-view="materials"].is-active > .materials-catalog-panel {
  background: transparent;
  box-shadow: none;
}

body.daylight .materials-catalog-table-wrap,
body.daylight .catalog-availability-panel {
  border-color: #c8d5e3;
  background: #ffffff;
}

.catalog-availability-panel[hidden] {
  display: none;
}

.project-detail-availability-panel {
  margin-top: 14px;
}

.catalog-availability-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--cc-line);
}

.catalog-availability-header h2 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 400;
}

.catalog-availability-header p {
  margin: 3px 0 0;
  color: var(--cc-muted);
  font-size: 0.72rem;
}

.catalog-gantt-scroll {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 10px;
}

.catalog-availability-gantt {
  min-width: var(--catalog-gantt-width, 1260px);
  background: var(--cc-panel);
}

.catalog-availability-gantt.availability-gantt {
  font-size: 0.76rem;
}

.catalog-availability-gantt .availability-gantt-head,
.catalog-availability-gantt .availability-gantt-row {
  grid-template-columns: 240px minmax(calc(var(--catalog-day-count, 6) * var(--catalog-day-width, 160px)), 1fr);
  min-width: calc(240px + (var(--catalog-day-count, 6) * var(--catalog-day-width, 160px)));
}

.catalog-availability-gantt .availability-gantt-head {
  grid-template-columns: 240px repeat(var(--catalog-day-count, 6), minmax(var(--catalog-day-width, 160px), 1fr));
}

.catalog-availability-gantt .availability-gantt-head span,
.catalog-availability-gantt .availability-project,
.catalog-availability-gantt .availability-timeline {
  min-height: 30px;
  padding: 5px 8px;
}

.catalog-availability-gantt .availability-gantt-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.catalog-availability-gantt .availability-project {
  gap: 0;
}

.catalog-availability-gantt .availability-project strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-availability-gantt .availability-project span {
  display: none;
}

.project-detail-availability-panel .availability-project {
  gap: 2px;
}

.project-detail-availability-panel .availability-project span {
  display: block;
  overflow: hidden;
  color: var(--cc-muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-availability-gantt .availability-timeline {
  min-height: 30px;
}

.catalog-availability-gantt .availability-bar {
  gap: 10px;
  min-height: 18px;
  border-radius: 6px;
  cursor: pointer;
}

.catalog-availability-gantt .availability-bar-step {
  width: 22px;
  height: 22px;
}

.catalog-timeline-six {
  background:
    linear-gradient(90deg, transparent calc(16.666% - 1px), var(--cc-line) calc(16.666% - 1px), var(--cc-line) 16.666%, transparent 16.666%),
    linear-gradient(90deg, transparent calc(33.333% - 1px), var(--cc-line) calc(33.333% - 1px), var(--cc-line) 33.333%, transparent 33.333%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--cc-line) calc(50% - 1px), var(--cc-line) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(66.666% - 1px), var(--cc-line) calc(66.666% - 1px), var(--cc-line) 66.666%, transparent 66.666%),
    linear-gradient(90deg, transparent calc(83.333% - 1px), var(--cc-line) calc(83.333% - 1px), var(--cc-line) 83.333%, transparent 83.333%);
}

.material-group-name {
  display: none;
  font-weight: 400;
}

.material-group-row.is-editing .material-group-title {
  display: none;
}

.material-group-row.is-editing .material-group-name {
  display: block;
}

.material-group-row:not(.is-editing) .inline-group-save,
.material-group-row:not(.is-editing) .material-group-name {
  display: none;
}

.material-group-row [data-material-group-edit] {
  display: none;
}

.labor-group-name-input {
  display: inline-block;
  width: min(100%, 280px);
}

.labor-group-save {
  margin-left: 6px;
  vertical-align: middle;
}

.material-group-row .save-group-action {
  border-color: color-mix(in srgb, var(--cc-accent) 70%, var(--cc-line));
  color: var(--cc-accent);
  background: var(--cc-accent-soft);
}

.project-material-table td:first-child,
.project-license-table td:first-child,
.project-labor-transport-table td:first-child {
  white-space: nowrap;
}

.is-sortable-row {
  cursor: grab;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.is-sortable-row:active {
  cursor: grabbing;
}

.is-dragging td {
  opacity: 0.34;
  transform: translateY(-2px) rotate(-0.32deg) scale(0.995);
  transform-origin: 50% 50%;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cc-bg) 38%, transparent);
}

.is-dragging-stack td {
  opacity: 0.26;
  transform: translateY(-3px) rotate(0.18deg) scale(0.988);
  transform-origin: 50% 50%;
}

.is-settling td {
  animation: row-settle 0.22s cubic-bezier(0.2, 0.8, 0.25, 1);
  transform-origin: 50% 50%;
}

.is-drop-before td,
.is-drop-after td {
  background: color-mix(in srgb, var(--cc-success) 12%, var(--cc-panel-deep));
}

.is-drop-before td {
  box-shadow:
    inset 0 3px 0 var(--cc-success),
    0 -8px 20px color-mix(in srgb, var(--cc-success) 14%, transparent);
}

.is-drop-after td {
  box-shadow:
    inset 0 -3px 0 var(--cc-success),
    0 8px 20px color-mix(in srgb, var(--cc-success) 14%, transparent);
}

.drag-preview {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: var(--cc-layer-dropdown);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 64%, var(--cc-line));
  border-radius: var(--cc-radius);
  color: var(--cc-text);
  background: color-mix(in srgb, var(--cc-panel-deep) 90%, var(--cc-bg));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    5px 5px 0 color-mix(in srgb, var(--cc-line-strong) 24%, transparent),
    10px 10px 0 color-mix(in srgb, var(--cc-line-strong) 13%, transparent);
  pointer-events: none;
}

.drag-preview strong {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drag-preview.is-group-preview {
  border-color: color-mix(in srgb, var(--cc-success) 70%, var(--cc-line));
}

@keyframes row-settle {
  0% {
    transform: translateY(-7px) rotate(-0.42deg) scale(1.006);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--cc-bg) 32%, transparent);
  }

  62% {
    transform: translateY(1px) rotate(0.08deg) scale(0.998);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow: none;
  }
}

.material-picker-table tbody tr,
.license-picker-table tbody tr,
.labor-transport-picker-table tbody tr,
.material-group-row[data-target-group-row],
[data-component-target-row] {
  cursor: pointer;
}

:is(.project-material-table, .project-license-table, .project-labor-transport-table) .is-sortable-row {
  cursor: grab;
}

:is(.project-material-table, .project-license-table, .project-labor-transport-table) .is-sortable-row:active {
  cursor: grabbing;
}

.needs-target-selection :is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody tr:not(.material-picker-group-row) {
  cursor: not-allowed;
  opacity: 0.42;
}

.needs-target-selection :is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody tr:not(.material-picker-group-row):hover td {
  background: transparent;
}

.needs-target-selection .material-picker-table tbody tr:not(.material-picker-group-row):hover td {
  background: transparent;
}

.needs-target-selection :is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody tr:not(.material-picker-group-row) .badge,
.needs-target-selection :is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody tr:not(.material-picker-group-row) .material-type-icon {
  filter: grayscale(1);
}

body.daylight .needs-target-selection :is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody tr:not(.material-picker-group-row):hover td {
  background: #ffffff;
}

.material-group-row td {
  background: color-mix(in srgb, var(--cc-line-strong) 20%, var(--cc-panel-deep));
  border-top: 1px solid color-mix(in srgb, var(--cc-line-strong) 64%, var(--cc-line));
  border-bottom: 1px solid color-mix(in srgb, var(--cc-line-strong) 52%, var(--cc-line));
}

.material-group-row.is-target-selected td {
  background: color-mix(in srgb, #ff2fad 24%, var(--cc-panel-deep));
  border-top-color: color-mix(in srgb, #ff2fad 78%, var(--cc-line));
  border-bottom-color: color-mix(in srgb, #ff2fad 66%, var(--cc-line));
}

.material-child-row[data-component-target-row].is-target-selected td {
  background: color-mix(in srgb, #8f5cff 27%, var(--cc-panel-deep));
  border-top-color: color-mix(in srgb, #8f5cff 78%, var(--cc-line));
  border-bottom-color: color-mix(in srgb, #8f5cff 66%, var(--cc-line));
}

.material-group-row.is-target-selected .material-group-title,
.material-group-row.is-target-selected .planning-row-button,
.material-child-row.is-target-selected .material-line-label,
.material-child-row.is-target-selected .material-type-text {
  color: #ffffff;
}

body.daylight .material-group-row td {
  background: #d7e3ef;
  border-top-color: #8ea7c1;
  border-bottom-color: #9eb4ca;
}

body.daylight .material-group-row.is-target-selected td {
  background: #f4d3ec;
  border-top-color: #d52b98;
  border-bottom-color: #e65aaf;
}

body.daylight .material-child-row[data-component-target-row].is-target-selected td {
  background: #e5dcff;
  border-top-color: #7c55d9;
  border-bottom-color: #9676e4;
}

body.daylight .planning-table tr.is-warehouse-locked td,
body.daylight :is(.project-material-table, .project-license-table) tr.is-warehouse-locked td {
  background: #e8f3ed;
}

body.daylight .material-group-row.is-target-selected .material-group-title,
body.daylight .material-group-row.is-target-selected .planning-row-button,
body.daylight .material-child-row.is-target-selected .material-line-label,
body.daylight .material-child-row.is-target-selected .material-type-text {
  color: var(--cc-text);
}

.material-child-row .material-line-label {
  padding-left: 18px;
}

.combination-detail-row td {
  background: color-mix(in srgb, var(--cc-panel-deep) 74%, var(--cc-panel));
  border-bottom-color: color-mix(in srgb, var(--cc-line) 55%, transparent);
}

.combination-detail-row .component-line-label {
  position: relative;
  padding-left: 38px;
  color: color-mix(in srgb, var(--cc-text) 82%, var(--cc-muted));
}

.combination-detail-row .component-line-label::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 12px;
  border-top: 1px solid color-mix(in srgb, var(--cc-line-strong) 70%, var(--cc-line));
}

.combination-detail-row.is-nested-component td {
  background: color-mix(in srgb, var(--cc-panel-deep) 86%, var(--cc-panel));
}

.combination-detail-row.is-nested-component .component-line-label {
  padding-left: 58px;
  font-size: 0.9em;
}

.combination-detail-row.is-nested-component .component-line-label::before {
  left: 34px;
  width: 16px;
  border-top-style: dashed;
}

.material-content-table .combination-detail-row.is-readonly-combination td:first-child {
  text-align: center;
}

.combination-detail-row .input {
  background: color-mix(in srgb, var(--cc-bg) 64%, transparent);
}

.combination-detail-row.is-static-component {
  color: var(--cc-muted);
}

.combination-detail-row.is-static-component .input,
.combination-detail-row.is-static-component .material-type-icon {
  opacity: 0.72;
}

body.daylight .combination-detail-row td {
  background: #ffffff;
}

body.daylight .combination-detail-row .component-line-label {
  color: var(--cc-text);
}

body.daylight .combination-detail-row .component-line-label::before {
  border-top-color: var(--cc-muted);
}

body.daylight .combination-detail-row.is-nested-component td {
  background: #f5f8fb;
}

body.daylight .combination-detail-row .input {
  background: #edf2f7;
}

body.daylight .combination-detail-row.is-static-component {
  color: var(--cc-text-disabled);
}

body.daylight .combination-detail-row.is-static-component .input,
body.daylight .combination-detail-row.is-static-component .material-type-icon {
  opacity: 1;
}

[data-combination-toggle] i {
  transform: rotate(-90deg);
  transition: transform 0.16s ease;
}

.is-combination-open [data-combination-toggle] i {
  transform: rotate(0deg);
}

[data-group-toggle] i {
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

.is-group-collapsed [data-group-toggle] i {
  transform: rotate(-90deg);
}

.is-group-collapsed td {
  border-bottom-color: color-mix(in srgb, var(--cc-line-strong) 62%, var(--cc-line));
}

.compact-select {
  min-width: 138px;
}

.count-input {
  max-width: 74px;
  text-align: center;
}

.money-input {
  max-width: 98px;
  text-align: right;
}

.warehouse-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.7fr) minmax(260px, 0.9fr);
  gap: 14px;
}

.warehouse-project-card,
.warehouse-progress-card,
.warehouse-route-card {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-line-strong) 7%, var(--cc-panel));
}

.warehouse-project-card strong,
.warehouse-route-card strong {
  font-size: 1rem;
  font-weight: 400;
}

.warehouse-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.warehouse-progress-top strong {
  color: var(--cc-accent);
  font-size: 1.45rem;
  font-weight: 400;
}

.warehouse-progress-bar {
  overflow: hidden;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 36%, var(--cc-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-panel-deep) 70%, transparent);
}

.warehouse-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-success));
  transition: width 0.18s ease;
}

.warehouse-pack-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.warehouse-pack-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px) minmax(240px, auto);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 54%, var(--cc-panel));
}

.warehouse-pack-row.is-complete {
  border-color: color-mix(in srgb, var(--cc-success) 64%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-success) 11%, var(--cc-panel));
}

.warehouse-pack-row.needs-check {
  border-color: color-mix(in srgb, var(--cc-warning) 64%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-warning) 9%, var(--cc-panel));
}

.warehouse-pack-row.is-missing {
  border-color: color-mix(in srgb, var(--cc-danger) 64%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-danger) 11%, var(--cc-panel));
}

.warehouse-pack-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.warehouse-pack-main strong {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-stepper,
.warehouse-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.warehouse-stepper output {
  display: grid;
  place-items: center;
  min-width: 74px;
  min-height: 46px;
  padding: 4px 8px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  color: var(--cc-text);
  background: color-mix(in srgb, var(--cc-bg) 54%, transparent);
  font-size: 1.15rem;
}

.warehouse-stepper small {
  color: var(--cc-muted);
  font-size: 0.7rem;
}

.warehouse-row-actions .btn {
  min-width: 116px;
}

.warehouse-note-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.35fr);
  gap: 14px;
  align-items: end;
}

.warehouse-note-layout .warehouse-actions {
  align-self: stretch;
  grid-template-columns: 1fr;
  align-content: end;
}

body.daylight .warehouse-project-card,
body.daylight .warehouse-progress-card,
body.daylight .warehouse-route-card,
body.daylight .warehouse-pack-row {
  border-color: #c8d5e3;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(12, 35, 72, 0.06);
}

body.daylight .warehouse-pack-row.is-complete {
  border-color: #77b88a;
  background: #eff8f1;
}

body.daylight .warehouse-pack-row.needs-check {
  border-color: #d7b34d;
  background: #fff8de;
}

body.daylight .warehouse-pack-row.is-missing {
  border-color: #c7808e;
  background: #fff0f2;
}

body.daylight .warehouse-progress-bar,
body.daylight .warehouse-stepper output {
  border-color: #b8c7d8;
  background: #eef3f8;
}

.labor-transport-picker-table {
  min-width: 0;
  font-size: 0.78rem;
}

.labor-transport-picker-table th,
.labor-transport-picker-table td {
  padding: 8px 9px;
}

.project-labor-transport-table {
  table-layout: fixed;
  min-width: 0;
}

.project-labor-transport-table th:first-child,
.project-labor-transport-table td:first-child {
  width: 42px;
}

.project-labor-transport-table th:last-child,
.project-labor-transport-table td:last-child {
  width: 86px;
  text-align: right;
}

.project-labor-transport-table th:nth-child(3),
.project-labor-transport-table td:nth-child(3) {
  width: 86px;
}

.project-labor-transport-table th:nth-child(4),
.project-labor-transport-table td:nth-child(4) {
  width: 86px;
}

.project-labor-transport-table th:nth-child(5),
.project-labor-transport-table td:nth-child(5) {
  width: 86px;
}

.project-labor-transport-table th:nth-child(6),
.project-labor-transport-table td:nth-child(6),
.project-labor-transport-table th:nth-child(7),
.project-labor-transport-table td:nth-child(7),
.project-labor-transport-table th:nth-child(8),
.project-labor-transport-table td:nth-child(8) {
  width: 116px;
}

.project-labor-transport-table th:nth-child(9),
.project-labor-transport-table td:nth-child(9) {
  width: 72px;
}

.project-labor-transport-table th:nth-child(3),
.project-labor-transport-table th:nth-child(4),
.project-labor-transport-table th:nth-child(5),
.project-labor-transport-table td:nth-child(3),
.project-labor-transport-table td:nth-child(4),
.project-labor-transport-table td:nth-child(5) {
  text-align: center;
}

.project-labor-transport-table th:nth-child(6),
.project-labor-transport-table th:nth-child(7),
.project-labor-transport-table th:nth-child(8),
.project-labor-transport-table td:nth-child(6),
.project-labor-transport-table td:nth-child(7),
.project-labor-transport-table td:nth-child(8) {
  text-align: right;
}

.project-labor-transport-table th:nth-child(9),
.project-labor-transport-table td:nth-child(9) {
  text-align: center;
}

.project-labor-transport-table td:nth-child(4) .input,
.project-labor-transport-table td:nth-child(5) .input {
  margin-inline: auto;
  text-align: center;
}

.project-labor-transport-table td:nth-child(6) .input,
.project-labor-transport-table td:nth-child(7) .input,
.project-labor-transport-table td:nth-child(8) .input {
  width: 100%;
  max-width: 98px;
  margin-left: 0;
  text-align: right;
}

.project-labor-transport-table .labor-recalculate-button {
  margin: 0;
  border-color: color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep));
  color: var(--cc-accent);
}

.distance-calculate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.distance-calculate-row .input {
  width: 100%;
}

.distance-calculate-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin: 0;
  border-color: color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep));
  color: var(--cc-accent);
}

.project-labor-transport-table .labor-recalculate-button :is(.is-calculation-synced, .is-calculation-different) {
  color: inherit;
}

.project-labor-transport-table .table-actions {
  justify-content: flex-end;
}

.view[data-view="project-detail"] .project-material-table :is(th:nth-child(5), th:nth-child(6), th:nth-child(7), td:nth-child(5), td:nth-child(6), td:nth-child(7)),
.view[data-view="project-detail"] .project-license-table :is(th:nth-child(6), th:nth-child(7), td:nth-child(6), td:nth-child(7)),
.view[data-view="project-detail"] .project-labor-transport-table :is(th:nth-child(6), th:nth-child(7), th:nth-child(8), td:nth-child(6), td:nth-child(7), td:nth-child(8)) {
  text-align: left;
}

.view[data-view="project-detail"] .project-material-table :is(td:nth-child(5), td:nth-child(6), td:nth-child(7)) .input,
.view[data-view="project-detail"] .project-license-table :is(td:nth-child(6), td:nth-child(7)) .input,
.view[data-view="project-detail"] .project-labor-transport-table :is(td:nth-child(6), td:nth-child(7), td:nth-child(8)) .input {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.planning-row-button {
  display: inline-flex;
  width: 100%;
  min-height: 24px;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--cc-text);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.project-labor-transport-table .material-line-label,
.project-material-table .material-line-label,
.project-license-table .material-line-label,
.project-material-table .material-group-editor,
.project-license-table .material-group-editor,
.project-labor-transport-table .planning-row-button {
  min-width: 0;
}

.view[data-view="project-detail"] :is(.project-material-table, .project-license-table, .project-labor-transport-table) .material-line-label,
.view[data-view="project-detail"] :is(.project-material-table, .project-license-table) .material-group-editor,
.view[data-view="project-detail"] .project-labor-transport-table .planning-row-button {
  min-width: 0;
}

.view[data-view="project-detail"] .project-labor-transport-table .material-line-label {
  padding-left: 14px;
}

.project-labor-transport-table td:nth-child(9) .badge,
.labor-transport-picker-table td:nth-child(2) .badge {
  margin-inline: auto;
}

.transport-availability-action {
  appearance: none;
  border-color: color-mix(in srgb, currentColor 72%, var(--cc-line));
  background: color-mix(in srgb, currentColor 10%, transparent);
  cursor: pointer;
}

.transport-availability-action.green {
  border-color: color-mix(in srgb, var(--cc-success) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-success) 10%, transparent);
  color: var(--cc-success);
}

.transport-availability-action.yellow {
  border-color: color-mix(in srgb, var(--cc-warning) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-warning) 10%, transparent);
  color: var(--cc-warning);
}

.transport-availability-action.red {
  border-color: color-mix(in srgb, var(--cc-danger) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-danger) 10%, transparent);
  color: var(--cc-danger);
}

.transport-availability-action:hover,
.transport-availability-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}

.view[data-view="project-detail"] .project-labor-transport-table .planning-row-button {
  font-size: 0.76rem;
  line-height: 1.15;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.line-name-input {
  width: min(100%, 280px);
  min-height: 30px;
  padding: 4px 8px;
}

[data-line-name-edit] {
  display: none;
}

.inline-line-save {
  margin-left: 6px;
  vertical-align: middle;
}

.labor-count-control {
  display: block;
}

.is-line-name-editing :is(.material-line-label, .planning-row-button) {
  display: none;
}

.offer-title-input {
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  font-weight: 600;
}

.labor-planning-row {
  cursor: pointer;
}

.empty-labor-row .material-line-label {
  font-style: italic;
}

body.daylight .planning-row-button {
  color: var(--cc-text);
}

.labor-type-select {
  min-width: 210px;
}

tr[data-open-view] {
  cursor: pointer;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
}

.picker-column {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.picker-filter-panel {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 92%, var(--cc-bg));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.picker-filter-panel[hidden] {
  display: none;
}

.picker-filter-header strong {
  color: var(--cc-accent);
  font-size: 0.88rem;
  font-weight: 400;
}

.picker-filter-list {
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.picker-filter-master {
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-accent);
}

.picker-filter-option {
  justify-content: flex-start;
  min-height: 34px;
  padding: 0;
  text-align: left;
}

.picker-filter-option span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-row-hidden {
  display: none;
}

.material-picker-wrap {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  scrollbar-color: var(--cc-line-strong) var(--cc-panel);
}

body.daylight .material-picker-wrap,
body.daylight .tab-panel:is([data-panel="planning"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap {
  scrollbar-color: #9fb1c5 #e8eef5;
}

.material-picker-wrap::-webkit-scrollbar,
.tab-panel:is([data-panel="planning"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.material-picker-wrap::-webkit-scrollbar-track,
.tab-panel:is([data-panel="planning"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap::-webkit-scrollbar-track {
  background: var(--cc-panel);
}

.material-picker-wrap::-webkit-scrollbar-thumb,
.tab-panel:is([data-panel="planning"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid var(--cc-panel);
  border-radius: 999px;
  background: var(--cc-line-strong);
}

body.daylight .material-picker-wrap::-webkit-scrollbar-track,
body.daylight .tab-panel:is([data-panel="planning"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap::-webkit-scrollbar-track {
  background: #e8eef5;
}

body.daylight .material-picker-wrap::-webkit-scrollbar-thumb,
body.daylight .tab-panel:is([data-panel="planning"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap::-webkit-scrollbar-thumb {
  border-color: #e8eef5;
  background: #9fb1c5;
}

.material-picker-table {
  min-width: 0;
  font-size: 0.78rem;
}

.material-picker-table th,
.material-picker-table td {
  padding: 8px 9px;
}

.material-picker-table th {
  font-size: 0.76rem;
}

.material-picker-table .sort-label {
  gap: 6px;
}

.material-picker-table .sort-label i {
  font-size: 0.82rem;
}

.material-picker-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.material-picker-table .badge {
  min-width: 32px;
}

.material-picker-group-row td {
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--cc-line-strong) 42%, var(--cc-line));
  border-bottom: 1px solid color-mix(in srgb, var(--cc-line-strong) 34%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-line-strong) 18%, var(--cc-bg));
  color: var(--cc-line-strong);
  font-size: 0.76rem;
  text-align: left;
  text-transform: none;
}

:is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody .material-picker-group-row:hover td {
  background: color-mix(in srgb, var(--cc-line-strong) 18%, var(--cc-bg));
}

body.daylight .material-picker-group-row td {
  border-top-color: #9fb5cc;
  border-bottom-color: #b8c7d8;
  background: #d9e3ee;
  color: #2f5f8d;
}

body.daylight :is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody .material-picker-group-row:hover td {
  background: #d9e3ee;
}

.material-project-layout,
.license-project-layout,
.labor-transport-layout {
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 0;
}

.license-content-layout {
  grid-template-columns: 330px minmax(0, 1fr);
}

.materials-overview-table,
.license-catalog-table {
  table-layout: fixed;
}

.catalog-admin-table {
  table-layout: fixed;
}

.materials-overview-table th:first-child,
.materials-overview-table td:first-child,
.license-catalog-table th:first-child,
.license-catalog-table td:first-child {
  width: 38%;
}

.materials-overview-table th:nth-child(2),
.materials-overview-table td:nth-child(2),
.license-catalog-table th:nth-child(2),
.license-catalog-table td:nth-child(2) {
  width: 96px;
  text-align: center;
}

.materials-overview-table td:nth-child(2) .material-type-icon,
.license-catalog-table td:nth-child(2) .material-type-icon {
  margin-inline: auto;
}

.labor-catalog-table th:first-child,
.labor-catalog-table td:first-child {
  width: 36%;
}

.labor-catalog-table th:nth-child(2),
.labor-catalog-table td:nth-child(2) {
  width: 24%;
}

.labor-catalog-table th:nth-child(3),
.labor-catalog-table td:nth-child(3) {
  width: 120px;
  text-align: center;
}

.labor-catalog-table th:nth-child(4),
.labor-catalog-table td:nth-child(4) {
  width: 150px;
}

.labor-catalog-table th:nth-child(5),
.labor-catalog-table td:nth-child(5) {
  width: 130px;
  text-align: right;
}

.transport-catalog-table th:first-child,
.transport-catalog-table td:first-child {
  width: 28%;
}

.transport-catalog-table th:nth-child(2),
.transport-catalog-table td:nth-child(2) {
  width: 16%;
}

.transport-catalog-table th:nth-child(3),
.transport-catalog-table td:nth-child(3) {
  width: 110px;
  text-align: center;
}

.transport-catalog-table th:nth-child(4),
.transport-catalog-table td:nth-child(4),
.transport-catalog-table th:nth-child(5),
.transport-catalog-table td:nth-child(5) {
  width: 130px;
}

.transport-catalog-table th:nth-child(6),
.transport-catalog-table td:nth-child(6) {
  width: 150px;
  text-align: center;
}

.transport-catalog-table th:nth-child(7),
.transport-catalog-table td:nth-child(7) {
  width: 110px;
  text-align: right;
}

.view[data-view="clients"] .data-table th:nth-child(6),
.view[data-view="clients"] .data-table td:nth-child(6) {
  text-align: right;
}

.defects-table,
.material-defects-table {
  --defect-document-width: 92px;
  --defect-status-width: 112px;
  --defect-actions-width: 132px;
  min-width: 1320px;
  table-layout: fixed;
}

.defects-table th:nth-child(1),
.defects-table td:nth-child(1),
.material-defects-table th:nth-child(1),
.material-defects-table td:nth-child(1) {
  width: 15%;
}

.defects-table th:nth-child(2),
.defects-table td:nth-child(2),
.material-defects-table th:nth-child(2),
.material-defects-table td:nth-child(2) {
  width: 12%;
}

.defects-table th:nth-child(3),
.defects-table td:nth-child(3),
.defects-table th:nth-child(5),
.defects-table td:nth-child(5),
.material-defects-table th:nth-child(3),
.material-defects-table td:nth-child(3),
.material-defects-table th:nth-child(5),
.material-defects-table td:nth-child(5) {
  width: 108px;
}

.defects-table th:nth-child(4),
.defects-table td:nth-child(4),
.material-defects-table th:nth-child(4),
.material-defects-table td:nth-child(4) {
  width: 14%;
}

.defects-table th:nth-child(6),
.defects-table td:nth-child(6),
.material-defects-table th:nth-child(6),
.material-defects-table td:nth-child(6) {
  width: 24%;
}

.defects-table th:nth-child(7),
.defects-table td:nth-child(7),
.material-defects-table th:nth-child(7),
.material-defects-table td:nth-child(7) {
  width: 76px;
  text-align: center;
}

.defects-table th:nth-child(8),
.defects-table td:nth-child(8),
.material-defects-table th:nth-child(8),
.material-defects-table td:nth-child(8) {
  width: var(--defect-document-width);
  text-align: center;
}

.defects-table th:nth-child(9),
.defects-table td:nth-child(9),
.material-defects-table th:nth-child(9),
.material-defects-table td:nth-child(9) {
  width: var(--defect-status-width);
  text-align: center;
}

.defects-table th:nth-child(10),
.defects-table td:nth-child(10),
.material-defects-table th:nth-child(10),
.material-defects-table td:nth-child(10) {
  width: var(--defect-actions-width);
  text-align: right;
}

.defects-table td:nth-child(8) .document-link-strip,
.material-defects-table td:nth-child(8) .document-link-strip {
  justify-content: center;
  width: 100%;
}

.defects-table td:nth-child(10) .table-actions,
.material-defects-table td:nth-child(10) .table-actions {
  justify-content: flex-end;
}

.defects-table td:first-child strong,
.defects-table td:first-child .muted,
.material-defects-table td:first-child strong,
.material-defects-table td:first-child .muted {
  display: block;
}

.license-catalog-table th:nth-child(3),
.license-catalog-table td:nth-child(3) {
  width: 22%;
}

.license-catalog-table th:nth-child(4),
.license-catalog-table td:nth-child(4) {
  width: 140px;
}

.license-catalog-table th:last-child,
.license-catalog-table td:last-child {
  width: 180px;
  text-align: right;
}

.tab-panel:is([data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .tab-actionbar {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
}

.tab-panel:is([data-panel="planning"], [data-panel="aanbiedingen"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"], [data-panel="offerte"]).is-active {
  display: block;
  height: 100%;
  min-height: 0;
}

.tab-panel:is([data-panel="planning"], [data-panel="aanbiedingen"], [data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"], [data-panel="offerte"]) > .panel-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.tab-panel:is([data-panel="aanbiedingen"], [data-panel="offerte"]) > .panel-body {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--cc-line-strong) var(--cc-panel);
}

.tab-panel[data-panel="planning"] .table-wrap {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-color: var(--cc-line-strong) var(--cc-panel);
}

.tab-panel:is([data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .split-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.tab-panel:is([data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .split-layout > div {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.tab-panel:is([data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .table-wrap {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-color: var(--cc-line-strong) var(--cc-panel);
}

.material-picker-table,
.license-picker-table,
.labor-transport-picker-table {
  table-layout: fixed;
}

:is(.planning-table, .material-picker-table, .license-picker-table, .labor-transport-picker-table, .project-material-table, .project-license-table, .project-labor-transport-table) thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.material-picker-table th:first-child,
.material-picker-table td:first-child,
.license-picker-table th:first-child,
.license-picker-table td:first-child {
  width: 70%;
}

.license-picker-table th:first-child,
.license-picker-table td:first-child {
  width: 60%;
}

.material-picker-table th:nth-child(2),
.material-picker-table td:nth-child(2),
.license-picker-table th:nth-child(2),
.license-picker-table td:nth-child(2) {
  width: 15%;
}

.material-picker-table th:last-child,
.material-picker-table td:last-child,
.license-picker-table th:last-child,
.license-picker-table td:last-child {
  width: 15%;
  text-align: right;
}

.license-picker-table th:last-child,
.license-picker-table td:last-child {
  width: 25%;
}

.material-picker-table th:last-child,
.material-picker-table td:last-child {
  text-align: center;
}

.material-picker-table td:last-child .badge {
  margin-inline: auto;
}

.labor-transport-picker-table th:nth-child(2),
.labor-transport-picker-table td:nth-child(2) {
  width: 38%;
  text-align: center;
}

.labor-transport-picker-table td:nth-child(2) .badge {
  margin-inline: auto;
}

.labor-transport-picker-table th:last-child,
.labor-transport-picker-table td:last-child {
  width: 40%;
  text-align: right;
}

.labor-transport-picker-table th:first-child,
.labor-transport-picker-table td:first-child {
  width: 60%;
}

.license-content-layout .license-picker-table {
  min-width: 330px;
}

.license-content-layout .license-picker-table th:first-child,
.license-content-layout .license-picker-table td:first-child {
  width: 58%;
}

.license-content-layout .license-picker-table th:nth-child(2),
.license-content-layout .license-picker-table td:nth-child(2) {
  width: 64px;
  text-align: center;
}

.license-content-layout .license-picker-table th:last-child,
.license-content-layout .license-picker-table td:last-child {
  width: 24%;
  text-align: left;
}

.license-content-table {
  min-width: 620px;
  table-layout: fixed;
}

.license-content-table th:first-child,
.license-content-table td:first-child {
  width: 42%;
}

.license-content-table th:nth-child(2),
.license-content-table td:nth-child(2) {
  width: 14%;
  text-align: center;
}

.license-content-table th:nth-child(3),
.license-content-table td:nth-child(3) {
  width: 16%;
}

.license-content-table th:nth-child(4),
.license-content-table td:nth-child(4) {
  width: 20%;
}

.license-content-table th:last-child,
.license-content-table td:last-child {
  width: 8%;
  text-align: right;
}

:is(.material-picker-table, .license-picker-table, .labor-transport-picker-table) tbody .material-picker-group-row td {
  text-align: left;
}

.material-search-list,
.material-lines,
.flow-list {
  display: grid;
  gap: 10px;
}

.material-card,
.line-card,
.flow-card {
  padding: 12px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-panel-deep) 58%, var(--cc-panel));
}

.material-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.material-card strong,
.line-card strong,
.flow-card strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 400;
}

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

.small {
  font-size: 0.78rem;
}

.line-card {
  display: grid;
  gap: 10px;
}

.line-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.component-list {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-left: 2px solid var(--cc-accent);
  background: rgba(0, 18, 60, 0.38);
}

.component-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  color: var(--cc-muted);
  font-size: 0.82rem;
}

.quote-preview {
  display: grid;
  gap: 12px;
}

.quote-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.quote-list-view,
.quote-detail-view,
.invoice-detail-view,
.invoice-create-view {
  min-height: 0;
}

.invoice-create-view {
  display: grid;
  gap: 18px;
}

.invoice-create-view[hidden] {
  display: none;
}

.invoice-builder {
  display: grid;
  grid-template-columns: minmax(300px, 0.52fr) minmax(0, 1.48fr);
  gap: 18px;
  align-items: start;
}

.invoice-source-wrap {
  min-height: 0;
}

.invoice-source-table {
  min-width: 700px;
  table-layout: fixed;
}

.invoice-source-table th:nth-child(1),
.invoice-source-table td:nth-child(1) {
  width: 76px;
  text-align: center;
}

.invoice-source-table th:nth-child(2),
.invoice-source-table td:nth-child(2) {
  width: 132px;
}

.invoice-source-table th:nth-child(4),
.invoice-source-table td:nth-child(4) {
  width: 76px;
  text-align: center;
}

.invoice-source-table th:nth-child(5),
.invoice-source-table td:nth-child(5) {
  width: 124px;
  text-align: right;
}

.invoice-source-table th:nth-child(6),
.invoice-source-table td:nth-child(6) {
  width: 116px;
  text-align: center;
}

.invoice-source-table input {
  accent-color: var(--cc-accent);
}

.invoice-build-card {
  min-width: 0;
}

.invoice-build-card .invoice-lines-toolbar {
  display: grid;
  justify-content: start;
  gap: 4px;
}

.invoice-build-form {
  display: grid;
  gap: 0;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  overflow: visible;
  background: color-mix(in srgb, var(--cc-panel-deep) 34%, transparent);
}

.invoice-build-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, max-content);
  gap: 5px 12px;
  align-items: end;
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cc-line);
}

.invoice-build-row:has(.invoice-build-controls) .label {
  grid-column: 1 / -1;
}

.invoice-build-row:has(.invoice-build-controls) .invoice-build-controls {
  grid-column: 1;
  grid-row: 2;
}

.invoice-build-row:has(.invoice-build-controls) > strong {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.invoice-build-row:not(:has(.invoice-build-controls)) .label {
  grid-column: 1;
}

.invoice-build-row:not(:has(.invoice-build-controls)) > strong {
  grid-column: 2;
}

.invoice-build-row:last-child {
  border-bottom: 0;
}

.invoice-build-row:has(.scc-select.is-open),
.invoice-build-row:has(.scc-select:focus-within) {
  position: relative;
  z-index: calc(var(--cc-layer-dropdown) + 1);
}

.invoice-build-row strong {
  color: var(--cc-text);
  font-size: 0.8rem;
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.invoice-build-row .label {
  color: var(--cc-accent);
  font-size: 0.7rem;
  line-height: 1.1;
}

.invoice-build-controls {
  display: grid;
  grid-template-columns: 118px 58px;
  gap: 6px;
  align-items: stretch;
  justify-content: start;
  max-width: 184px;
}

.invoice-build-controls-wide {
  grid-template-columns: minmax(0, 220px);
  max-width: 220px;
}

.invoice-build-controls :is(.input, .scc-select-value) {
  width: 100%;
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  line-height: 1;
}

.invoice-build-controls .input {
  display: block;
}

.invoice-build-controls .scc-select-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 24px;
}

.invoice-build-controls .scc-select-menu button {
  padding: 7px 9px;
  font-size: 0.74rem;
}

.invoice-build-controls .scc-select-menu {
  z-index: var(--cc-layer-dropdown);
}

.invoice-builder-total {
  margin-top: 10px;
}

.invoice-builder-total .quote-total-row {
  min-height: 34px;
  padding: 7px 0;
}

.invoice-builder-total .quote-total-row span,
.invoice-builder-total .quote-total-row strong {
  font-size: 0.82rem;
}

.invoice-plan-card {
  min-width: 0;
}

.invoice-plan-card .quote-overview-wrap {
  height: 360px;
  overflow: auto;
}

.invoice-plan-card .invoice-plan-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.invoice-plan-card .invoice-lines-toolbar {
  position: relative;
  z-index: calc(var(--cc-layer-dropdown) + 1);
}

.invoice-plan-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.invoice-plan-layout-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--cc-accent);
  font-size: 0.68rem;
  line-height: 1;
}

.compact-document-view-select {
  width: 220px;
  min-width: 0;
}

.compact-document-view-select .scc-select-value {
  width: 100%;
  min-height: 36px;
  padding: 0 34px 0 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}

.compact-document-view-select .scc-select-menu {
  min-width: 260px;
}

.invoice-plan-toolbar-actions .btn {
  min-height: 36px;
  padding: 0 14px;
  white-space: nowrap;
}

.invoice-stage-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.invoice-plan-table {
  min-width: 720px;
  table-layout: fixed;
}

.invoice-plan-table th:nth-child(1),
.invoice-plan-table td:nth-child(1) {
  width: 96px;
}

.invoice-plan-table th:nth-child(3),
.invoice-plan-table td:nth-child(3) {
  width: 100px;
}

.invoice-plan-table th:nth-child(4),
.invoice-plan-table td:nth-child(4) {
  width: 116px;
  padding-right: 6px;
}

.invoice-plan-table th:nth-child(5),
.invoice-plan-table td:nth-child(5) {
  width: 116px;
  padding-left: 6px;
}

.invoice-plan-table th:nth-child(6),
.invoice-plan-table td:nth-child(6) {
  width: 110px;
  text-align: right;
}

.invoice-plan-table th:nth-child(7),
.invoice-plan-table td:nth-child(7) {
  width: 82px;
  text-align: center;
}

.invoice-plan-table .compact-input {
  width: 100%;
  min-height: 32px;
  font-size: 0.75rem;
}

.invoice-plan-title-input {
  min-width: 0;
  max-width: 220px;
}

.quote-detail-heading,
.invoice-detail-heading {
  display: none;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.quote-detail-heading strong,
.invoice-detail-heading strong {
  overflow: hidden;
  color: var(--cc-text);
  font-size: 1rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-detail-heading span,
.invoice-detail-heading span {
  flex: 0 0 auto;
  color: var(--cc-muted);
  font-size: 0.78rem;
}

body.daylight :is(.quote-detail-heading, .invoice-detail-heading) strong {
  color: var(--cc-text);
}

body.daylight :is(.quote-detail-heading, .invoice-detail-heading) span {
  color: var(--cc-muted);
}

.tab-panel[data-panel="offerte"] .panel-body:has(:is(.quote-detail-view, .invoice-detail-view):not([hidden])) .quote-list-heading {
  display: none;
}

.tab-panel[data-panel="offerte"] .panel-body:has(:is(.quote-detail-view, .invoice-detail-view):not([hidden])) .quote-list-action {
  display: none;
}

.tab-panel[data-panel="offerte"] .panel-body:has(.quote-detail-view:not([hidden])) .quote-detail-heading {
  display: flex;
}

.tab-panel[data-panel="offerte"] .panel-body:has(.invoice-detail-view:not([hidden])) .invoice-detail-heading {
  display: flex;
}

.quote-list-wrap {
  height: auto;
  min-height: 0;
  max-height: 220px;
}

.quote-list-wrap::after {
  display: none;
}

.quote-list-table {
  --financial-number-width: 132px;
  --financial-status-width: 132px;
  --financial-amount-width: 140px;
  --financial-actions-width: 176px;
  --financial-meta-width: 104px;
  --financial-date-width: 124px;
  --financial-documents-width: 112px;
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
}

.project-offer-section {
  display: grid;
  gap: 12px;
}

.project-invoice-section {
  display: grid;
  gap: 12px;
  margin-top: 64px;
}

.project-financial-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.project-financial-header strong {
  display: block;
  color: var(--cc-text);
  font-size: 1rem;
  font-weight: 400;
}

.project-financial-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

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

.project-invoice-summary > div {
  display: grid;
  gap: 5px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 78%, transparent);
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-panel-deep) 36%, var(--cc-panel));
}

.project-invoice-summary strong {
  color: var(--cc-text);
  font-size: 1.05rem;
  font-weight: 400;
}

.project-invoice-open {
  color: var(--cc-warning) !important;
}

.project-invoice-wrap {
  min-height: 0;
  max-height: max(220px, calc(100vh - 520px));
  overflow: auto;
}

.project-invoice-table {
  --financial-number-width: 132px;
  --financial-status-width: 132px;
  --financial-amount-width: 140px;
  --financial-meta-width: 104px;
  --financial-date-width: 124px;
  --financial-actions-width: 176px;
  --financial-documents-width: 112px;
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
}

.project-invoice-table th:nth-child(1),
.project-invoice-table td:nth-child(1) {
  width: var(--financial-number-width);
}

.project-invoice-table th:nth-child(3),
.project-invoice-table td:nth-child(3) {
  width: var(--financial-meta-width);
}

.project-invoice-table th:nth-child(4),
.project-invoice-table td:nth-child(4) {
  width: var(--financial-date-width);
}

.project-invoice-table th:nth-child(5),
.project-invoice-table td:nth-child(5) {
  width: var(--financial-amount-width);
  text-align: right;
}

.project-invoice-table th:nth-child(6),
.project-invoice-table td:nth-child(6) {
  width: var(--financial-actions-width);
  text-align: center;
}

.project-invoice-table th:nth-child(7),
.project-invoice-table td:nth-child(7) {
  width: var(--financial-status-width);
  text-align: center;
}

.project-invoice-table th:nth-child(8),
.project-invoice-table td:nth-child(8) {
  width: var(--financial-documents-width);
  text-align: right;
}

body.daylight .project-invoice-summary > div {
  border-color: #c8d5e3;
  background: #f7fafc;
}

body.daylight .invoice-build-form {
  border-color: #c8d5e3;
  background: #f7fafc;
}

body.daylight .invoice-build-row {
  border-bottom-color: #c8d5e3;
}

.quote-list-table th:nth-child(1),
.quote-list-table td:nth-child(1) {
  width: var(--financial-number-width);
}

.quote-list-table th:nth-child(3),
.quote-list-table td:nth-child(3) {
  width: 64px;
  text-align: center;
}

.quote-list-table th:nth-child(4),
.quote-list-table td:nth-child(4) {
  width: var(--financial-meta-width);
  text-align: center;
}

.quote-list-table th:nth-child(5),
.quote-list-table td:nth-child(5) {
  width: var(--financial-amount-width);
  text-align: right;
}

.quote-list-table th:nth-child(6),
.quote-list-table td:nth-child(6) {
  width: var(--financial-actions-width);
  text-align: center;
}

.quote-list-table th:nth-child(7),
.quote-list-table td:nth-child(7) {
  width: var(--financial-status-width);
  text-align: center;
}

.quote-list-table th:nth-child(8),
.quote-list-table td:nth-child(8) {
  width: var(--financial-documents-width);
  text-align: right;
}

.quote-list-table td:nth-child(8) .document-link-strip {
  justify-content: flex-end;
  width: 100%;
}

.project-invoice-table td:nth-child(8) .document-link-strip {
  justify-content: flex-end;
  width: 100%;
}

body.daylight .quote-list-table td {
  background: #ffffff;
}

body.daylight .quote-list-table tr:nth-child(even) td {
  background: #f7fafc;
}

body.daylight .quote-list-table tr:hover td {
  background: #eef4f9;
}

.quote-list-table tr.selected-row td {
  background: color-mix(in srgb, #ff2fad 24%, var(--cc-panel-deep));
  border-top-color: color-mix(in srgb, #ff2fad 78%, var(--cc-line));
  border-bottom-color: color-mix(in srgb, #ff2fad 66%, var(--cc-line));
}

.quote-list-table tr.selected-row td:first-child strong,
.quote-list-table tr.selected-row td:nth-child(2) {
  color: #ffffff;
}

body.daylight .quote-list-table tr.selected-row td {
  background: #f4d3ec;
  border-top-color: #d52b98;
  border-bottom-color: #e65aaf;
}

body.daylight .quote-list-table tr.selected-row td:first-child strong,
body.daylight .quote-list-table tr.selected-row td:nth-child(2) {
  color: var(--cc-text);
}

.offer-dependent-tab {
  margin-left: clamp(18px, 2vw, 32px);
}

.tab:is([data-tab="aanbiedingen"], [data-tab="materialen"], [data-tab="licenties"], [data-tab="arbeid-transport"], [data-tab="offerte"]) {
  position: relative;
  overflow: hidden;
}

.tab:is([data-tab="aanbiedingen"], [data-tab="materialen"], [data-tab="licenties"], [data-tab="arbeid-transport"], [data-tab="offerte"]).is-mlat-loading::after {
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cc-accent), transparent);
  content: "";
  animation: mlat-loading-sweep 500ms ease-out 2;
}

@keyframes mlat-loading-sweep {
  from {
    opacity: 0.15;
    transform: translateX(-42%);
  }

  45% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(42%);
  }
}

.tab:disabled,
.tab[aria-disabled="true"] {
  cursor: not-allowed;
  border-color: color-mix(in srgb, var(--cc-line) 55%, transparent);
  background: color-mix(in srgb, var(--cc-panel) 70%, var(--cc-bg));
  color: var(--cc-subtle);
  opacity: 0.56;
}

.offer-delta-low {
  --status-color: var(--cc-success);
}

.offer-delta-mid {
  --status-color: var(--cc-warning);
}

.offer-delta-high {
  --status-color: var(--cc-danger);
}

.badge:is(.offer-delta-low, .offer-delta-mid, .offer-delta-high) {
  border-color: color-mix(in srgb, var(--status-color) 78%, var(--cc-line));
  background: color-mix(in srgb, var(--status-color) 12%, var(--cc-panel-deep));
  color: var(--status-color);
}

body.daylight .badge:is(.offer-delta-low, .offer-delta-mid, .offer-delta-high),
body.daylight .badge:is(.quote-status-concept, .quote-status-sent, .quote-status-signed, .quote-status-expired, .invoice-status-concept, .invoice-status-created, .invoice-status-sent, .invoice-status-expired, .invoice-status-paid) {
  border-color: color-mix(in srgb, var(--status-color) 78%, #c8d5e3);
  background: color-mix(in srgb, var(--status-color) 8%, #ffffff);
  color: color-mix(in srgb, var(--status-color) 86%, #10213f);
}

.document-link-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.invoice-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.invoice-row-action {
  --invoice-action-color: var(--cc-accent);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--invoice-action-color) 66%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--invoice-action-color) 12%, var(--cc-panel-deep));
  color: var(--invoice-action-color);
  cursor: pointer;
}

.invoice-row-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--invoice-action-color) 22%, var(--cc-panel-deep));
}

.invoice-row-action.is-success {
  --invoice-action-color: var(--cc-success);
}

.invoice-row-action.is-warning {
  --invoice-action-color: var(--cc-warning);
}

.invoice-row-action.is-danger {
  --invoice-action-color: #ff4d6d;
}

.invoice-row-action.is-open {
  --invoice-action-color: var(--cc-accent);
}

.invoice-row-action:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

body.daylight .invoice-row-action {
  background: color-mix(in srgb, var(--invoice-action-color) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--invoice-action-color) 70%, #c8d5e3);
}

body.daylight .invoice-row-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--invoice-action-color) 18%, #ffffff);
}

.quote-list-table .table-actions,
.project-invoice-table .table-actions {
  justify-content: flex-end;
}

.document-link {
  --document-color: var(--cc-accent);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--document-color) 66%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--document-color) 12%, var(--cc-panel-deep));
  color: var(--document-color);
  cursor: pointer;
}

.document-link:hover:not(:disabled) {
  background: color-mix(in srgb, var(--document-color) 22%, var(--cc-panel-deep));
}

.document-link:disabled,
.document-link.is-disabled {
  --document-color: var(--cc-subtle);
  cursor: not-allowed;
  opacity: 0.38;
}

.document-link.is-pending {
  --document-color: var(--cc-subtle);
  opacity: 0.62;
}

.document-link.is-pending:hover {
  opacity: 0.82;
}

.document-status-concept {
  --document-color: #f83aa6;
}

.document-status-sent,
.document-status-reminder {
  --document-color: var(--cc-warning);
}

.document-status-signed,
.document-status-paid {
  --document-color: var(--cc-success);
}

.document-status-created {
  --document-color: var(--cc-accent);
}

.document-status-expired {
  --document-color: #ff6b6b;
}

body.daylight .document-link {
  border-color: color-mix(in srgb, var(--document-color) 54%, #c8d5e3);
  background: color-mix(in srgb, var(--document-color) 10%, #ffffff);
}

body.daylight .document-link:hover:not(:disabled) {
  background: color-mix(in srgb, var(--document-color) 18%, #ffffff);
}

.ui-tooltip {
  position: fixed;
  z-index: var(--cc-layer-overlay);
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 48%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-panel-deep) 92%, #000000);
  box-shadow: 0 14px 34px rgba(0, 10, 32, 0.38);
  color: var(--cc-text);
  font-size: 0.76rem;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.ui-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.daylight .ui-tooltip {
  border-color: #b8c7d8;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(12, 35, 72, 0.16);
  color: var(--cc-text);
}

.quote-list-table td:first-child strong,
.quote-list-table td:first-child span {
  display: block;
}

.tab-panel[data-panel="offerte"] .panel-body:not(:has(.quote-detail-view:not([hidden]))) .quote-detail-action {
  display: none;
}

.invoice-detail-action {
  display: none;
}

.financial-invoice-actionbar[hidden] {
  display: none;
}

.financial-invoice-actionbar .invoice-detail-heading {
  display: flex !important;
}

.financial-invoice-actionbar .invoice-detail-action {
  display: inline-flex !important;
}

.tab-panel[data-panel="offerte"] .panel-body:has(.invoice-detail-view:not([hidden])) .invoice-detail-action {
  display: inline-flex;
}

.tab-panel[data-panel="offerte"] .panel-body:has(.invoice-detail-view:not([hidden])) .quote-detail-action {
  display: none;
}

.quote-side {
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-width: 0;
}

.quote-signature-status {
  align-self: end;
}

.quote-status-primary-action {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
}

.invoice-detail-side {
  align-content: start;
}

.invoice-side-card {
  align-self: start;
}

.invoice-side-form-grid {
  align-items: end;
}

.invoice-workflow-card {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.invoice-workflow-actions {
  display: grid;
  gap: 10px;
  padding-top: 18px;
}

.invoice-workflow-button {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.invoice-aftercare-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.invoice-workflow-button.is-success {
  border-color: color-mix(in srgb, var(--cc-success) 78%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-success) 18%, var(--cc-panel));
  color: var(--cc-success);
}

.invoice-workflow-button.is-warning {
  border-color: color-mix(in srgb, var(--cc-warning) 78%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-warning) 14%, var(--cc-panel));
  color: var(--cc-warning);
}

.invoice-workflow-button:disabled {
  opacity: 0.52;
}

.invoice-completion-list {
  margin-top: 14px;
}

.quote-overview-card {
  align-self: start;
  min-width: 0;
}

.quote-mail-editor {
  margin-top: 12px;
}

.quote-overview-wrap {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, var(--cc-panel));
}

.quote-overview-table {
  min-width: 720px;
  table-layout: fixed;
}

.quote-line-text-input {
  width: 100%;
  min-height: 36px;
  font-weight: 700;
}

.quote-adjustment-row .quote-line-text-input {
  font-weight: 500;
}

.invoice-lines-table {
  min-width: 760px;
  table-layout: fixed;
}

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

.invoice-detail-line td {
  color: var(--cc-muted);
  font-size: 0.82rem;
}

.document-view-group-row td {
  background: color-mix(in srgb, var(--cc-blue) 10%, transparent);
  color: var(--cc-text);
  font-weight: 400;
}

.document-view-item-row td:first-child {
  padding-left: 44px;
}

.document-view-expanded-row td {
  color: var(--cc-muted);
  font-size: 0.82rem;
}

.document-view-expanded-row td:first-child {
  padding-left: 68px;
}

.invoice-line-label {
  cursor: text;
}

.scc-select[data-document-view-select] .scc-select-menu button span {
  display: block;
  margin-top: 2px;
  color: var(--cc-muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.invoice-email-editor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr);
  gap: 12px;
  min-height: 280px;
  padding-top: 2px;
}

.invoice-email-body {
  min-height: 190px;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--cc-line-strong);
  border-radius: var(--cc-radius-large);
  background: var(--cc-panel-deep);
  color: var(--cc-text);
  line-height: 1.45;
  outline: none;
}

.invoice-email-body:empty::before {
  content: attr(data-placeholder);
  color: var(--cc-muted);
}

.invoice-email-body:focus {
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-accent) 22%, transparent);
}

.invoice-attachment-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 190px;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 54%, var(--cc-panel));
}

.invoice-attachment-panel strong {
  margin: 0 0 2px;
  color: var(--cc-text);
  font-weight: 400;
}

.invoice-attachment-option {
  min-height: 38px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.daylight .invoice-email-body {
  border-color: #c8d5e3;
  background: #ffffff;
  color: var(--cc-text);
}

body.daylight .invoice-email-body:empty::before {
  color: var(--cc-text-secondary);
}

body.daylight .invoice-attachment-panel {
  border-color: #c8d5e3;
  background: #f7fafc;
}

body.daylight .invoice-attachment-panel strong {
  color: var(--cc-text);
}

body.daylight .invoice-attachment-option {
  color: var(--cc-text-secondary);
}

.invoice-variable-menu {
  position: absolute;
  z-index: 36;
  width: min(360px, 100%);
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--cc-accent);
  border-radius: 8px;
  background: var(--cc-panel);
  box-shadow: 0 18px 40px rgba(0, 10, 32, 0.34);
}

.invoice-variable-menu[hidden] {
  display: none;
}

.invoice-variable-menu button {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cc-text);
  text-align: left;
  cursor: pointer;
}

.invoice-variable-menu button:hover,
.invoice-variable-menu button:focus-visible {
  background: color-mix(in srgb, var(--cc-accent) 16%, transparent);
  outline: none;
}

.invoice-variable-menu strong {
  margin: 0;
  color: var(--cc-accent);
  font-size: 0.88rem;
}

.invoice-variable-menu span {
  color: var(--cc-muted);
  font-size: 0.76rem;
}

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

body.daylight .invoice-detail-line td {
  color: var(--cc-muted);
}

.invoice-new-contact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-line-strong) 7%, transparent);
}

.invoice-new-contact[hidden] {
  display: none;
}

body.daylight .invoice-new-contact {
  border-color: #c8d5e3;
  background: #f7fafc;
}

.invoice-generated-status {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.45fr);
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-success) 9%, transparent);
}

.invoice-generated-status[hidden] {
  display: none;
}

.invoice-generated-status > div {
  display: grid;
  gap: 6px;
}

.invoice-generated-status strong {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  color: var(--cc-success);
}

body.daylight .invoice-generated-status {
  border-color: #77b88a;
  background: #eff8f1;
}

.invoice-lines-table th:first-child,
.invoice-lines-table td:first-child {
  width: 46%;
}

.invoice-lines-table th:nth-child(2),
.invoice-lines-table td:nth-child(2),
.invoice-lines-table th:nth-child(4),
.invoice-lines-table td:nth-child(4) {
  width: 82px;
}

.invoice-lines-table th:nth-child(3),
.invoice-lines-table td:nth-child(3),
.invoice-lines-table th:nth-child(5),
.invoice-lines-table td:nth-child(5) {
  width: 140px;
}

.invoice-lines-table .invoice-line-input {
  width: 100%;
}

.invoice-lines-table .is-invoice-line-editing td {
  vertical-align: middle;
}

.quote-overview-table th:nth-child(2),
.quote-overview-table td:nth-child(2) {
  width: 128px;
}

.quote-overview-table th:nth-child(3),
.quote-overview-table td:nth-child(3),
.quote-overview-table th:nth-child(4),
.quote-overview-table td:nth-child(4) {
  width: 120px;
  text-align: left;
}

.quote-overview-table td:first-child strong {
  display: block;
  margin: 0 0 3px;
  font-weight: 400;
}

.quote-overview-table td:first-child span {
  display: block;
}

.quote-detail-view .quote-overview-table .document-view-group-row td:first-child {
  padding-left: 28px;
}

.quote-detail-view .quote-overview-table .document-view-item-row td:first-child {
  padding-left: 52px;
}

.quote-detail-view .quote-overview-table .document-view-expanded-row td:first-child {
  padding-left: 76px;
}

.invoice-detail-view .invoice-lines-table .document-view-group-row td:first-child {
  padding-left: 28px;
}

.invoice-detail-view .invoice-lines-table .document-view-item-row td:first-child {
  padding-left: 52px;
}

.invoice-detail-view .invoice-lines-table .document-view-expanded-row td:first-child {
  padding-left: 76px;
}

.quote-line-label {
  cursor: text;
  font-weight: 700;
}

.quote-line-save {
  margin-left: 6px;
  vertical-align: middle;
}

.quote-discount-input {
  min-height: 30px;
  width: 58px;
  max-width: 100%;
  padding: 5px 7px;
  text-align: left;
}

.quote-discount-input.euro-discount-input {
  width: 86px;
}

.quote-adjustment-row td {
  background: color-mix(in srgb, var(--cc-line-strong) 8%, transparent);
}

.quote-email-preview {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.quote-email-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 2px 8px;
  color: var(--cc-muted);
  font-size: 0.72rem;
}

.small-inline-action {
  min-height: 30px;
  padding: 5px 9px;
  gap: 6px;
  font-size: 0.72rem;
}

.quote-email-card {
  overflow: hidden;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-panel-deep) 58%, var(--cc-panel));
}

.quote-email-cover,
.quote-email-body,
.quote-email-appendix {
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--cc-line) 78%, transparent);
}

.quote-email-cover {
  background: color-mix(in srgb, var(--cc-accent) 11%, transparent);
}

.quote-email-cover[hidden],
.quote-email-appendix[hidden] {
  display: none;
}

.quote-email-badge {
  border-color: color-mix(in srgb, var(--cc-accent) 70%, var(--cc-line));
  color: var(--cc-accent);
  background: var(--cc-accent-soft);
}

.quote-email-cover h3 {
  margin: 8px 0 5px;
  font-size: 1rem;
}

.quote-email-cover p,
.quote-email-body p {
  margin: 0 0 9px;
  color: var(--cc-muted);
  line-height: 1.45;
}

.quote-email-body dl {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.quote-email-body dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 70%, transparent);
  border-radius: var(--cc-radius);
}

.quote-email-body dt,
.quote-email-body dd {
  margin: 0;
}

.quote-email-body dt {
  color: var(--cc-muted);
}

.quote-email-body dd {
  color: var(--cc-text);
  font-weight: 700;
}

.quote-sign-cta,
.quote-send-button {
  width: 100%;
  justify-content: center;
}

.quote-email-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.quote-email-actions .btn {
  justify-content: center;
  min-width: 0;
}

.quote-download-cta {
  width: 100%;
}

.quote-email-appendix {
  border-bottom: 0;
}

.quote-email-appendix strong {
  display: block;
  margin-bottom: 12px;
}

.quote-email-appendix ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--cc-muted);
}

.quote-send-options {
  display: grid;
  gap: 14px;
}

.quote-generate-options .quote-send-options {
  gap: 16px;
}

.quote-generate-options .field {
  gap: 7px;
}

.quote-send-button.is-sent {
  border-color: color-mix(in srgb, var(--cc-success) 70%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-success) 14%, var(--cc-panel));
  color: var(--cc-success);
}

body.daylight .quote-email-card {
  border-color: #c8d5e3;
  background: #ffffff;
}

body.daylight .quote-email-cover {
  background: rgba(0, 186, 255, 0.08);
}

body.daylight .quote-email-cover,
body.daylight .quote-email-body,
body.daylight .quote-email-appendix {
  border-color: #d6e0eb;
}

body.daylight .quote-email-body dl div {
  border-color: #d6e0eb;
  background: #f7fafc;
}

body.daylight .quote-send-button.is-sent {
  border-color: #77b88a;
  background: #eff8f1;
}

.quote-generate-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
}

.quote-generate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  min-height: 0;
}

.quote-generate-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.quote-email-card-large {
  overflow: auto;
}

.quote-email-card-large .quote-email-cover,
.quote-email-card-large .quote-email-body,
.quote-email-card-large .quote-email-appendix {
  padding: 28px;
}

.quote-email-card-large .quote-email-cover h3 {
  margin-top: 18px;
  font-size: 1.45rem;
}

.quote-email-card-large .quote-email-body {
  font-size: 0.92rem;
}

.quote-email-card-large .quote-email-body p + p {
  margin-top: 14px;
}

.quote-generate-options {
  display: grid;
  gap: 20px;
  align-content: start;
  min-width: 0;
}

.quote-generate-options .line-card {
  padding: 18px;
}

.quote-generate-options .line-card > strong {
  display: block;
  margin-bottom: 16px;
}

.quote-generate-summary .quote-status-row {
  min-height: 44px;
  padding-inline: 12px;
}

.quote-generate-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.quote-generate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin: 20px -20px -20px;
  padding: 16px 20px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 40%, transparent);
}

.quote-generate-actions .quote-send-button {
  width: auto;
  min-width: 180px;
}

body.daylight .quote-generate-actions {
  border-color: #c8d5e3;
}

.quote-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quote-readonly-display {
  display: none;
}

.quote-snapshot-locked .quote-overview-table :is(.quote-line-text-input, .quote-discount-input) {
  display: none;
}

.quote-snapshot-locked .quote-overview-table .quote-readonly-display {
  display: inline;
}

.quote-form-grid .scc-select-value {
  min-height: 38px;
}

.quote-side :is(.input, .scc-select-value) {
  min-height: 38px;
}

.quote-side .scc-select-value span {
  display: none;
}

.quote-side [data-quote-version-select] .scc-select-value span {
  display: inline;
  margin-left: 8px;
  color: var(--cc-muted);
  font-weight: 400;
}

.quote-side [data-quote-version-select] :is(.scc-select-value, .scc-select-menu button) {
  white-space: nowrap;
}

.quote-side [data-quote-version-select] :is(.scc-select-value strong, .scc-select-menu strong) {
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(.quote-detail-view, .invoice-detail-view) .scc-select.is-disabled,
.relation-combobox.is-disabled {
  pointer-events: none;
}

:is(.quote-detail-view, .invoice-detail-view) .input:disabled,
:is(.quote-detail-view, .invoice-detail-view) .scc-select.is-disabled .scc-select-value,
.relation-combobox.is-disabled .relation-input,
.invoice-email-body.is-disabled {
  min-height: 30px;
  padding: 2px 0;
  border-color: transparent;
  background: transparent;
  color: var(--cc-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

:is(.quote-detail-view, .invoice-detail-view) .input:disabled,
.relation-combobox.is-disabled .relation-input {
  -webkit-text-fill-color: var(--cc-text-disabled);
}

:is(.quote-detail-view, .invoice-detail-view) .readonly-input:disabled {
  background: transparent;
}

body:not(.daylight) :is(.quote-detail-view, .invoice-detail-view) .input:disabled,
body:not(.daylight) :is(.quote-detail-view, .invoice-detail-view) .scc-select.is-disabled .scc-select-value,
body:not(.daylight) .relation-combobox.is-disabled .relation-input,
body:not(.daylight) .invoice-email-body.is-disabled {
  min-height: 38px;
  padding: 8px 10px;
  border-color: color-mix(in srgb, var(--cc-line) 72%, transparent);
  background: color-mix(in srgb, var(--cc-bg) 68%, var(--cc-panel));
  color: var(--cc-muted);
}

body:not(.daylight) :is(.quote-detail-view, .invoice-detail-view) .input:disabled,
body:not(.daylight) .relation-combobox.is-disabled .relation-input {
  -webkit-text-fill-color: var(--cc-muted);
}

body:not(.daylight) :is(.quote-detail-view, .invoice-detail-view) .scc-select.is-disabled .scc-select-value {
  padding-right: 34px;
}

:is(.quote-detail-view, .invoice-detail-view) .field:has(:is(.input:disabled, .scc-select.is-disabled, .relation-combobox.is-disabled)) .label {
  color: color-mix(in srgb, var(--cc-line-strong) 72%, var(--cc-muted));
}

.invoice-email-body.is-disabled {
  cursor: not-allowed;
}

.invoice-line-label.is-disabled {
  cursor: not-allowed;
  color: var(--cc-muted);
}

.quote-status-list {
  display: grid;
  gap: 8px;
}

.quote-status-row {
  --quote-status-color: var(--cc-warning);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--quote-status-color) 58%, var(--cc-line));
  border-left: 4px solid var(--quote-status-color);
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--quote-status-color) 12%, var(--cc-panel));
  color: inherit;
  font: inherit;
  text-align: left;
}

.quote-status-row:is(button, [role="button"]) {
  appearance: none;
  cursor: pointer;
}

.quote-status-row:is(button, [role="button"]):hover,
.quote-status-row:is(button, [role="button"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quote-status-color) 18%, transparent);
}

.quote-status-row:disabled:not(.is-success) {
  cursor: not-allowed;
  opacity: 0.56;
}

.quote-status-row.is-warning {
  --quote-status-color: var(--cc-warning);
}

.quote-status-row.is-open {
  --quote-status-color: var(--cc-accent);
}

.quote-status-row.is-success {
  --quote-status-color: var(--cc-success);
}

.quote-status-row.is-danger {
  --quote-status-color: var(--cc-danger);
}

body.daylight .quote-status-row {
  border-color: color-mix(in srgb, var(--quote-status-color) 48%, #c8d5e3);
  border-left-color: var(--quote-status-color);
  background: color-mix(in srgb, var(--quote-status-color) 10%, #f7fafc);
}

.quote-status-row span {
  color: var(--cc-muted);
}

body.daylight .quote-status-row span {
  color: var(--cc-muted);
}

.quote-status-row strong {
  margin: 0;
  color: var(--cc-text);
  font-weight: 400;
}

body.daylight .quote-status-row strong {
  color: var(--cc-text);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 2px 0;
  color: var(--cc-muted);
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  accent-color: var(--cc-accent);
}

.quote-total {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cc-line);
}

.quote-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--cc-muted);
}

.quote-vat-select {
  width: 180px;
  max-width: 60%;
}

.quote-vat-select .scc-select-value {
  min-height: 34px;
  padding: 6px 30px 6px 10px;
}

.quote-total-row.final {
  color: var(--cc-text);
  font-size: 1.15rem;
  font-weight: 400;
}

.document-grid,
.license-grid,
.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.document-card,
.license-card,
.warehouse-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-line-strong) 7%, var(--cc-panel));
}

.settings-panel .tabs {
  overflow-x: auto;
}

.settings-layout {
  display: grid;
  gap: 18px;
}

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

.settings-column-full {
  grid-column: 1 / -1;
}

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

.settings-materials-templates {
  grid-column: 1 / -1;
}

.settings-section {
  display: grid;
  gap: 16px;
}

.settings-section .detail-subpanel-header {
  align-items: flex-start;
}

.settings-section .detail-subpanel-header h3 {
  margin: 0;
}

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

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

.settings-field-wide {
  grid-column: span 2;
}

.settings-field-full {
  grid-column: 1 / -1;
}

.settings-table {
  min-width: 920px;
}

.settings-table th:last-child,
.settings-table td:last-child {
  text-align: right;
}

.settings-table td:last-child .table-actions {
  justify-content: flex-end;
}

.settings-template-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.settings-template-table tbody tr {
  cursor: pointer;
}

.settings-number-table tbody tr,
.settings-pdf-template-table tbody tr,
.document-template-choice-table tbody tr {
  cursor: pointer;
}

.document-template-choice-table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--cc-accent) 12%, transparent);
}

.settings-document-dialog .contact-dialog-content,
.document-template-choice-dialog .contact-dialog-content,
.settings-sla-dialog .contact-dialog-content {
  max-width: 820px;
}

.document-template-choice-table {
  min-width: 720px;
}

.settings-email-table {
  min-width: 0;
  table-layout: fixed;
}

.settings-email-table th:nth-child(2),
.settings-email-table td:nth-child(2) {
  width: 96px;
}

.settings-email-table th:last-child,
.settings-email-table td:last-child {
  width: 76px;
}

.settings-template-body {
  min-height: 260px;
}

.settings-option-layout {
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
}

.settings-option-set-table {
  min-width: 720px;
}

.settings-option-set-table tbody tr,
.settings-option-value-table tbody tr {
  cursor: pointer;
}

.settings-option-set-table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--cc-accent) 12%, transparent);
}

.settings-option-impact-wrap {
  margin-top: 16px;
}

.settings-option-impact-table {
  min-width: 620px;
}

.settings-option-dialog .contact-dialog-content,
.settings-option-list-dialog .contact-dialog-content {
  max-width: 840px;
}

.settings-option-values-wrap {
  margin-top: 16px;
}

.settings-template-dialog .contact-dialog-content {
  max-width: 920px;
}

.settings-template-component-wrap {
  margin-top: 16px;
}

.settings-template-component-table {
  min-width: 760px;
}

.settings-template-component-table th:last-child,
.settings-template-component-table td:last-child {
  text-align: right;
}

body.daylight .settings-section {
  background: rgba(255, 255, 255, 0.78);
}

.warehouse-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.color-swatch-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: var(--cc-radius);
}

.signature-box {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed var(--cc-line-strong);
  border-radius: var(--cc-radius);
  color: var(--cc-muted);
  background: rgba(0, 18, 60, 0.45);
}

.quote-sign-dialog .confirm-dialog-content {
  gap: 10px;
}

.quote-sign-dialog {
  grid-template-columns: minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--cc-success) 66%, var(--cc-line));
}

.quote-sign-dialog .confirm-dialog-actions {
  grid-column: 1;
}

.quote-progress-dialog {
  width: min(620px, 100%);
  grid-template-columns: minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
}

.quote-progress-dialog .confirm-dialog-content {
  grid-column: 1;
  min-width: 0;
}

.quote-progress-dialog h2 {
  overflow-wrap: normal;
}

.quote-progress-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
}

.confirm-dialog.contact-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
}

.contact-dialog .contact-dialog-content {
  grid-column: 1;
  min-width: 0;
  padding: 22px 24px 24px;
  overflow: auto;
}

.confirm-dialog.contact-dialog h2 {
  max-width: 100%;
  margin: 0;
  color: var(--cc-text);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.22;
}

.confirm-dialog.contact-dialog p {
  max-width: 520px;
  margin: 8px 0 0;
  color: var(--cc-muted);
  line-height: 1.45;
}

.contact-dialog .confirm-dialog-actions {
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.contact-dialog .confirm-dialog-actions .btn {
  flex: 0 0 auto;
  min-width: 118px;
  min-height: 38px;
}

.invoice-payment-dialog {
  width: min(420px, 100%);
  border-color: color-mix(in srgb, var(--cc-accent) 45%, var(--cc-line));
}

.contact-dialog-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 18px;
}

.contact-dialog-form .field {
  min-width: 0;
}

.contact-dialog-form .label {
  white-space: nowrap;
}

.contact-dialog-form .input,
.contact-dialog-form .textarea {
  width: 100%;
  min-width: 0;
}

.contact-dialog-form .wide {
  grid-column: 1 / -1;
}

.contact-dialog-form textarea.input {
  min-height: 96px;
  resize: vertical;
}

.contact-primary-field {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 42%, var(--cc-panel));
}

.quote-progress-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.quote-progress-stack {
  display: grid;
  gap: 10px;
}

.quote-progress-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 74%, transparent);
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-panel-deep) 36%, var(--cc-panel));
}

.quote-progress-row span,
.quote-progress-timeline span {
  color: var(--cc-muted);
}

.quote-progress-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.quote-progress-email,
.quote-signed-document {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 38%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-accent) 8%, var(--cc-panel));
}

.quote-progress-email pre {
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  color: var(--cc-muted);
  font-family: var(--cc-font);
  line-height: 1.35;
}

.quote-progress-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cc-warning) 38%, var(--cc-line));
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-warning) 10%, var(--cc-panel));
  color: var(--cc-muted);
  line-height: 1.35;
}

body.daylight .quote-progress-note {
  border-color: color-mix(in srgb, var(--cc-warning) 44%, #c8d5e3);
  background: color-mix(in srgb, var(--cc-warning) 9%, #f7fafc);
}

.quote-progress-timeline {
  display: grid;
  gap: 10px;
}

.quote-progress-timeline > div {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--cc-accent);
  border-radius: var(--cc-radius);
  background: color-mix(in srgb, var(--cc-accent) 8%, var(--cc-panel));
}

.quote-scribble-field {
  min-height: 82px;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 1.35rem;
}

.quote-sign-checkbox {
  margin-top: 2px;
}

.btn.is-shaking {
  animation: quote-sign-shake 0.22s ease;
}

@keyframes quote-sign-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(-3px);
  }

  70% {
    transform: translateX(3px);
  }
}

.wizard-dialog-backdrop {
  z-index: 92;
}

.wizard-dialog {
  width: min(1360px, calc(100vw - 24px));
  height: min(860px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: #f7f8fa;
  color: var(--cc-text);
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.46);
  overflow: hidden;
}

.wizard-dialog-header,
.wizard-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--cc-line);
  background: #1f242c;
  color: #ffffff;
}

.wizard-dialog-actions {
  min-height: 62px;
  border-top: 1px solid var(--cc-line);
  border-bottom: 0;
  background: #ffffff;
  color: #20242a;
}

.wizard-dialog-header h2 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.wizard-stepper span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}

.wizard-stepper strong {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.7rem;
}

.wizard-stepper .is-active strong {
  background: #0f6ee8;
}

.wizard-stepper i {
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.wizard-dialog-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.wizard-toolbox,
.wizard-canvas-panel {
  min-height: 0;
  border: 0;
  border-right: 1px solid #d7dce3;
  border-radius: 0;
  background: #ffffff;
  color: #20242a;
}

.wizard-toolbox {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  overflow: auto;
}

.wizard-toolbox h3,
.wizard-summary h3 {
  margin: 0;
  color: #20242a;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.wizard-tool-section {
  display: grid;
  gap: 8px;
}

.wizard-preset-list {
  display: grid;
  gap: 8px;
}

.wizard-preset {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #d9dee6;
  border-radius: var(--cc-radius);
  background: #ffffff;
  color: #20242a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wizard-preset strong {
  font-size: 0.76rem;
  font-weight: 700;
}

.wizard-preset span {
  color: #66707c;
  font-size: 0.68rem;
  line-height: 1.25;
}

.wizard-preset:is(:hover, .is-active) {
  border-color: #0f6ee8;
  background: #eef5ff;
}

.wizard-preset.is-active span {
  color: #355f92;
}

.wizard-tool,
.wizard-item-tool {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #d9dee6;
  border-radius: var(--cc-radius);
  background: linear-gradient(#ffffff, #f7f8fa);
  color: #20242a;
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
}

.wizard-tool:is(:hover, .is-active),
.wizard-item-tool:is(:hover, .is-active) {
  border-color: #0f6ee8;
  background: #eef5ff;
}

.wizard-tool-icon {
  display: inline-grid;
  width: 34px;
  height: 24px;
  place-items: center;
  color: #176c25;
  font-weight: 700;
}

.wizard-tool-icon.truss {
  color: #111827;
}

.wizard-tool-icon.pipe {
  color: #515861;
}

.wizard-tool-icon.floor,
.wizard-tool-icon.wood {
  color: #b7822f;
}

.wizard-item-tool span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.68rem;
}

.wizard-canvas-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid #d7dce3;
  background: #fbfcfd;
  overflow: hidden;
}

.wizard-canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 64px;
  padding: 10px 24px;
  border-bottom: 1px solid #dde2e9;
  background: #ffffff;
  color: #20242a;
  font-size: 0.74rem;
}

.wizard-toolbar-group,
.wizard-toolbar-select,
.wizard-toolbar-icons,
.wizard-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wizard-toolbar-group button,
.wizard-zoom-control button {
  min-width: 44px;
  min-height: 30px;
  border: 1px solid #cad1db;
  background: #ffffff;
  color: #20242a;
  font: inherit;
  cursor: pointer;
}

.wizard-toolbar-group button.is-active {
  border-color: #0f6ee8;
  background: #0f6ee8;
  color: #ffffff;
}

.wizard-toolbar-select .input {
  min-height: 30px;
  padding: 4px 26px 4px 10px;
  color: #20242a;
  background: #ffffff;
}

.wizard-zoom-control {
  gap: 0;
  margin-left: auto;
}

.wizard-zoom-control span {
  display: inline-grid;
  min-width: 54px;
  min-height: 30px;
  place-items: center;
  border-block: 1px solid #cad1db;
  color: #20242a;
}

.wizard-grid-wrap {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 22px;
}

.wizard-grid {
  --wizard-cell: 32px;
  position: relative;
  width: calc(var(--wizard-cell) * 18);
  height: calc(var(--wizard-cell) * 14);
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 45%, var(--cc-line));
  border-radius: 0;
  background:
    linear-gradient(#dfe4ea 1px, transparent 1px),
    linear-gradient(90deg, #dfe4ea 1px, transparent 1px),
    #ffffff;
  background-size: var(--wizard-cell) var(--wizard-cell);
}

.wizard-grid-tip {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid #dde2e9;
  color: #6b7280;
  background: #ffffff;
  font-size: 0.72rem;
}

.wizard-node {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 70%, var(--cc-line));
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  cursor: crosshair;
}

.wizard-node:hover,
.wizard-node.is-active {
  border-color: var(--cc-accent);
  background: var(--cc-accent);
}

.wizard-line {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.wizard-line.truss {
  background: #111827;
}

.wizard-line.pipe {
  background: #737b85;
}

.wizard-line.horizontal {
  height: 5px;
  transform: translateY(-50%);
}

.wizard-line.vertical {
  width: 5px;
  transform: translateX(-50%);
}

.wizard-line.is-preview {
  opacity: 0.42;
}

.wizard-marker {
  position: absolute;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.wizard-marker.sensor {
  color: #1faa49;
}

.wizard-marker.camera {
  color: #7758d8;
}

.wizard-marker.lidar {
  color: #1679d6;
}

.wizard-marker.led {
  color: #e02d7f;
}

.wizard-marker.box {
  color: #f28a18;
}

.wizard-marker.power {
  color: #f2c400;
}

.wizard-marker.wan {
  color: #0f91e8;
}

.wizard-marker.lte {
  color: #1faa49;
}

.wizard-toolbox-right {
  border-right: 0;
}

.wizard-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #d7dce3;
}

.wizard-side-tabs button {
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #606872;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.wizard-side-tabs button.is-active {
  border-color: #0f6ee8;
  color: #0f6ee8;
  font-weight: 700;
}

.wizard-summary {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}

.wizard-material-table {
  width: 100%;
  border-collapse: collapse;
  color: #20242a;
  font-size: 0.68rem;
}

.wizard-material-table th,
.wizard-material-table td {
  padding: 5px 4px;
  border-bottom: 1px solid #dce2e9;
  text-align: left;
}

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

.wizard-iso-preview {
  display: grid;
  min-height: 156px;
  place-items: center;
  margin-top: auto;
  border: 1px solid #d7dce3;
  border-radius: var(--cc-radius);
  color: #606872;
  background:
    linear-gradient(145deg, rgba(15, 110, 232, 0.08), transparent 45%),
    linear-gradient(35deg, rgba(31, 170, 73, 0.12), transparent 55%),
    #ffffff;
  font-size: 0.72rem;
}

.availability-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 10, 32, 0.68);
}

.availability-dialog-backdrop[hidden] {
  display: none;
}

.availability-dialog {
  width: min(1040px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid var(--cc-line-strong);
  border-radius: 8px;
  background: var(--cc-panel);
  box-shadow: 0 28px 80px rgba(0, 10, 32, 0.54);
  overflow: hidden;
}

.availability-dialog-header,
.availability-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cc-line);
}

.availability-dialog-actions {
  justify-content: flex-start;
  border-top: 1px solid var(--cc-line);
  border-bottom: 0;
}

.availability-dialog h2,
.availability-dialog h3 {
  margin: 0;
  color: var(--cc-text);
  font-weight: 400;
}

.availability-dialog h2 {
  font-size: 1.25rem;
}

.availability-dialog h3 {
  font-size: 1rem;
}

.availability-dialog-header p {
  margin: 4px 0 0;
  color: var(--cc-muted);
}

.availability-dialog-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px;
  background: var(--cc-panel);
}

.availability-dialog-summary > div {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-large);
  background: color-mix(in srgb, var(--cc-line-strong) 7%, var(--cc-panel));
}

.availability-dialog-summary strong {
  color: var(--cc-accent);
  font-size: 1.35rem;
  font-weight: 400;
  transition: color 160ms ease, transform 160ms ease;
}

.availability-dialog-summary strong.is-negative {
  color: var(--cc-danger);
}

.availability-dialog-summary strong.is-positive {
  color: var(--cc-success);
}

.availability-dialog-summary strong.is-neutral {
  color: var(--cc-warning);
}

.availability-dialog-summary strong.is-updating {
  transform: translateY(-1px);
}

.availability-dialog-summary .badge {
  justify-self: start;
  min-width: 120px;
  justify-content: center;
}

.availability-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 18px;
  overflow: auto;
}

.availability-gantt {
  --availability-surface: var(--cc-panel);
  --availability-weekend-bg: color-mix(in srgb, var(--cc-accent) 8%, transparent);
  --availability-grid-line: var(--cc-line);
  display: grid;
  align-content: start;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 0.82rem;
}

.availability-gantt-head,
.availability-gantt-row {
  display: grid;
  grid-template-columns: 280px minmax(720px, 1fr);
  gap: 0;
  align-items: stretch;
  min-width: 1000px;
}

.availability-gantt-head {
  grid-template-columns: 280px repeat(4, minmax(180px, 1fr));
  color: var(--cc-accent);
  background: var(--cc-panel-deep);
}

.availability-gantt-head span,
.availability-project,
.availability-timeline {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cc-line);
}

.availability-gantt-head span:not(:first-child) {
  text-align: center;
}

.availability-gantt-head span.is-weekend {
  background: var(--availability-weekend-bg);
}

.availability-gantt-head span {
  padding-top: 8px;
  padding-bottom: 8px;
}

.availability-project {
  display: grid;
  gap: 2px;
  align-content: center;
}

.availability-project strong {
  color: var(--cc-text);
  font-size: 0.92rem;
  font-weight: 400;
}

.availability-project span {
  color: var(--cc-muted);
  font-size: 0.78rem;
}

.availability-hire-project {
  gap: 8px;
}

.availability-hire-project .field {
  margin: 0;
}

.availability-supplier-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  color: var(--cc-text);
  background: var(--cc-panel-deep);
  white-space: nowrap;
}

.availability-timeline {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  background-color: var(--cc-panel);
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), var(--cc-line) calc(25% - 1px), var(--cc-line) 25%, transparent 25%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--cc-line) calc(50% - 1px), var(--cc-line) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(75% - 1px), var(--cc-line) calc(75% - 1px), var(--cc-line) 75%, transparent 75%);
}

.availability-bar {
  --availability-bar-edge-color: color-mix(in srgb, var(--cc-accent) 72%, var(--cc-line));
  position: absolute;
  left: var(--start);
  top: 50%;
  width: var(--width);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 72%, var(--cc-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-accent) 26%, var(--cc-panel-deep));
  color: var(--cc-text);
  font: inherit;
  cursor: default;
  touch-action: none;
  user-select: none;
}

.availability-bar.is-clipped-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.availability-bar.is-clipped-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.availability-bar.is-clipped-start::before,
.availability-bar.is-clipped-end::after {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 100%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--availability-bar-edge-color);
  font-family: "Font Awesome 7 Pro";
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

.availability-bar.is-clipped-start::before {
  content: "\f104";
  left: 6px;
}

.availability-bar.is-clipped-end::after {
  content: "\f105";
  right: 6px;
}

.availability-bar.current,
.availability-bar.is-available {
  --availability-bar-edge-color: color-mix(in srgb, var(--cc-success) 72%, var(--cc-line));
  border-color: color-mix(in srgb, var(--cc-success) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-success) 18%, var(--cc-panel-deep));
}

.availability-bar.other {
  --availability-bar-edge-color: color-mix(in srgb, var(--cc-warning) 72%, var(--cc-line));
  border-color: color-mix(in srgb, var(--cc-warning) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-warning) 20%, var(--cc-panel-deep));
}

.availability-bar.is-warning {
  --availability-bar-edge-color: color-mix(in srgb, var(--cc-warning) 72%, var(--cc-line));
  border-color: color-mix(in srgb, var(--cc-warning) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-warning) 20%, var(--cc-panel-deep));
}

.availability-bar.is-shortage,
.availability-bar.is-defect {
  --availability-bar-edge-color: color-mix(in srgb, var(--cc-danger) 66%, var(--cc-line));
  border-color: color-mix(in srgb, var(--cc-danger) 66%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-danger) 24%, var(--cc-panel-deep));
}

.availability-bar.hire {
  --availability-bar-edge-color: color-mix(in srgb, var(--cc-success) 72%, var(--cc-line));
  border-color: color-mix(in srgb, var(--cc-success) 72%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-success) 18%, var(--cc-panel-deep));
  cursor: grab;
}

.catalog-availability-gantt .availability-bar {
  cursor: pointer;
}

.availability-bar.hire.is-dragging {
  cursor: grabbing;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-success) 24%, transparent);
}

.availability-bar.hire.is-outside-active-range {
  border-color: color-mix(in srgb, var(--cc-muted) 60%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-muted) 16%, var(--cc-panel-deep));
  color: var(--cc-muted);
}

.availability-bar-step {
  position: static;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transform: none;
  border: 1px solid color-mix(in srgb, currentColor 38%, var(--cc-line));
  border-radius: 6px;
  font-size: 0.7rem;
  line-height: 1;
  color: inherit;
  background: color-mix(in srgb, var(--cc-bg) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent);
  cursor: pointer;
  padding: 0;
}

.availability-bar-step i {
  display: block;
  line-height: 1;
}

.availability-bar-step:hover {
  border-color: color-mix(in srgb, currentColor 72%, var(--cc-line));
  background: color-mix(in srgb, currentColor 16%, var(--cc-panel));
}

.availability-bar :is([data-availability-bar-label], [data-catalog-bar-label]) {
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.availability-bar-handle {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cc-success) 70%, var(--cc-panel));
  opacity: 0.85;
}

.availability-bar-handle.start {
  left: 5px;
  cursor: ew-resize;
}

.availability-bar-handle.end {
  right: 5px;
  cursor: ew-resize;
}

.availability-bar-input {
  display: none;
  width: 64px;
  height: 26px;
  border: 1px solid var(--cc-accent);
  border-radius: 6px;
  background: var(--cc-panel-deep);
  color: var(--cc-text);
  text-align: center;
  font: inherit;
}

.availability-bar.is-editing {
  z-index: 2;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 20%, transparent);
}

.availability-bar.is-editing [data-availability-bar-label] {
  display: none;
}

.availability-bar.is-editing .availability-bar-input {
  display: block;
}

.availability-resolver {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: var(--cc-panel-soft);
}

.availability-resolver p {
  margin: 0;
}

.availability-save-note {
  padding: 10px 12px;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  color: var(--cc-muted);
  background: var(--cc-panel-deep);
}

.availability-save-note.is-saved {
  border-color: color-mix(in srgb, var(--cc-success) 60%, var(--cc-line));
  color: var(--cc-success);
}

.availability-trigger {
  cursor: pointer;
}

.availability-trigger:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

body.daylight .availability-dialog-backdrop {
  background: rgba(17, 34, 58, 0.30);
}

body.daylight .availability-dialog {
  background: #fff;
  border-color: #b8c7d8;
  box-shadow: 0 28px 80px rgba(42, 63, 90, 0.24);
}

body.daylight .availability-dialog-header,
body.daylight .availability-dialog-actions {
  border-color: #b8c7d8;
  background: #ffffff;
}

body.daylight .availability-dialog-summary > div,
body.daylight .availability-resolver {
  border-color: #b8c7d8;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(12, 35, 72, 0.06);
}

body.daylight .availability-dialog-summary {
  background: #fff;
}

body.daylight .availability-dialog-summary strong {
  color: var(--cc-accent);
}

body.daylight .availability-dialog-summary strong.is-negative {
  color: var(--cc-danger);
}

body.daylight .availability-dialog-summary strong.is-positive {
  color: var(--cc-success);
}

body.daylight .availability-dialog-summary strong.is-neutral {
  color: var(--cc-warning);
}

body.daylight .availability-gantt {
  --availability-surface: #fbfdff;
  --availability-grid-line: rgba(102, 126, 156, 0.24);
  --availability-weekend-bg: rgba(84, 121, 160, 0.09);
  border-color: #c8d5e3;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 10px 26px rgba(12, 35, 72, 0.08);
}

body.daylight .availability-gantt-head {
  color: #0986be;
  background: linear-gradient(180deg, #f2f7fc, #eaf2fa);
}

body.daylight .availability-gantt-head,
body.daylight .availability-gantt-head span,
body.daylight .availability-project,
body.daylight .availability-timeline {
  border-color: #d4dfeb;
}

body.daylight .availability-gantt-head span {
  color: #0c8ec9;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.daylight .availability-gantt-head span:first-child {
  color: #0986be;
}

body.daylight .availability-gantt-head span:not(:first-child) {
  color: #0b84bd;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

body.daylight .availability-gantt-row {
  background: #ffffff;
}

body.daylight .availability-gantt-row:nth-child(even) {
  background: #fbfdff;
}

body.daylight .availability-project strong {
  color: #0b1836;
  font-weight: 400;
}

body.daylight .availability-project span {
  color: var(--cc-muted);
}

body.daylight .availability-timeline {
  background-color: #fbfdff;
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), var(--availability-grid-line) calc(25% - 1px), var(--availability-grid-line) 25%, transparent 25%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--availability-grid-line) calc(50% - 1px), var(--availability-grid-line) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(75% - 1px), var(--availability-grid-line) calc(75% - 1px), var(--availability-grid-line) 75%, transparent 75%),
    linear-gradient(180deg, #ffffff, #f8fbff);
}

body.daylight .availability-bar {
  --availability-bar-edge-color: rgba(0, 122, 204, 0.48);
  border-color: rgba(0, 122, 204, 0.48);
  background: rgba(223, 243, 255, 0.78);
  color: #071832;
  box-shadow: 0 4px 10px rgba(12, 35, 72, 0.10);
}

body.daylight .availability-bar.current,
body.daylight .availability-bar.is-available {
  --availability-bar-edge-color: rgba(40, 167, 69, 0.72);
  border-color: rgba(40, 167, 69, 0.58);
  background: rgba(227, 247, 234, 0.82);
  color: #071832;
}

body.daylight .availability-bar.other {
  --availability-bar-edge-color: rgba(188, 133, 0, 0.72);
  border-color: rgba(188, 133, 0, 0.58);
  background: rgba(255, 247, 224, 0.88);
  color: #071832;
}

body.daylight .availability-bar.is-warning {
  --availability-bar-edge-color: rgba(188, 133, 0, 0.72);
  border-color: rgba(188, 133, 0, 0.58);
  background: rgba(255, 247, 224, 0.88);
  color: #071832;
}

body.daylight .availability-bar.is-shortage,
body.daylight .availability-bar.is-defect {
  --availability-bar-edge-color: rgba(176, 0, 22, 0.72);
  border-color: rgba(176, 0, 22, 0.58);
  background: rgba(255, 232, 236, 0.88);
  color: #071832;
}

body.daylight .availability-bar.hire {
  --availability-bar-edge-color: rgba(40, 167, 69, 0.72);
  border-color: rgba(40, 167, 69, 0.58);
  background: rgba(227, 247, 234, 0.82);
  color: #071832;
}

body.daylight .availability-bar.hire.is-outside-active-range {
  border-color: #9fb2c8;
  background: #edf2f7;
  color: var(--cc-muted);
}

body.daylight .availability-bar-step {
  border-color: rgba(82, 103, 132, 0.42);
  background: rgba(255, 255, 255, 0.76);
  color: #253852;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.66),
    0 2px 5px rgba(12, 35, 72, 0.10);
}

body.daylight .availability-bar-step:hover {
  border-color: rgba(0, 122, 204, 0.58);
  background: #ffffff;
  color: #007acc;
}

body.daylight .availability-bar :is([data-availability-bar-label], [data-catalog-bar-label]) {
  color: #071832;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.daylight .availability-bar.is-clipped-start::before,
body.daylight .availability-bar.is-clipped-end::after {
  background: transparent;
  box-shadow: none;
}

body.daylight .catalog-availability-gantt {
  background: #ffffff;
}

body.daylight .catalog-availability-gantt .availability-gantt-head span,
body.daylight .catalog-availability-gantt .availability-project,
body.daylight .catalog-availability-gantt .availability-timeline {
  min-height: 34px;
}

body.daylight .catalog-availability-gantt .availability-gantt-head span:not(:first-child) {
  display: grid;
  place-items: center;
  color: #0986be;
  font-size: 0.82rem;
  line-height: 1;
}

body.daylight .catalog-availability-gantt .availability-project {
  background: rgba(255, 255, 255, 0.72);
}

body.daylight .catalog-availability-gantt .availability-bar {
  min-height: 22px;
  border-radius: 999px;
}

body.daylight .catalog-availability-gantt .availability-bar-step {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

body.daylight .catalog-timeline-six {
  background:
    linear-gradient(90deg, transparent calc(16.666% - 1px), var(--availability-grid-line) calc(16.666% - 1px), var(--availability-grid-line) 16.666%, transparent 16.666%),
    linear-gradient(90deg, transparent calc(33.333% - 1px), var(--availability-grid-line) calc(33.333% - 1px), var(--availability-grid-line) 33.333%, transparent 33.333%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--availability-grid-line) calc(50% - 1px), var(--availability-grid-line) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(66.666% - 1px), var(--availability-grid-line) calc(66.666% - 1px), var(--availability-grid-line) 66.666%, transparent 66.666%),
    linear-gradient(90deg, transparent calc(83.333% - 1px), var(--availability-grid-line) calc(83.333% - 1px), var(--availability-grid-line) 83.333%, transparent 83.333%),
    linear-gradient(180deg, #ffffff, #f8fbff);
}

body.daylight .availability-bar-input {
  border-color: var(--cc-accent);
  background: #ffffff;
  color: var(--cc-text);
}

body.daylight .availability-supplier-tag,
body.daylight .availability-save-note {
  border-color: #b8c7d8;
  background: #ffffff;
  color: var(--cc-text);
}

body.daylight .availability-save-note.is-saved {
  border-color: var(--cc-success);
  color: var(--cc-success);
  background: #f2fff6;
}

.confirm-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 10, 32, 0.64);
}

.confirm-dialog-backdrop[hidden] {
  display: none;
}

[data-settings-option-dialog] {
  z-index: 90;
}

.confirm-dialog {
  width: min(440px, 100%);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cc-danger) 40%, var(--cc-line));
  border-radius: 8px;
  background: var(--cc-panel);
  box-shadow: 0 24px 60px rgba(0, 10, 32, 0.44);
}

.catalog-resolver-dialog {
  width: min(980px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-accent) 42%, var(--cc-line));
}

.catalog-resolver-content {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.catalog-resolver-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.catalog-resolver-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 18px;
  min-width: 0;
}

.catalog-resolver-dialog h2 {
  margin: 0;
  color: var(--cc-text);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.25;
}

.catalog-resolver-period-fields {
  display: flex;
  align-items: end;
  gap: 14px;
}

.catalog-resolver-period-fields .field {
  display: grid;
  grid-template-columns: auto 132px;
  align-items: center;
  gap: 8px;
}

.catalog-resolver-period-fields .label {
  font-size: 0.68rem;
  line-height: 1;
}

.catalog-resolver-period-fields .input {
  width: 132px;
  min-height: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 0.72rem;
}

.catalog-resolver-dialog p {
  margin: 6px 0 0;
  color: var(--cc-muted);
  line-height: 1.4;
}

.catalog-resolver-type-summary {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  font-size: 0.84rem;
}

.catalog-resolver-table-wrap {
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  overflow: auto;
  background: var(--cc-panel-deep);
}

.catalog-resolver-table {
  --resolver-context-width: 76%;
  --resolver-group-share: 44%;
  --resolver-material-share: 56%;
  --resolver-count-width: 9%;
  --resolver-free-width: 7.5%;
  --resolver-action-width: 7.5%;
  width: 100%;
  table-layout: fixed;
  min-width: 760px;
  font-size: 0.76rem;
}

.catalog-resolver-context-col {
  width: var(--resolver-context-width);
}

.catalog-resolver-count-col {
  width: var(--resolver-count-width);
}

.catalog-resolver-free-col {
  width: var(--resolver-free-width);
}

.catalog-resolver-action-col {
  width: var(--resolver-action-width);
}

.catalog-resolver-table th,
.catalog-resolver-table td {
  padding: 6px 8px;
}

.catalog-resolver-table th {
  font-size: 0.68rem;
}

.catalog-resolver-table th:nth-child(1),
.catalog-resolver-table td:nth-child(1) {
  width: var(--resolver-context-width);
}

.catalog-resolver-table th:nth-child(2),
.catalog-resolver-table td:nth-child(2) {
  width: var(--resolver-count-width);
  text-align: center;
}

.catalog-resolver-table th:nth-child(3),
.catalog-resolver-table td:nth-child(3) {
  width: var(--resolver-free-width);
  text-align: center;
}

.catalog-resolver-table th:nth-child(4),
.catalog-resolver-table td:nth-child(4) {
  width: var(--resolver-action-width);
  text-align: center;
}

.catalog-resolver-table .catalog-resolver-project-row td {
  padding: 7px 8px 6px;
  border-top: 1px solid color-mix(in srgb, var(--cc-line-strong) 54%, var(--cc-line));
  border-bottom-color: color-mix(in srgb, var(--cc-line-strong) 54%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-line-strong) 16%, var(--cc-panel));
  color: var(--cc-text);
  vertical-align: bottom;
}

.catalog-resolver-table .catalog-resolver-project-row td:first-child {
  text-align: left;
}

.catalog-resolver-table .catalog-resolver-project-row td:not(:first-child) {
  text-align: center;
}

.catalog-resolver-project-heading {
  display: grid;
  gap: 6px;
}

.catalog-resolver-project-heading strong {
  color: var(--cc-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
}

.catalog-resolver-project-row small {
  color: var(--cc-accent);
  font-size: 0.58rem;
  font-weight: 400;
  line-height: 1;
}

.catalog-resolver-label-context,
.catalog-resolver-line-context {
  display: grid;
  grid-template-columns: minmax(0, var(--resolver-group-share)) minmax(0, var(--resolver-material-share));
  column-gap: 0;
  align-items: center;
  min-width: 0;
}

.catalog-resolver-label-context small:nth-child(2),
.catalog-resolver-line-context span:nth-child(2) {
  padding-left: 14px;
}

.catalog-resolver-line-context span {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--cc-text);
  font-size: 0.78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-resolver-line-context span:first-child {
  padding-left: 16px;
}

.catalog-resolver-table td:nth-child(4) .small-action {
  display: inline-grid;
  place-items: center;
  color: var(--cc-accent);
}

.catalog-resolver-table td:nth-child(4) .small-action i {
  display: inline-block;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1;
}

.catalog-resolver-table .count-input {
  width: 48px;
  min-height: 28px;
  margin-inline: auto;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 0.76rem;
  text-align: center;
}

.catalog-resolver-dialog input[type="number"],
.catalog-resolver-dialog .count-input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.catalog-resolver-table .material-type-icon {
  width: 28px;
  height: 28px;
  margin-inline: auto;
  font-size: 0.74rem;
}

.catalog-resolver-table .badge {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.64rem;
}

.catalog-resolver-hire-title {
  margin: 0 0 -4px;
  color: var(--cc-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
}

.catalog-resolver-hire {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 36%, transparent);
}

.catalog-resolver-hire-fields {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(200px, 1fr) 126px 126px 96px 42px;
  column-gap: 16px;
  row-gap: 10px;
  align-items: end;
}

.catalog-resolver-hire .field {
  gap: 5px;
}

.catalog-resolver-hire .label {
  font-size: 0.68rem;
}

.supplier-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: end;
}

.supplier-create-row .small-action {
  width: 36px;
  height: 36px;
}

.catalog-resolver-hire .input,
.catalog-resolver-hire .btn,
.catalog-resolver-order-button,
.readonly-material-value {
  width: 100%;
  min-height: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 0.76rem;
}

.catalog-resolver-hire .btn,
.catalog-resolver-order-button {
  justify-content: center;
  margin: 0;
}

.catalog-resolver-order-button {
  align-self: end;
  width: 42px;
  min-width: 42px;
  height: 36px;
  border-color: color-mix(in srgb, var(--cc-accent) 58%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep));
  color: var(--cc-accent);
}

.readonly-material-value {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 72%, transparent);
  background: color-mix(in srgb, var(--cc-panel-deep) 46%, transparent);
  color: var(--cc-text);
}

.catalog-resolver-hire .count-input {
  max-width: none;
  padding-inline: 6px;
  text-align: center;
}

@media (max-width: 980px) {
  .catalog-resolver-hire-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-resolver-hire .btn {
    grid-column: 1 / -1;
  }
}

.catalog-resolver-hire-list {
  display: grid;
  gap: 6px;
}

.catalog-resolver-hire-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--cc-success) 42%, var(--cc-line));
  border-radius: 6px;
  color: var(--cc-muted);
  font-size: 0.74rem;
}

.catalog-resolver-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.catalog-resolver-dialog .confirm-dialog-actions .btn {
  flex: 0 0 auto;
  min-height: 38px;
}

.catalog-resolver-dialog [data-catalog-resolver-cancel] {
  margin-right: auto;
}

.material-defect-dialog {
  width: min(760px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.material-defect-dialog .confirm-dialog-content {
  min-width: 0;
  padding: 22px;
}

.material-defect-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.material-defect-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cc-danger) 42%, var(--cc-line));
  border-radius: var(--cc-radius);
  color: #ff7b9c;
  background: color-mix(in srgb, var(--cc-danger) 12%, var(--cc-panel-deep));
}

.material-defect-dialog h2 {
  margin: 0;
  color: var(--cc-text);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.25;
}

.material-defect-dialog p {
  max-width: 420px;
  margin: 8px 0 0;
  color: var(--cc-muted);
  line-height: 1.45;
}

.material-defect-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.material-defect-form .input,
.material-defect-form .textarea {
  width: 100%;
}

.material-defect-form .relation-combobox {
  width: 100%;
}

.material-defect-form .wide {
  grid-column: 1 / -1;
}

.material-defect-form .textarea {
  min-height: 118px;
  resize: vertical;
}

.material-defect-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.material-defect-dialog .confirm-dialog-actions .btn {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 38px;
}

.material-instances-layout {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.material-instance-settings {
  padding-bottom: 2px;
}

.material-instance-settings .compact-form-grid {
  max-width: 620px;
}

.material-instance-table-panel {
  min-height: 0;
}

.material-instance-table-panel .table-wrap {
  min-height: 0;
}

.material-instances-table {
  min-width: 760px;
}

.material-instances-table th:nth-child(1),
.material-instances-table td:nth-child(1) {
  width: 28%;
}

.material-instances-table th:nth-child(2),
.material-instances-table td:nth-child(2) {
  width: 22%;
}

.material-instances-table th:nth-child(3),
.material-instances-table td:nth-child(3),
.material-instances-table th:nth-child(4),
.material-instances-table td:nth-child(4) {
  width: 18%;
}

.material-instances-table th:nth-child(5),
.material-instances-table td:nth-child(5) {
  width: 14%;
  text-align: right;
}

.material-instances-table td:nth-child(5) .table-actions {
  justify-content: flex-end;
}

.material-instance-dialog {
  width: min(760px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-accent) 42%, var(--cc-line));
}

.material-instance-dialog .confirm-dialog-content {
  min-width: 0;
  padding: 22px;
}

.material-instance-dialog-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.material-instance-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 48%, var(--cc-line));
  border-radius: var(--cc-radius);
  color: var(--cc-accent);
  background: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel-deep));
}

.material-instance-dialog h2 {
  margin: 0;
  color: var(--cc-text);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.25;
}

.material-instance-mode-switch {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 34%, transparent);
}

.material-instance-mode-switch button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cc-muted);
  font: inherit;
  cursor: pointer;
}

.material-instance-mode-switch button.is-active {
  background: color-mix(in srgb, var(--cc-accent) 18%, var(--cc-panel));
  color: var(--cc-text);
}

.material-instance-mode-switch button:disabled,
.material-count-mode-switch button:disabled {
  cursor: not-allowed;
  color: var(--cc-subtle);
  opacity: 0.55;
}

.material-instance-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px minmax(120px, 0.75fr) minmax(120px, 0.75fr);
  gap: 14px 18px;
}

.material-instance-form .input {
  width: 100%;
}

.material-instance-preview {
  display: grid;
  gap: 6px;
  max-height: 172px;
  margin-top: 16px;
  padding: 10px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--cc-line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 36%, transparent);
}

.material-instance-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.65fr);
  gap: 12px;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--cc-success) 38%, var(--cc-line));
  border-radius: 6px;
}

.material-instance-preview-row strong,
.material-instance-preview-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-instance-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.material-instance-dialog .confirm-dialog-actions .btn {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 38px;
}

.material-bulk-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

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

.material-bulk-summary > div {
  display: grid;
  gap: 5px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 74%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 34%, transparent);
}

.material-bulk-summary strong {
  color: var(--cc-text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.material-bulk-table-panel {
  min-height: 0;
}

.material-bulk-table-panel .table-wrap {
  min-height: 0;
}

.material-bulk-table {
  min-width: 880px;
}

.material-bulk-table th:nth-child(1),
.material-bulk-table td:nth-child(1) {
  width: 16%;
}

.material-bulk-table th:nth-child(2),
.material-bulk-table td:nth-child(2) {
  width: 10%;
}

.material-bulk-table th:nth-child(3),
.material-bulk-table td:nth-child(3),
.material-bulk-table th:nth-child(4),
.material-bulk-table td:nth-child(4) {
  width: 14%;
}

.material-bulk-table th:nth-child(5),
.material-bulk-table td:nth-child(5) {
  width: 34%;
}

.material-bulk-table th:nth-child(6),
.material-bulk-table td:nth-child(6) {
  width: 12%;
  text-align: right;
}

.material-bulk-table td:nth-child(6) .table-actions {
  justify-content: flex-end;
}

.material-bulk-dialog {
  width: min(720px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-accent) 42%, var(--cc-line));
}

.material-bulk-dialog .confirm-dialog-content {
  min-width: 0;
  padding: 22px;
}

.material-bulk-form {
  grid-template-columns: minmax(0, 1fr) 120px 150px minmax(140px, 0.8fr);
  gap: 14px 18px;
}

.material-bulk-form .wide {
  grid-column: 1 / -1;
}

.material-bulk-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.material-bulk-dialog .confirm-dialog-actions .btn {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 38px;
}

.material-counts-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.material-counts-table {
  min-width: 940px;
}

.material-counts-table th:nth-child(1),
.material-counts-table td:nth-child(1) {
  width: 16%;
}

.material-counts-table th:nth-child(2),
.material-counts-table td:nth-child(2),
.material-counts-table th:nth-child(3),
.material-counts-table td:nth-child(3),
.material-counts-table th:nth-child(4),
.material-counts-table td:nth-child(4),
.material-counts-table th:nth-child(5),
.material-counts-table td:nth-child(5) {
  width: 10%;
}

.material-counts-table th:nth-child(6),
.material-counts-table td:nth-child(6),
.material-counts-table th:nth-child(7),
.material-counts-table td:nth-child(7) {
  width: 15%;
}

.material-counts-table th:nth-child(8),
.material-counts-table td:nth-child(8),
.material-counts-table th:nth-child(9),
.material-counts-table td:nth-child(9) {
  width: 8%;
}

.material-count-dialog {
  width: min(880px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-warning) 44%, var(--cc-line));
}

.material-count-dialog .confirm-dialog-content {
  min-width: 0;
  padding: 22px;
}

.material-count-dialog-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.material-count-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cc-warning) 56%, var(--cc-line));
  border-radius: var(--cc-radius);
  color: var(--cc-warning);
  background: color-mix(in srgb, var(--cc-warning) 12%, var(--cc-panel-deep));
}

.material-count-dialog h2 {
  margin: 0;
  color: var(--cc-text);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.25;
}

.material-count-mode-switch {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 34%, transparent);
}

.material-count-mode-switch button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cc-muted);
  font: inherit;
  cursor: pointer;
}

.material-count-mode-switch button.is-active {
  background: color-mix(in srgb, var(--cc-accent) 18%, var(--cc-panel));
  color: var(--cc-text);
}

.material-count-mode-panel {
  display: grid;
  gap: 14px;
}

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

.material-count-summary > div {
  display: grid;
  gap: 5px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 74%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 34%, transparent);
}

.material-count-summary strong {
  color: var(--cc-text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.material-count-result-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  min-height: 72px;
  padding: 10px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--cc-line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-panel-deep) 36%, transparent);
}

.material-count-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--cc-line) 72%, transparent);
  border-radius: 6px;
}

.material-count-result-row strong,
.material-count-result-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-count-result-row.is-ok {
  border-color: color-mix(in srgb, var(--cc-success) 46%, var(--cc-line));
}

.material-count-result-row.is-warning {
  border-color: color-mix(in srgb, var(--cc-warning) 58%, var(--cc-line));
}

.material-count-result-row.is-danger {
  border-color: color-mix(in srgb, var(--cc-danger) 50%, var(--cc-line));
}

.material-count-result-row .scc-select {
  width: 130px;
}

.material-count-result-row .scc-select-value {
  min-height: 30px;
  padding-block: 5px;
  border-radius: 6px;
  font-size: 0.72rem;
}

.material-count-bulk-field {
  max-width: 180px;
}

.material-count-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.material-count-dialog .confirm-dialog-actions .btn {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 38px;
}

@media (max-width: 860px) {
  .material-instance-form,
  .material-bulk-form,
  .material-bulk-summary,
  .material-count-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .material-instance-form,
  .material-instance-preview-row,
  .material-bulk-form,
  .material-bulk-summary,
  .material-count-summary,
  .material-count-result-row {
    grid-template-columns: 1fr;
  }
}

body.daylight .material-defect-icon {
  border-color: #d5a1af;
  color: #a92045;
  background: #f8e7ed;
}

body.daylight .material-instance-dialog {
  border-color: #8bb8e4;
}

body.daylight .material-instance-dialog-icon {
  border-color: #8bb8e4;
  background: #e9f5fc;
}

body.daylight .catalog-resolver-dialog .confirm-dialog-actions {
  border-top-color: #c6d0dc;
  background: #f4f7fb;
}

body.daylight .catalog-resolver-table-wrap {
  border-color: #c6d0dc;
  background: #ffffff;
}

body.daylight .catalog-resolver-table .catalog-resolver-project-row td {
  border-top-color: #77a8d8;
  border-bottom-color: #b8c7d8;
  background: #dfeaf6;
  color: var(--cc-text);
}

body.daylight .material-defect-dialog .confirm-dialog-actions {
  border-top-color: #c6d0dc;
  background: #f4f7fb;
}

body.daylight .material-instance-preview {
  border-color: #c6d0dc;
  background: #ffffff;
}

body.daylight .material-instance-preview-row {
  border-color: #acd5b8;
  background: #f6fff8;
}

body.daylight .material-instance-dialog .confirm-dialog-actions {
  border-top-color: #c6d0dc;
  background: #f4f7fb;
}

body.daylight .material-bulk-summary > div {
  border-color: #c6d0dc;
  background: #ffffff;
}

body.daylight .material-bulk-dialog {
  border-color: #8bb8e4;
}

body.daylight .material-bulk-dialog .confirm-dialog-actions {
  border-top-color: #c6d0dc;
  background: #f4f7fb;
}

body.daylight .material-count-dialog {
  border-color: #d8b95d;
}

body.daylight .material-count-dialog-icon {
  border-color: #d8b95d;
  background: #fff8df;
}

body.daylight .material-instance-mode-switch,
body.daylight .material-count-mode-switch,
body.daylight .material-count-summary > div,
body.daylight .material-count-result-list {
  border-color: #c6d0dc;
  background: #ffffff;
}

body.daylight .material-instance-mode-switch button.is-active,
body.daylight .material-count-mode-switch button.is-active {
  background: #e9f5fc;
}

body.daylight .material-count-dialog .confirm-dialog-actions {
  border-top-color: #c6d0dc;
  background: #f4f7fb;
}

.confirm-dialog-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cc-danger) 54%, var(--cc-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc-danger) 12%, var(--cc-panel-deep));
  color: var(--cc-danger);
  font-size: 1.15rem;
}

.confirm-dialog-content {
  min-width: 0;
}

.confirm-dialog h2 {
  margin: 0;
  color: var(--cc-text);
  font-size: 1.05rem;
  font-weight: 400;
}

.confirm-dialog p {
  margin: 8px 0 0;
  color: var(--cc-muted);
  line-height: 1.35;
}

.confirm-dialog-actions {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.confirm-dialog-actions .btn {
  min-width: 112px;
}

.confirm-dialog.hire-dialog {
  width: min(1240px, calc(100vw - 48px));
  height: auto;
  max-height: calc(100vh - 48px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cc-accent) 48%, var(--cc-line));
}

.confirm-dialog.hire-dialog .hire-dialog-content {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 22px 24px;
  overflow: visible;
}

.confirm-dialog.hire-dialog .hire-dialog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.confirm-dialog.hire-dialog .confirm-dialog-actions {
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--cc-line);
  background: color-mix(in srgb, var(--cc-panel-deep) 44%, transparent);
}

.confirm-dialog.hire-dialog h2 {
  font-size: 1.18rem;
}

.confirm-dialog.hire-dialog p {
  max-width: 560px;
  line-height: 1.4;
}

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

  .confirm-dialog.hire-dialog {
    width: min(760px, calc(100vw - 24px));
  }

  .confirm-dialog.hire-dialog .hire-dialog-layout,
  .hire-logistics-grid {
    grid-template-columns: 1fr;
  }

  .hire-dialog-form.contact-dialog-form,
  .hire-logistics-card {
    grid-template-columns: 1fr;
  }

}

.invoice-payment-dialog,
.invoice-action-dialog,
.offer-create-dialog {
  width: min(420px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  border-color: color-mix(in srgb, var(--cc-accent) 45%, var(--cc-line));
}

.invoice-payment-dialog .field,
.offer-create-dialog .field {
  margin-top: 16px;
}

.invoice-payment-dialog .input,
.offer-create-dialog .input {
  width: 100%;
}

.invoice-payment-dialog .confirm-dialog-actions,
.invoice-action-dialog .confirm-dialog-actions,
.offer-create-dialog .confirm-dialog-actions {
  grid-column: 1;
  justify-content: flex-end;
  margin-top: 0;
}

.invoice-payment-dialog .confirm-dialog-actions .btn,
.invoice-action-dialog .confirm-dialog-actions .btn,
.offer-create-dialog .confirm-dialog-actions .btn {
  min-width: 112px;
  min-height: 40px;
}

.quote-progress-dialog {
  width: min(620px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.quote-progress-dialog .confirm-dialog-content,
.quote-progress-dialog .confirm-dialog-actions {
  grid-column: 1;
}

.quote-progress-dialog .confirm-dialog-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.quote-progress-dialog .confirm-dialog-actions .btn {
  min-width: 112px;
  min-height: 40px;
}

.quote-sign-dialog {
  width: min(520px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.quote-sign-dialog .confirm-dialog-content,
.quote-sign-dialog .confirm-dialog-actions {
  grid-column: 1;
}

.quote-sign-dialog .confirm-dialog-content {
  display: grid;
  gap: 14px;
}

.quote-sign-dialog .confirm-dialog-content h2 {
  margin-bottom: 0;
}

.quote-sign-dialog .confirm-dialog-content p {
  max-width: 38rem;
}

.quote-sign-dialog .field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.quote-sign-dialog .input,
.quote-sign-dialog .textarea {
  width: 100%;
}

.quote-sign-dialog .confirm-dialog-actions {
  justify-content: flex-end;
  margin-top: 2px;
}

.quote-sign-dialog .confirm-dialog-actions .btn {
  min-width: 128px;
  min-height: 40px;
}

.quote-sign-dialog .quote-scribble-field {
  min-height: 120px;
  resize: vertical;
}

body.daylight .confirm-dialog-backdrop {
  background: rgba(17, 34, 58, 0.28);
}

body.daylight .confirm-dialog {
  background: #fff;
  box-shadow: 0 24px 60px rgba(42, 63, 90, 0.24);
}

body.daylight .confirm-dialog h2 {
  color: var(--cc-text);
}

body.daylight .confirm-dialog p {
  color: var(--cc-text-secondary);
}

body.daylight .confirm-dialog-icon {
  background: #fff1f2;
}

body.daylight .quote-sign-dialog {
  border-color: #77b88a;
}

body.daylight .quote-progress-dialog {
  border-color: #78bfe4;
}

body.daylight .quote-progress-row,
body.daylight .quote-progress-email,
body.daylight .quote-signed-document,
body.daylight .quote-progress-timeline > div {
  border-color: #c8d5e3;
  background: #f7fafc;
}

@media (max-width: 1100px) {
  .view[data-view="dashboard"].is-active {
    grid-template-rows: auto auto minmax(260px, 1fr);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .dashboard-grid {
    overflow: visible;
  }

  .dashboard-grid .panel {
    min-height: 220px;
  }

  .project-grid,
  .dashboard-grid,
  .quote-workspace,
  .project-data-layout,
  .assignment-grid,
  .detail-grid,
  .split-layout,
  .warehouse-summary,
  .warehouse-pack-row,
  .warehouse-note-layout {
    grid-template-columns: 1fr;
  }

  .tab-picker-tools {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .tab-panel:is([data-panel="materialen"], [data-panel="material-inhoud"], [data-panel="license-inhoud"], [data-panel="licenties"], [data-panel="arbeid-transport"]) .tab-actionbar {
    grid-template-columns: 1fr;
  }

  .warehouse-stepper,
  .warehouse-row-actions {
    justify-content: flex-start;
  }

  .invoice-email-editor {
    grid-template-columns: 1fr;
  }

  .settings-two-column,
  .settings-materials-layout,
  .settings-template-layout,
  .settings-option-layout {
    grid-template-columns: 1fr;
  }

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

  .metric-strip,
  .project-meta-column,
  .document-grid,
  .license-grid,
  .warehouse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.material-group-wizard-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-left: 8px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.material-group-wizard-badge.is-sensor {
  border-color: color-mix(in srgb, var(--cc-accent) 50%, var(--cc-line));
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.material-group-wizard-badge.is-ecc {
  border-color: color-mix(in srgb, var(--cc-purple) 50%, var(--cc-line));
  background: color-mix(in srgb, var(--cc-purple) 12%, transparent);
  color: var(--cc-purple);
}

@media (max-width: 700px) {
  .screen-header {
    display: grid;
  }

  .tab-actionbar {
    display: grid;
  }

  .tab-picker-tools {
    grid-template-columns: 38px minmax(0, 1fr);
    width: 100%;
  }

  .quote-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-dialog-form {
    grid-template-columns: 1fr;
  }

  .settings-form-grid,
  .settings-form-grid-compact {
    grid-template-columns: 1fr;
  }

  .settings-field-wide {
    grid-column: 1 / -1;
  }

  .tab-actionbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .screen-header .toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .screen-header .search-input {
    width: 100%;
  }

  .metric-strip,
  .project-meta-column,
  .av-option-list,
  .document-grid,
  .license-grid,
  .warehouse-grid {
    grid-template-columns: 1fr;
  }

  .av-option-list {
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .component-row {
    grid-template-columns: 1fr;
  }

  .bar-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}