html,
body {
  height: 100%;
  overflow: hidden;
}

:root {
  --td-app-viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --td-app-viewport-height: 100dvh;
  }
}

body {
  overscroll-behavior: none;
}

.app {
  height: var(--td-app-viewport-height);
  min-height: var(--td-app-viewport-height);
  overflow: hidden;
}

.sidebar {
  height: var(--td-app-viewport-height);
  min-height: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.app .sidebar::before,
.sidebar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.34),
    rgba(30, 64, 175, 0.50) 45%,
    rgba(8, 24, 48, 0.72)
  );
  box-shadow:
    0 0 18px rgba(37, 99, 235, 0.32),
    inset 1px 0 0 rgba(147, 197, 253, 0.20);
  pointer-events: none;
  z-index: 0;
}

.app .sidebar > *,
.sidebar > * {
  position: relative;
  z-index: 1;
}

.main {
  height: var(--td-app-viewport-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  flex: 0 0 auto;
}

.content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Keep the desktop sidebar only slightly wider than the original 230px layout. */
@media (min-width: 901px) {
  .app {
    grid-template-columns: clamp(236px, 17.4vw, 238px) minmax(0, 1fr) !important;
  }

.sidebar .nav {
    padding-left: 10px;
    padding-right: 3px;
  }

  .sidebar .nav button {
    gap: 10px;
    padding-inline: 10px;
    font-size: 14.2px;
    white-space: nowrap;
  }
}

/* Current grouped maintenance-plan form. */
#detail .manual-plan-builder {
  margin: 12px 0 16px;
  padding: 16px;
  border: 1px solid #cbdbe8;
  border-radius: 14px;
  background: #f8fbfd;
}

#detail .manual-plan-builder.is-hidden { display: none; }

#detail .manual-plan-builder-head,
#detail .manual-plan-group-head,
#detail .manual-plan-builder-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#detail .manual-plan-builder-head {
  justify-content: space-between;
  margin-bottom: 14px;
}

#detail .manual-plan-builder-head strong {
  color: #183b56;
  font-size: 16px;
}

#detail .manual-plan-meta {
  display: grid;
  /* Compact fixed-width fields: leave the remaining header area intentionally free. */
  grid-template-columns: minmax(220px, 275px) repeat(3, minmax(135px, 152px));
  gap: 10px;
  align-items: end;
}

#detail .manual-plan-meta label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #526b82;
  font-size: 12px;
  font-weight: 800;
}

#detail .manual-plan-meta input,
#detail .manual-plan-meta select,
#detail .mpg-name,
#detail .mpp-bauteil,
#detail .mpp-task {
  width: 100%;
  min-height: 38px;
  border: 1px solid #bfd0df;
  border-radius: 9px;
  background: #fff;
  color: #1f3447;
  padding: 8px 10px;
  font: inherit;
}

#detail .manual-plan-meta .manual-plan-asset input[readonly] {
  background: #edf4f8;
  color: #183b56;
  cursor: default;
  font-weight: 700;
}

#detail .manual-plan-preview {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf4fa;
  color: #36546d;
  font-size: 14px;
}

#detail .manual-plan-preview strong { color: #183b56; }

#detail .manual-plan-groups {
  display: grid;
  gap: 10px;
}

#detail .manual-plan-group {
  padding: 12px;
  border: 1px solid #d5e2ec;
  border-radius: 11px;
  background: #fff;
}

#detail .manual-plan-group-head { justify-content: space-between; }
#detail .manual-plan-group-head > .mpg-name { flex: 1 1 220px; }

#detail .manual-plan-group-actions,
#detail .manual-plan-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#detail .manual-plan-points {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#detail .manual-plan-point {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0e9f0;
  border-radius: 9px;
  background: #fdfefe;
}

#detail .manual-plan-point.has-bauteil {
  grid-template-columns: 28px minmax(116px, 20%) minmax(0, 1fr) auto auto;
  column-gap: 0;
}

#detail .manual-plan-point.has-bauteil .mpp-index { margin-right: 8px; }

#detail .manual-plan-point.has-bauteil .mpp-bauteil {
  border-radius: 7px 0 0 7px;
  border-right: 2px solid #9eb7c9;
}

#detail .manual-plan-point.has-bauteil .mpp-task {
  border-left: 0;
  border-radius: 0 7px 7px 0;
}

#detail .manual-plan-point.has-bauteil .btn { margin-left: 8px; }

#detail .manual-plan-row-bauteil {
  white-space: nowrap;
}

#detail .manual-plan-row-remove {
  min-width: 42px;
  padding-left: 12px;
  padding-right: 12px;
}

#detail .mpp-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eaf3f8;
  color: #2f627f;
  font-size: 12px;
  font-weight: 800;
}

#detail .manual-plan-builder-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

@media (max-width: 900px) {
  #detail .manual-plan-meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  #detail .manual-plan-meta,
  #detail .manual-plan-point { grid-template-columns: 1fr; }
  #detail .manual-plan-point.has-bauteil { grid-template-columns: 1fr; gap: 8px; }
  #detail .manual-plan-point.has-bauteil .mpp-index,
  #detail .manual-plan-point.has-bauteil .btn { margin-left: 0; margin-right: 0; }
  #detail .manual-plan-point.has-bauteil .mpp-bauteil,
  #detail .manual-plan-point.has-bauteil .mpp-task {
    border: 1px solid #bfd0df;
    border-radius: 9px;
  }
  #detail .manual-plan-group-head {
    align-items: stretch;
    flex-direction: column;
  }
  #detail .mpp-index { display: none; }
}

/* Document folders: show asset types as collapsed parent nodes. */
#dokumente .docx-tree-type-toggle {
  display: grid;
  grid-template-columns: 18px 24px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid #e4ebf1;
  background: #f6f9fb;
  color: #27445d;
  padding: 11px 10px;
  text-align: left;
  font: inherit;
  font-family: "Segoe UI", "IBM Plex Sans", Arial, sans-serif;
  font-size: 17.1px;
  font-weight: 600;
  cursor: pointer;
}

#dokumente .docx-tree-type-toggle:hover,
#dokumente .docx-tree-type-toggle.is-open {
  background: #edf5fa;
}

#dokumente .docx-tree-chevron {
  color: #52758e;
  font-size: 17px;
  line-height: 1;
}

#dokumente .docx-tree-children {
  display: grid;
  gap: 2px;
  margin: 3px 0 7px;
  padding-left: 17px;
  border-left: 2px solid #d9e7f0;
}

#dokumente .docx-tree .docx-tree-asset {
  display: grid;
  grid-template-columns: 18px 24px minmax(0, 1fr) auto;
  width: 100%;
  margin-left: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-family: "Segoe UI", "IBM Plex Sans", Arial, sans-serif;
  font-size: 16.15px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  border-radius: 8px;
}

#dokumente .docx-tree-folders {
  display: grid;
  gap: 2px;
  margin: 2px 0 7px 38px;
  padding-left: 10px;
  border-left: 1px solid #dce8ef;
}

#dokumente .docx-tree .docx-tree-folder {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-family: "Segoe UI", "IBM Plex Sans", Arial, sans-serif;
  font-size: 15.2px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  border-radius: 7px;
}

#dokumente .docx-tree .docx-tree-folder:hover,
#dokumente .docx-tree .docx-tree-folder.sel {
  background: #dceefa;
  color: #1f4f70;
}

#dokumente .docx-tree .cnt {
  color: #6b8092;
  font-size: 13.3px;
  font-weight: 600;
}

#dokumente .docx-crumbs,
#dokumente .docx-actions,
#dokumente .docx-drop {
  font-family: "Segoe UI", "IBM Plex Sans", Arial, sans-serif;
}

#dokumente .docx-crumbs {
  color: #2e4b61;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Keep the selected document path and its upload action on one header line. */
#dokumente .docx-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

#dokumente .docx-crumbs {
  grid-column: 1;
  grid-row: 1;
}

#dokumente .docx-actions {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
  padding: 8px 16px;
}

#dokumente .docx-drop {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
}

/* Work history: shared table system with content-driven minimums. */
@media (min-width: 901px) {
  #historie #historyTableWork,
  #historie #historyTableMaintenance {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-gutter: stable !important;
  }

  #historie .history-table {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  #historie #historyTableWork .history-table-work {
    min-width: 1180px !important;
  }

  #historie #historyTableMaintenance .history-table-maintenance {
    min-width: 1260px !important;
  }

  #historie .history-table th,
  #historie .history-table td {
    min-width: 0 !important;
    max-width: 280px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  #historie .history-table-work th:nth-child(1),
  #historie .history-table-work td:nth-child(1) { min-width: 250px !important; width: 24% !important; }
  #historie .history-table-work th:nth-child(2),
  #historie .history-table-work td:nth-child(2) { min-width: 150px !important; width: 14% !important; }
  #historie .history-table-work th:nth-child(3),
  #historie .history-table-work td:nth-child(3) { min-width: 180px !important; width: 16% !important; }
  #historie .history-table-work th:nth-child(4),
  #historie .history-table-work td:nth-child(4) { min-width: 160px !important; width: 14% !important; }
  #historie .history-table-work th:nth-child(5),
  #historie .history-table-work td:nth-child(5),
  #historie .history-table-work th:nth-child(6),
  #historie .history-table-work td:nth-child(6) { min-width: 120px !important; width: 10% !important; }
  #historie .history-table-work th:nth-child(7),
  #historie .history-table-work td:nth-child(7) { min-width: 90px !important; width: 8% !important; }
  #historie .history-table-work th:nth-child(8),
  #historie .history-table-work td:nth-child(8) { min-width: 130px !important; width: 10% !important; }

  #historie .history-table-maintenance th:nth-child(1),
  #historie .history-table-maintenance td:nth-child(1),
  #historie .history-table-maintenance th:nth-child(2),
  #historie .history-table-maintenance td:nth-child(2) { min-width: 145px !important; width: 12% !important; }
  #historie .history-table-maintenance th:nth-child(3),
  #historie .history-table-maintenance td:nth-child(3) { min-width: 170px !important; width: 14% !important; }
  #historie .history-table-maintenance th:nth-child(4),
  #historie .history-table-maintenance td:nth-child(4) { min-width: 220px !important; width: 18% !important; }
  #historie .history-table-maintenance th:nth-child(5),
  #historie .history-table-maintenance td:nth-child(5) { min-width: 120px !important; width: 10% !important; }
  #historie .history-table-maintenance th:nth-child(6),
  #historie .history-table-maintenance td:nth-child(6) { min-width: 150px !important; width: 12% !important; }
  #historie .history-table-maintenance th:nth-child(7),
  #historie .history-table-maintenance td:nth-child(7) { min-width: 150px !important; width: 12% !important; }
  #historie .history-table-maintenance th:nth-child(8),
  #historie .history-table-maintenance td:nth-child(8) {
    min-width: 110px !important;
    width: 8% !important;
    text-align: right !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Completed work is a plain green status label, not a badge. */
#historie #historyWorkPanel .history-work-status {
  display: inline !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #16803c !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

/* Settings: these focused administration panels stay compact on desktop. */
@media (min-width: 1101px) {
  #settings #panel-wot,
  #settings #panel-roles,
  #settings #panel-info-settings,
  #settings #panel-platform-reset {
    width: 50% !important;
    max-width: 820px !important;
  }
}

/* Settings tiles are selectors, not floating cards: moving them on hover makes
   the page appear to jump while a panel is open. Keep the selection feedback
   in the border and shadow only. */
#settings .admin-tile,
#settings .admin-tile:hover,
#settings .admin-tile:focus-visible,
#settings .admin-tile.active {
  transform: none !important;
}

/* Secondary labels in Settings must remain readable on office displays. */
#settings .admin-tile-sub,
#settings .admin-panel-head .muted {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* INFO overview: recognizable category tabs with room for every label. */
#info .info-overview-tabs {
  gap: 8px !important;
  padding-bottom: 10px !important;
}

#info .info-overview-tab,
#info .info-overview-tabs-right .info-overview-tab {
  min-height: 52px !important;
  padding: 8px 10px !important;
  color: #39556a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#info .info-overview-tab-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#info .info-overview-tab-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border: 1px solid #cbd5df !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .09) !important;
  color: #41576a !important;
  line-height: 1 !important;
}

#info .info-overview-tab-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#info .info-overview-tab.active .info-overview-tab-icon {
  background: #fff !important;
  border-color: #8eb8ca !important;
  box-shadow: 0 0 0 3px rgba(93, 165, 194, .15), 0 1px 2px rgba(15, 23, 42, .10) !important;
  color: #24607a !important;
}

/* Sidebar: a calm navigation list by default; feedback only on hover or on
   the currently selected page. */
.app .sidebar .nav button,
.sidebar .nav button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.app .sidebar .nav button:not(.active):hover,
.sidebar .nav button:not(.active):hover {
  transform: translateX(2px) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(147, 197, 253, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.app .sidebar .nav button.active,
.sidebar .nav button.active {
  transform: none !important;
  /* Clear dark-blue left edge: it anchors the selected item in the sidebar. */
  background: linear-gradient(90deg, rgba(30, 64, 175, 0.68) 0, rgba(59, 130, 246, 0.30) 20px, rgba(96, 165, 250, 0.08) 100%) !important;
  border-color: rgba(147, 197, 253, 0.76) !important;
  box-shadow: inset 4px 0 0 #1e40af, inset 10px 0 16px rgba(30, 64, 175, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(96, 165, 250, 0.18) !important;
}

.app .sidebar .nav button.active::before,
.sidebar .nav button.active::before {
  background: linear-gradient(180deg, #dbeafe, #60a5fa) !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.82), 5px 0 16px rgba(59, 130, 246, 0.34) !important;
}

.app .sidebar .nav button.active .nav-ico,
.sidebar .nav button.active .nav-ico {
  color: #bfdbfe !important;
}

/* Material flow: show an immediate, calm loading state instead of an empty table. */
#materialfluss .material-flow-loading {
  padding: 28px 16px !important;
  color: #4b6477 !important;
  font-weight: 650 !important;
  text-align: center !important;
}

#materialfluss .material-flow-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid #bdd5df;
  border-top-color: #2c718b;
  border-radius: 50%;
  animation: material-flow-spin .75s linear infinite;
}

@keyframes material-flow-spin {
  to { transform: rotate(360deg); }
}

/* Dashboard KPI labels: slightly stronger, still calm neutral grey. */
#dashboard #statusBar.status-bar .sb-label {
  color: #607086 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
}

/* Compact TD Lighthouse 360-degree brand in the centre of the steel header. */
#dashboard.page.active > #globalContextBar.dashboard-steel-header {
  position: relative !important;
  height: 61px !important;
  min-height: 61px !important;
  background: linear-gradient(180deg, #ebeded 0%, #e1e4e5 48%, #d8dadc 100%) !important;
  border-color: #d5d8d9 !important;
  border-left: 2.4px solid #70a7d4 !important;
  border-bottom-color: #cdd0d1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 0 -1px 0 rgba(92, 98, 102, 0.15), 0 2px 5px rgba(35, 39, 42, 0.08) !important;
}
#dashboard.page.active > #globalContextBar.dashboard-steel-header .dashboard-product-brand {
  left: 50% !important;
  top: 50% !important;
  width: 225px !important;
  height: 65px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 4 !important;
  isolation: isolate !important;
}
@media (max-width: 1200px) {
  #dashboard.page.active > #globalContextBar.dashboard-steel-header .dashboard-product-brand {
    width: 190px !important;
    height: 54px !important;
  }
}

/* Current planning and work history: matching compact grey table-heading strips. */
#wartungsplan .planning-unified-layout .table thead th,
#historie #historyWorkPanel .table thead th,
#historie #historyMaintenancePanel .table thead th {
  height: 24px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 11.7px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Slightly denser desktop sidebar without changing its readable type size. */
@media (min-width: 901px) {
  .app .sidebar .nav,
  .sidebar .nav {
    gap: 4px !important;
  }

  .app .sidebar .nav button,
  .sidebar .nav button {
    min-height: 27px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Spare-part editor: compact, calm form with the operational fields easy to scan. */
#etlEditPartModal .modal-box {
  width: min(980px, calc(100vw - 44px)) !important;
  max-height: 92vh !important;
  padding: 18px 20px !important;
}

#etlEditPartModal .etl-part-grid {
  gap: 9px 16px !important;
}

#etlEditPartModal .etl-part-field > span {
  display: block !important;
  margin: 0 0 4px !important;
  color: #556b7d !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

#etlEditPartModal .etl-part-field input[data-edit-pk] {
  height: 38px !important;
  min-height: 38px !important;
  padding: 7px 12px !important;
  border-color: #c7d3dc !important;
  border-radius: 9px !important;
  color: #2b4153 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

/* Location and stock information have restrained, distinct accents. */
#etlEditPartModal input[data-edit-pk="lagerort"] {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1e4f7a !important;
  font-weight: 700 !important;
}

#etlEditPartModal input[data-edit-pk="bestand"] {
  background: #f0fdf4 !important;
  border-color: #a7d9bd !important;
  color: #17623a !important;
  font-weight: 700 !important;
}

#etlEditPartModal input[data-edit-pk="mindestbestand"] {
  background: #fffbeb !important;
  border-color: #f5d78a !important;
  color: #8a5a12 !important;
  font-weight: 650 !important;
}

#etlEditPartModal #etlPartImageSelectBtn,
#etlEditPartModal #etlPartImageSearchBtn,
#etlEditPartModal #etlPartImageRemoveBtn {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

#etlEditPartModal #etlPartImagePreviewContainer {
  height: 110px !important;
  margin-top: 7px !important;
}

#etlEditPartModal #etlNoPhotoNotice {
  min-height: 100px !important;
  margin-top: 7px !important;
  padding: 12px 16px !important;
  gap: 5px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#etlEditPartModal #etlOnlineImageSearchSection {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

#etlEditPartModal .etl-confirm {
  margin-top: 12px !important;
  padding-top: 10px !important;
}
/* Maschinenstammdaten: gleiche Felder, aber deutlich kompakter angeordnet. */
#machineDataModal .machine-data-box {
  width: min(700px, calc(100vw - 44px)) !important;
  max-height: 90vh !important;
  padding: 13px 16px !important;
}

#machineDataModal .modal-head {
  min-height: 32px !important;
  margin-bottom: 5px !important;
}

#machineDataModal .modal-head h3 {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

#machineDataModal .machine-data-title {
  display: flex !important;
  min-width: 0 !important;
  align-items: baseline !important;
  gap: 10px !important;
}

#machineDataModal #mdAssetName {
  overflow: hidden !important;
  color: #3c617b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#machineDataModal .machine-data-section {
  margin-top: 6px !important;
  padding-top: 6px !important;
}

#machineDataModal .machine-data-section.machine-data-technical {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

#machineDataModal .machine-data-section h4 {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#machineDataModal .af-grid {
  gap: 7px 12px !important;
}

#machineDataModal .af-field {
  gap: 3px !important;
}

#machineDataModal .af-field label {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

#machineDataModal .af-field input,
#machineDataModal .af-field select {
  min-height: 32px !important;
  height: 32px !important;
  padding: 5px 9px !important;
}

#machineDataModal .af-field textarea {
  min-height: 58px !important;
  padding: 7px 9px !important;
}

#machineDataModal .af-actions {
  margin-top: 7px !important;
  padding-top: 7px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#machineDataModal .af-primary-actions {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Schichtplan: navigation and Ansicht belong together in the top header. */
#schichtplan.spHeaderControlsReady .greeting {
  align-items: center !important;
  column-gap: 14px !important;
  margin-bottom: 12px !important;
  min-height: 46px !important;
}

#schichtplan.spHeaderControlsReady .greeting > .time {
  display: none !important;
}

#schichtplan .spHeaderControls {
  display: flex;
  min-width: 0;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#schichtplan .spHeaderControls .spOvTitle {
  min-width: 0;
  margin: 0 4px 0 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#schichtplan .spHeaderControls .spOvModeGroup,
#schichtplan .spHeaderControls .spNav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

#schichtplan .spHeaderControls .spViewSelectWrap,
#schichtplan .spHeaderControls .spYearPick {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #9dcde7;
  border-radius: 9px;
  background: #eaf7ff;
  color: #075985;
}

#schichtplan .spHeaderControls .spViewSelectWrap label,
#schichtplan .spHeaderControls .spYearPick label {
  margin: 0;
  color: #075985;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

#schichtplan .spHeaderControls .spViewSelectWrap select,
#schichtplan .spHeaderControls .spYearPick select {
  min-width: 90px;
  height: 30px;
  margin: 0;
  padding: 3px 23px 3px 4px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: #0f3d5a;
  font-size: 13px;
  font-weight: 800;
}

#schichtplan .spHeaderControls .spNav button {
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #9dcde7;
  border-radius: 9px;
  background: #eaf7ff;
  color: #075985;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

#schichtplan .spHeaderControls .spNav .spTodayBtn {
  min-width: auto;
  padding: 0 12px;
  font-size: 13px;
}

#schichtplan .spHeaderControls .spNav button:hover,
#schichtplan .spHeaderControls .spNav button:focus-visible {
  border-color: #38a8df;
  background: #d3efff;
  box-shadow: 0 0 0 3px rgba(56, 168, 223, .16);
}

@media (max-width: 1050px) {
  #schichtplan.spHeaderControlsReady .greeting {
    align-items: flex-start !important;
    flex-direction: column;
    row-gap: 8px;
  }

  #schichtplan .spHeaderControls {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Compatibility bridge: title values live in title-system.css. */
#dashboard .dashboard-steel-title,
#anlagentypen .ad-hero-title-line h2,
#auftrag-erstellen > .greeting > h2,
#wartungsplan .planning-page-heading .planning-heading-main > h2,
#historie > .greeting > h2,
#fehlermatrix .ki-hub-heading h2,
#dokumente > .greeting > h2,
#info > .greeting > h2,
#warenkorb > .greeting > h2,
#ersatzteillager > .greeting > h2,
#materialkorb > .greeting > h2,
#materialfluss > .greeting > h2,
#absenzen .greeting > h2,
#schichtplan .greeting > h2,
#settings > .greeting > h2,
#client-demo > .greeting h2 {
  margin: 0 !important;
  color: var(--td-heading-color) !important;
  font-family: var(--td-heading-font) !important;
  font-size: var(--td-heading-page-size) !important;
  font-weight: var(--td-heading-page-weight) !important;
  line-height: var(--td-heading-page-line-height) !important;
  letter-spacing: var(--td-heading-page-tracking) !important;
  text-transform: none !important;
}

/* Lift the Dashboard title while keeping a clear gap above the user name. */
#dashboard.page.active > #globalContextBar.dashboard-steel-header .dashboard-steel-title {
  color: #879dad !important;
}

#dashboard .dashboard-steel-title {
  position: absolute !important;
  top: 6px !important;
  right: auto !important;
  bottom: auto !important;
  left: 16px !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
}

#dashboard.page.active > #globalContextBar.dashboard-steel-header {
  position: relative !important;
  min-height: 80px !important;
}

#dashboard .dashboard-user-summary {
  position: absolute !important;
  top: 40px !important;
  right: auto !important;
  bottom: auto !important;
  left: 16px !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
}

/* Dashboard KPIs: compact industrial control tiles. */
#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar {
  min-height: 0 !important;
  padding: 0 0 8px !important;
  margin-bottom: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(128px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] {
  --kpi-accent: #5f8199 !important;
  position: relative !important;
  min-width: 0 !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 11px 10px 8px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #fbfcfd 0%, #edf2f4 100%) !important;
  border: 1px solid #c4cfd6 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 3px 8px rgba(40, 61, 74, 0.1) !important;
  color: #465866 !important;
  cursor: pointer !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card]:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--kpi-accent) 38%, #c4cfd6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 5px 12px rgba(40, 61, 74, 0.14) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 3px !important;
  background: var(--kpi-accent) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 11px !important;
  right: 10px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--kpi-accent) !important;
  opacity: 0.88 !important;
  -webkit-mask: var(--kpi-icon) center / contain no-repeat !important;
  mask: var(--kpi-icon) center / contain no-repeat !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 2px !important;
  position: relative !important;
  z-index: 1 !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-num {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--kpi-accent) !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-num::after {
  content: none !important;
  display: none !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-label {
  margin: 0 !important;
  color: #465866 !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-sub:not([hidden]) {
  display: block !important;
  margin: -1px 0 0 !important;
  color: #c23f54 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="open-maintenance"] {
  --kpi-accent: #d98a00 !important;
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5 5L3 18l3 3 6.7-6.7a4 4 0 0 0 5-5l-3 3-3-3 3-3z'/%3E%3C/svg%3E");
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="open-work-orders"] {
  --kpi-accent: #5f8199 !important;
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='16' rx='2'/%3E%3Cpath d='M9 4V2h6v2M9 9h6M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="in-work"] {
  --kpi-accent: #169873 !important;
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="unassigned-work-orders"] {
  --kpi-accent: #d98a00 !important;
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="disturbance-work-orders"] {
  --kpi-accent: #d84b63 !important;
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3zM12 9v5M12 17h.01'/%3E%3C/svg%3E");
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="this-week-work-orders"] {
  --kpi-accent: #6d9fc2 !important;
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18'/%3E%3C/svg%3E");
}

/* Final KPI treatment: neutral compact cards with conditional soft highlighting. */
#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar {
  padding: 0 0 6px !important;
  margin-bottom: 8px !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work {
  gap: 8px !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] {
  min-height: 43px !important;
  height: 43px !important;
  padding: 0 8px !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1px solid #d5dde2 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(47, 64, 75, 0.08) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card]:hover {
  transform: translateY(-1px) !important;
  border-color: #c3ced5 !important;
  box-shadow: 0 4px 9px rgba(47, 64, 75, 0.11) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card]::before,
#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card]::after {
  content: none !important;
  display: none !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-num {
  position: relative !important;
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
  padding: 0 8px 0 0 !important;
  color: #64727d !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 22px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-num::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 1px !important;
  height: 22px !important;
  background: #cbd3d8 !important;
  transform: translateY(-50%) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-label {
  display: flex !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64727d !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 11.9px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card] > .sb-text > .sb-sub:not([hidden]) {
  position: absolute !important;
  right: 6px !important;
  bottom: 2px !important;
  margin: 0 !important;
  color: #ad5967 !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="open-maintenance"][data-kpi-active] {
  background: #fff9e9 !important;
  border-color: #ead8a7 !important;
  box-shadow: 0 2px 7px rgba(194, 145, 31, 0.11) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="open-work-orders"][data-kpi-active] {
  background: #f2f7fa !important;
  border-color: #cbdde7 !important;
  box-shadow: 0 2px 7px rgba(91, 129, 153, 0.1) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="in-work"][data-kpi-active] {
  background: #eff9f4 !important;
  border-color: #c2e2d5 !important;
  box-shadow: 0 2px 7px rgba(42, 146, 111, 0.1) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="unassigned-work-orders"][data-kpi-active] {
  background: #fff5e9 !important;
  border-color: #efd1ac !important;
  box-shadow: 0 2px 7px rgba(205, 135, 52, 0.1) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="disturbance-work-orders"][data-kpi-active] {
  background: #fff1f3 !important;
  border-color: #efc3cc !important;
  box-shadow: 0 2px 7px rgba(201, 74, 96, 0.1) !important;
}

#dashboard.page.active > .dashboard-main-container > #statusBar.status-bar > .kpi-row.kpi-row-work > .sb-item[data-kpi-card="this-week-work-orders"][data-kpi-active] {
  background: #eef7fd !important;
  border-color: #c2deef !important;
  box-shadow: 0 2px 7px rgba(73, 145, 192, 0.1) !important;
}

/* Ersatzteillager: weichere, hellere Business-Farben für Tabs und Aktionsbuttons. */
#ersatzteillager {
  --etl-soft-primary: #35556f;
  --etl-soft-primary-hover: #3b607d;
  --etl-soft-primary-border: #29465f;
  --etl-soft-secondary-bg: #f7fafc;
  --etl-soft-secondary-hover: #eef5fa;
  --etl-soft-secondary-border: #bfd0df;
  --etl-soft-secondary-text: #274257;
  --etl-soft-accent: #e6a06a;
  --etl-soft-accent-hover: #d88d56;
  --etl-soft-accent-border: #df8c47;
}

#ersatzteillager .etl-tab,
#ersatzteillager .etl-stock-actions .btn,
#ersatzteillager .etl-stock-toolbar .btn,
#ersatzteillager .etl-stock-control-actions .btn {
  background: var(--etl-soft-secondary-bg) !important;
  color: var(--etl-soft-secondary-text) !important;
  border-color: var(--etl-soft-secondary-border) !important;
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.06) !important;
}

#ersatzteillager .etl-tab.active,
#ersatzteillager .etl-tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--etl-soft-primary), var(--etl-soft-primary-hover)) !important;
  color: #f8fbff !important;
  border-color: var(--etl-soft-primary-border) !important;
  box-shadow: 0 5px 14px rgba(41, 70, 95, 0.18) !important;
}

#ersatzteillager .etl-tab:not(.active):hover,
#ersatzteillager .etl-stock-actions .btn.ghost:hover,
#ersatzteillager .etl-stock-toolbar .btn.ghost:hover,
#ersatzteillager .etl-stock-control-actions .btn.ghost:hover {
  background: var(--etl-soft-secondary-hover) !important;
  border-color: #a9bfd1 !important;
  color: #1f3b52 !important;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.10) !important;
}

#ersatzteillager .etl-stock-actions .btn:not(.ghost):not(.dark),
#ersatzteillager .etl-stock-toolbar .btn:not(.ghost):not(.dark),
#ersatzteillager .etl-stock-control-actions .btn:not(.ghost):not(.dark),
#ersatzteillager #etlNewPart,
#ersatzteillager #etlImport {
  background: linear-gradient(135deg, var(--etl-soft-accent), #e8a15f) !important;
  color: #ffffff !important;
  border-color: var(--etl-soft-accent-border) !important;
  box-shadow: 0 5px 14px rgba(223, 140, 71, 0.18) !important;
}

#ersatzteillager .etl-stock-actions .btn:not(.ghost):not(.dark):hover,
#ersatzteillager .etl-stock-toolbar .btn:not(.ghost):not(.dark):hover,
#ersatzteillager .etl-stock-control-actions .btn:not(.ghost):not(.dark):hover,
#ersatzteillager #etlNewPart:hover,
#ersatzteillager #etlImport:hover {
  background: linear-gradient(135deg, var(--etl-soft-accent-hover), var(--etl-soft-accent)) !important;
  border-color: #cf7e3f !important;
  box-shadow: 0 6px 16px rgba(207, 126, 63, 0.20) !important;
}

#ersatzteillager #etlToggleControl[aria-pressed="true"] {
  background: #eaf4fb !important;
  border-color: #9fb9cc !important;
  color: var(--etl-soft-secondary-text) !important;
  box-shadow: 0 4px 12px rgba(41, 70, 95, 0.12) !important;
}

/* Softer steel-blue accents for sidebar navigation and scrolling. */
.app .sidebar,
.sidebar {
  --td-sidebar-accent: #70a7d4;
  --td-sidebar-accent-light: #abcce5;
  --td-sidebar-accent-rgb: 112, 167, 212;
  scrollbar-color: rgba(126, 174, 209, 0.52) transparent;
}

.app .sidebar *,
.sidebar * {
  scrollbar-color: rgba(126, 174, 209, 0.52) transparent;
}

.app .sidebar::-webkit-scrollbar-thumb,
.app .sidebar *::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar *::-webkit-scrollbar-thumb {
  background: rgba(126, 174, 209, 0.52) !important;
  box-shadow: none !important;
}

.app .sidebar::-webkit-scrollbar-thumb:hover,
.app .sidebar *::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar *::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 169, 215, 0.68) !important;
}

.app .sidebar .nav button:is(.active, .is-active, [aria-current="page"], [data-active="true"]),
.sidebar .nav button:is(.active, .is-active, [aria-current="page"], [data-active="true"]) {
  background: linear-gradient(90deg, rgba(96, 165, 220, 0.26), rgba(96, 165, 220, 0.095)) !important;
  border-color: rgba(156, 198, 228, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 0 0 1px rgba(96, 165, 220, 0.15) !important;
}

.app .sidebar .nav button:is(.active, .is-active, [aria-current="page"], [data-active="true"])::before,
.sidebar .nav button:is(.active, .is-active, [aria-current="page"], [data-active="true"])::before {
  background: linear-gradient(180deg, #bdd9eb, #70a7d4) !important;
  box-shadow: 0 0 8px rgba(75, 151, 211, 0.56) !important;
}

/* Wartungsplan group header: softer steel gray instead of near-black. */
#detail .bg-group-head,
#detail .bg-group-main .bg-group-head {
  background: #667584 !important;
  color: #f8fafc !important;
}

#detail .bg-group-head .bg-head-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#detail .bg-group-head .bg-head-right .btn,
#detail .bg-group-head .bg-head-right .mini-btn {
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#detail .bg-group-head .plan-head-order-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid #a8ceb4 !important;
  border-radius: 9px !important;
  background: #edf7f0 !important;
  color: #285c3a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Compact Wartungsplan details with explicit field labels. */
#detail .plan-card-head.plan-card-head-compact {
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: end !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
}

#detail .plan-card-head-compact .plan-meta-row {
  grid-column: 1 !important;
  grid-template-columns: 112px 122px 128px 152px max-content !important;
  align-items: end !important;
  gap: 8px !important;
}

#detail .plan-card-head-compact .plan-meta-row .ps-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
}

#detail .plan-card-head-compact .plan-meta-row .ps-item small {
  display: block !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#detail .plan-card-head-compact .plan-actions {
  grid-column: 2 !important;
  align-self: end !important;
}

#detail .plan-card-head-compact .plan-date-input,
#detail .plan-card-head-compact .plan-interval-select,
#detail .plan-card-head-compact .plan-reminder-select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px !important;
}

#detail .plan-card-head-compact .plan-meta-row .ps-item > b {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

#detail .plan-card-head-compact .plan-status-badge {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#detail .plan-card-head-compact .plan-toggle-btn {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  #detail .plan-card-head.plan-card-head-compact {
    grid-template-columns: 1fr !important;
  }

  #detail .plan-card-head-compact .plan-meta-row {
    grid-column: 1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #detail .plan-card-head-compact .plan-actions {
    grid-column: 1 !important;
  }

  #detail .bg-group-head .bg-head-right {
    flex-wrap: wrap !important;
  }
}

/* Keep every maintenance-planning value inside its own table column. */
#wartungsplan .planning-section-maintenance .table tbody td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#wartungsplan .planning-section-maintenance .table tbody td > b {
  font-weight: 400 !important;
}

#wartungsplan .planning-section-maintenance .maintenance-discipline {
  color: #64748b !important;
  font-weight: 400 !important;
}

#wartungsplan .planning-section-maintenance .table tbody td,
#wartungsplan .planning-section-maintenance .table tbody td * {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-size: 12.6px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 901px) {
  #wartungsplan .planning-section-maintenance .table th:nth-child(1),
  #wartungsplan .planning-section-maintenance .table td:nth-child(1) { width: 18% !important; }
  #wartungsplan .planning-section-maintenance .table th:nth-child(2),
  #wartungsplan .planning-section-maintenance .table td:nth-child(2) { width: 28% !important; }
  #wartungsplan .planning-section-maintenance .table th:nth-child(3),
  #wartungsplan .planning-section-maintenance .table td:nth-child(3) { width: 18% !important; }
  #wartungsplan .planning-section-maintenance .table th:nth-child(4),
  #wartungsplan .planning-section-maintenance .table td:nth-child(4) { width: 14% !important; }
  #wartungsplan .planning-section-maintenance .table th:nth-child(5),
  #wartungsplan .planning-section-maintenance .table td:nth-child(5) { width: 12% !important; }
  #wartungsplan .planning-section-maintenance .table th:nth-child(6),
  #wartungsplan .planning-section-maintenance .table td:nth-child(6) { width: 10% !important; text-align: right !important; }
}

.maintenance-assignment-modal {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.maintenance-assignment-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(2px);
}

.maintenance-assignment-panel {
  position: relative;
  width: min(760px, 100%);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.maintenance-assignment-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.maintenance-assignment-panel header small {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.maintenance-assignment-panel header h3 {
  margin: 0;
  color: #334155;
  font-size: 18px;
  font-weight: 600;
}

.maintenance-assignment-close {
  width: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font-size: 22px;
  cursor: pointer;
}

.maintenance-assignment-fields {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) repeat(2, minmax(155px, 180px));
  gap: 14px;
  padding: 22px;
}

.maintenance-assignment-fields label span {
  display: block;
  margin-bottom: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.maintenance-assignment-fields select,
.maintenance-assignment-fields input {
  width: 100%;
  height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  padding: 0 11px;
  color: #1e293b;
  font: inherit;
}

.td-assignment-date-shell {
  position: relative;
  display: block;
  width: 100%;
}

.td-assignment-date-shell input[type="date"] {
  position: relative;
  z-index: 1;
  width: 100%;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  padding-right: 38px !important;
}

.td-assignment-date-shell input[type="date"]::-webkit-datetime-edit,
.td-assignment-date-shell input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: transparent;
}

.td-assignment-date-shell input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}

.td-assignment-date-display {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 42px 0 12px;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.maintenance-assignment-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px 22px;
}

@media (max-width: 620px) {
  .maintenance-assignment-fields { grid-template-columns: 1fr; }
}

/* Arbeitsaufträge: plain type text and compact 8-column layout without Termin. */
#wartungsplan .planning-section-work .td-planning-type-cell,
#wartungsplan .planning-section-work .td-planning-type-cell * {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #243b53 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-weight: 400 !important;
}

@media (min-width: 901px) {
  #wartungsplan .planning-section-work .table th:nth-child(1),
  #wartungsplan .planning-section-work .table td:nth-child(1) { width: 18% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(2),
  #wartungsplan .planning-section-work .table td:nth-child(2) { width: 10% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(3),
  #wartungsplan .planning-section-work .table td:nth-child(3) { width: 12% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(4),
  #wartungsplan .planning-section-work .table td:nth-child(4) { width: 14% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(5),
  #wartungsplan .planning-section-work .table td:nth-child(5) { width: 9% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(6),
  #wartungsplan .planning-section-work .table td:nth-child(6) { width: 18% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(7),
  #wartungsplan .planning-section-work .table td:nth-child(7) { width: 10% !important; }
  #wartungsplan .planning-section-work .table th:nth-child(8),
  #wartungsplan .planning-section-work .table td:nth-child(8) { width: 9% !important; text-align: right !important; }
}

#wartungsplan .planning-section-work .table tbody td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#wartungsplan .planning-section-work .td-planning-status-cell,
#wartungsplan .planning-section-work .td-planning-action-cell {
  position: relative !important;
  overflow: visible !important;
}

.td-work-assignment-modal[hidden] { display: none !important; }

.td-work-assignment-modal {
  position: fixed;
  inset: 0;
  z-index: 41000;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: left;
}

.td-work-assignment-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(2px);
}

.td-work-assignment-panel {
  position: relative;
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.td-work-assignment-panel header,
.td-work-assignment-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
}

.td-work-assignment-panel header { border-bottom: 1px solid #e2e8f0; }
.td-work-assignment-panel footer { justify-content: flex-end; padding-top: 0; }
.td-work-assignment-panel h3 { margin: 3px 0 0; color: #334155; font-size: 18px; }
.td-work-assignment-panel small { color: #64748b; font-size: 11px; text-transform: uppercase; }

.td-work-assignment-close {
  width: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font-size: 22px;
  cursor: pointer;
}

.td-work-assignment-fields {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  gap: 12px;
  padding: 20px;
}

.td-work-assignment-fields label span {
  display: block;
  margin-bottom: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.td-work-assignment-fields select,
.td-work-assignment-fields input {
  width: 100%;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
}

@media (max-width: 680px) {
  .td-work-assignment-fields { grid-template-columns: 1fr; }
}
/* Wartungsplan: Baugruppe belongs to the plan; rows show Bauteil and Prüfschritt. */
#detail .pos-row .imported-pos.imported-pos-compact {
  display: grid !important;
  gap: 4px !important;
}

#detail .imported-pos-compact .imported-pos-part {
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  color: #64748b !important;
}

#detail .imported-pos-compact .imported-pos-part small,
#detail .imported-pos-compact .imported-pos-specs small {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#detail .imported-pos-compact .imported-pos-part b {
  font-size: 12px !important;
  font-weight: 600 !important;
}

#detail .imported-pos-compact .imported-pos-task > b {
  display: block !important;
  color: #1f2937 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#detail .imported-pos-compact .imported-pos-specs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  color: #64748b !important;
}

#detail .imported-pos-compact .imported-pos-specs span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

#detail .imported-pos-compact .imported-pos-specs b {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#detail .plan-card .add-row {
  display: grid !important;
  grid-template-columns: minmax(155px, .55fr) minmax(145px, .45fr) minmax(250px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
}

#detail .plan-card .add-row .new-pos-group,
#detail .plan-card .add-row .new-pos-part,
#detail .plan-card .add-row .new-pos-task {
  min-width: 0 !important;
}

#detail .pos-list .pos-group-heading {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 12px 0 4px !important;
  padding: 9px 12px !important;
  border: 1px solid #d7e0e8 !important;
  border-radius: 9px !important;
  background: #eef3f6 !important;
  color: #334155 !important;
  list-style: none !important;
}

#detail .pos-list .pos-group-heading span {
  color: #7a8998 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

#detail .pos-list .pos-group-heading b {
  font-size: 14px !important;
  font-weight: 600 !important;
}

#detail .plan-structure-summary {
  color: #526477 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

#detail .plan-structure-summary b {
  color: #334155 !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  #detail .plan-card .add-row {
    grid-template-columns: 1fr !important;
  }
}
#detail .plan-card .plan-meta-row {
  display: grid !important;
  grid-template-columns: minmax(135px, .75fr) minmax(280px, 1.5fr) minmax(155px, .85fr) minmax(190px, 1fr) minmax(100px, .55fr) !important;
  align-items: end !important;
  gap: 12px !important;
}

#detail .plan-card .plan-meta-row .ps-item {
  min-width: 0 !important;
}

#detail .plan-card .plan-interval-select {
  width: 100% !important;
  min-width: 0 !important;
}

#detail .plan-custom-interval {
  display: grid !important;
  grid-template-columns: 78px minmax(145px, 1fr) !important;
  align-items: end !important;
  gap: 6px 8px !important;
  width: 100% !important;
  margin-top: 7px !important;
}

#detail .plan-custom-interval label {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#detail .plan-custom-interval label small {
  color: #718096 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#detail .plan-custom-interval input,
#detail .plan-custom-interval select {
  width: 100% !important;
  min-width: 0 !important;
}

#detail .plan-custom-interval-help {
  grid-column: 1 / -1 !important;
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

#detail .manual-plan-custom-interval {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 5px !important;
}

#detail .manual-plan-custom-interval input {
  width: 64px !important;
  min-width: 64px !important;
}

#detail .manual-plan-custom-interval select {
  min-width: 118px !important;
}

#detail .plan-card .plan-meta-row .ps-item > b {
  display: block !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  #detail .plan-card .plan-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  #detail .plan-card .plan-meta-row {
    grid-template-columns: 1fr !important;
  }
}

/* Compact two-row maintenance schedule. Actions stay in the plan header. */
#detail .plan-card-head.plan-card-head-compact {
  display: block !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
}

#detail .plan-card-head.plan-card-head-compact .plan-meta-row {
  display: grid !important;
  grid-template-columns: 220px 180px minmax(300px, 430px) !important;
  grid-template-areas:
    "interval reminder reminder"
    "last next next" !important;
  align-items: end !important;
  justify-content: start !important;
  gap: 10px 12px !important;
  width: 100% !important;
  max-width: 980px !important;
}

#detail .plan-card-head.plan-card-head-compact .plan-meta-row.is-custom {
  grid-template-columns: 220px 92px 200px 230px !important;
  grid-template-areas:
    "interval value unit reminder"
    "last next next next" !important;
}

#detail .plan-card-head-compact .ps-item-interval { grid-area: interval !important; }
#detail .plan-card-head-compact .ps-item-value { grid-area: value !important; }
#detail .plan-card-head-compact .ps-item-unit { grid-area: unit !important; }
#detail .plan-card-head-compact .ps-item-reminder { grid-area: reminder !important; }
#detail .plan-card-head-compact .ps-item-last { grid-area: last !important; }
#detail .plan-card-head-compact .ps-item-next { grid-area: next !important; }

#detail .plan-card-head-compact .plan-next-summary {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #d7e0e8 !important;
  border-radius: 10px !important;
  background: #f5f7f9 !important;
  color: #263b4e !important;
}

#detail .plan-card-head-compact .plan-next-summary b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#detail .plan-card-head-compact .plan-date-input,
#detail .plan-card-head-compact .plan-interval-select,
#detail .plan-card-head-compact .plan-reminder-select,
#detail .plan-card-head-compact .plan-custom-interval-value,
#detail .plan-card-head-compact .plan-custom-interval-unit {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px !important;
}

#detail .plan-card-head-compact .plan-status-badge {
  min-height: 26px !important;
  padding: 0 9px !important;
}

#detail .bg-group-head .plan-head-checklist {
  border-color: #c7d3dd !important;
  background: #f5f8fa !important;
  color: #324b60 !important;
}

@media (max-width: 1100px) {
  #detail .plan-card-head.plan-card-head-compact .plan-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "interval reminder"
      "last next" !important;
    max-width: none !important;
  }

  #detail .plan-card-head.plan-card-head-compact .plan-meta-row.is-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "interval interval"
      "value unit"
      "last reminder"
      "next next" !important;
  }
}

@media (max-width: 620px) {
  #detail .plan-card-head.plan-card-head-compact .plan-meta-row,
  #detail .plan-card-head.plan-card-head-compact .plan-meta-row.is-custom {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "interval"
      "value"
      "unit"
      "last"
      "reminder"
      "next" !important;
  }
}

/* Unified, quieter page titles across all primary routes. */
.content .page > .greeting h2 {
  margin: 0 !important;
  color: #52677a !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 700px) {
  .content .page > .greeting h2 {
    font-size: 22px !important;
  }
}

/* Keep the complete customer name on one line without an ellipsis. The
   runtime reduces only this label's font size when the available sidebar
   width is too small. */
.app .sidebar .td-sidebar-brand {
  min-width: 0 !important;
}

.app .sidebar #sidebarClientName {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.08 !important;
}