/* -------------------- */
/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden; /* Verhindert horizontalen Slider */
}

/* -------------------- */
/* TOP BAR */
.top-bar {
  min-height: 72px;
  background: #ffffff;
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 300px);
  z-index: 150;
  border-bottom: 1px solid #e1e6e9;
}

@media print {
  @page org-chart {
    size: A4 landscape;
    margin: 0;
  }

  html,
  body {
    height: auto;
    margin: 0;
    overflow: hidden;
    width: auto;
  }

  body.print-org-chart {
    background: #fff;
    height: 210mm;
    page: org-chart;
    max-height: 210mm;
    max-width: 297mm;
    overflow: hidden;
    padding: 8mm;
    width: 297mm;
  }

  body.print-org-chart * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    visibility: hidden;
  }

  body.print-org-chart .top-bar,
  body.print-org-chart .sidebar,
  body.print-org-chart .module-topbar,
  body.print-org-chart #orgUnitTableContainer,
  body.print-org-chart #orgStyleTableContainer {
    display: none !important;
  }

  body.print-org-chart .main-content,
  body.print-org-chart .time-admin-shell {
    height: 0;
    margin: 0;
    min-height: 0;
    overflow: visible;
    padding: 0;
    position: static;
  }

  body.print-org-chart .org-print-card,
  body.print-org-chart .org-print-card * {
    visibility: visible;
  }

  body.print-org-chart .org-print-card {
    break-after: avoid;
    break-inside: avoid;
    box-shadow: none;
    height: 194mm;
    left: 8mm;
    margin: 0;
    overflow: hidden;
    page-break-after: avoid;
    page-break-inside: avoid;
    padding: 0;
    position: absolute;
    top: 8mm;
    width: 281mm;
  }

  body.print-org-chart .org-chart-actions {
    display: none;
  }

  body.print-org-chart .org-chart {
    left: 50%;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    transform: translateX(-50%) scale(var(--org-print-scale, 1));
    transform-origin: top center;
    width: max-content;
  }

  body.print-org-chart .org-chart-node {
    -webkit-print-color-adjust: exact;
    box-shadow: none;
    print-color-adjust: exact;
  }
}

/* Linke Gruppe */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex-wrap: wrap;
}

.module-topbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
}

.module-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.module-topbar-actions[hidden] {
  display: none;
}

.module-topbar-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.module-topbar-actions button:hover {
  background: #303d42;
}

.module-topbar-actions button.active {
  background: #5c2422;
  color: #ffffff;
}

.module-topbar-actions button.active:hover {
  background: #6a2a27;
}

.module-topbar-title strong {
  color: #101719;
  font-size: 22px;
  line-height: 1.1;
}

.module-topbar-title span {
  color: #606b70;
  font-size: 13px;
  line-height: 1.2;
}

#companyLogo {
  max-height: 40px;
  object-fit: contain;
}

/* Rechte Gruppe */
.topbar-right {
  display: flex;
  align-items: center;
}

/* -------------------- */
/* LAYOUT */
.container {
  display: flex;
  height: 100vh;
  overflow: hidden; /* verhindert Seitenverschieben */
}

/* -------------------- */
/* SIDEBAR */
.sidebar {
  width: 300px;
  height: 100vh;
  background: #20292c;
  color: #ffffff;
  padding: 18px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sidebar-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sidebar-logo-card {
  width: 100%;
  margin-bottom: 38px;
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 8px;
}

.sidebar-logo-card img {
  width: 100%;
  max-height: 54px;
  height: auto;
  display: block;
  object-fit: contain;
}

.sidebar h2 {
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.sidebar li.menu-parent {
  position: relative;
}

.sidebar li.menu-parent .menu-chevron {
  display: none;
}

.sidebar li.menu-parent.open .menu-chevron {
  transform: rotate(180deg);
}

.sidebar li.menu-parent.child-active {
  background-color: rgba(197, 29, 18, 0.18);
}

.sidebar .menu-submenu {
  display: none;
  margin: 2px 0 6px;
  padding: 0;
}

.sidebar li.menu-parent.open + .menu-submenu {
  display: block;
}

.sidebar .menu-subitem {
  margin: 1px 0 1px 46px;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
}

.sidebar .menu-subitem.active {
  background-color: rgba(197, 29, 18, 0.24);
  border-left: 3px solid #c51d12;
  padding-left: 7px;
  color: #ffffff;
}

.sidebar .menu-subitem:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar li.active {
  background-color: rgba(197, 29, 18, 0.28);
  color: #ffffff;
  border-left: 4px solid #c51d12;
  padding-left: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar li:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sidebar li.menu-section-title {
  margin: 0 0 8px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: default;
}

.sidebar li.menu-section-title:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.48);
}

.sidebar li.menu-section-gap {
  margin-top: 38px;
}

.time-admin-shell > .time-admin-toolbar {
  display: none;
}

.sidebar-account {
  flex-shrink: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.sidebar-account-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: #20292c;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-user-text strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-text span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.sidebar-account-actions button,
.sidebar-role-pill,
.sidebar-logout {
  height: 34px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 700;
}

.sidebar-account-actions button {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.sidebar-account-actions button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-role-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-role-pill.role-admin {
  background: rgba(197, 29, 18, 0.24);
  color: #ffd8d4;
}

.sidebar-role-pill.role-manager {
  background: rgba(184, 121, 0, 0.26);
  color: #ffe4ad;
}

.sidebar-role-pill.role-user {
  background: rgba(67, 138, 74, 0.28);
  color: #d3f0d7;
}

.sidebar-logout {
  width: 100%;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}

.sidebar-logout:hover {
  background: rgba(197, 29, 18, 0.7);
}

/* -------------------- */
/* CONTENT */
.main-content {
  flex: 1;
  min-width: 0; /* Wichtig: verhindert horizontalen Overflow */
  padding: 96px 20px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f8f8f8;
}

/* -------------------- */
/* ACCOUNT MENU */
.account-menu {
  position: relative;
  cursor: pointer;
}

.account-menu span {
  font-weight: bold;
}

.account-menu .dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #f4f4f4;
  list-style: none;
  width: 180px;
  border: 1px solid #d9e0e4;
  z-index: 100;
}

.account-menu .dropdown li {
  padding: 10px;
  cursor: pointer;
}

.account-menu .dropdown li:hover {
  background: #cccccc;
  color: #fff;
}

/* -------------------- */
/* MODAL */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #ffffff;
  margin: 8% auto;
  padding: 28px;
  border-radius: 10px;
  border: 1px solid #e1e6e9;
  width: 360px;
  max-width: calc(100% - 32px);
  position: relative;
  box-sizing: border-box;
}

.modal-content h2 {
  margin: 0 0 20px;
  padding-right: 24px;
  font-size: 20px;
  color: #101719;
}

.modal-content label {
  display: block;
  margin-bottom: 6px;
  color: #344044;
  font-size: 13px;
  font-weight: 700;
}

.modal-content input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  margin: 0 0 16px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal-content input:focus {
  outline: none;
  border-color: #20292c;
  box-shadow: 0 0 0 3px rgba(32, 41, 44, 0.12);
}

.modal-content button {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  padding: 0 14px;
  background: #20292c;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 700;
  transition: background 0.15s ease;
}

.modal-content button:hover {
  background: #303d42;
}

.modal-content p {
  margin-top: 14px;
  font-size: 13px;
}

.modal-content .close {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: #5d686d;
  cursor: pointer;
  transition: color 0.15s ease;
}

.modal-content .close:hover {
  color: #101719;
}

/* -------------------- */
/* HAMBURGER */
#hamburgerBtn {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: #20292c;
  cursor: pointer;
}

/* -------------------- */
/* MOBILE */
@media (max-width: 768px) {

  #hamburgerBtn {
    display: block;
    order: -1;
  }

  .top-bar {
    width: 100%;
  }

  .topbar-left {
    gap: 8px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    background: #20292c;
    padding-top: 18px;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .main-content.shifted {
    margin-left: 250px;
    transition: margin-left 0.3s ease;
  }
}

/* -------------------- */
/* USER CIRCLE */
.username-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #ffcccc;
  color: #c51d12;
  font-weight: bold;
  font-size: 18px;
  border: 1px solid rgba(197, 29, 18, 0.25);
}

/* -------------------- */
/* MENU ICONS */
.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

#menuList li.active .menu-icon {
  filter: brightness(0) invert(1);
}

/* -------------------- */
/* DASHBOARD */
.dashboard-shell {
  padding: 6px 0;
}

.dashboard-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
}

.dashboard-metric-card {
  min-height: 132px;
}

.dashboard-card-label {
  color: #5f6b70;
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.dashboard-metric-card strong {
  color: #20292c;
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 14px;
}

.dashboard-card-detail {
  align-items: center;
  border-top: 1px solid #edf1f3;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.dashboard-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-card-detail span,
.dashboard-metric-card small {
  color: #6b777c;
  font-size: 0.82rem;
}

.dashboard-card-detail b {
  color: #c51d12;
  font-size: 1.05rem;
}

.dashboard-metric-card small {
  display: block;
  margin-top: 8px;
}

.dashboard-card-detail small {
  display: block;
  font-size: 0.74rem;
  margin-top: 2px;
}

.dashboard-account-table-wrap {
  border: 1px solid #dde4e8;
  border-radius: 8px;
  overflow: visible;
}

.dashboard-account-table {
  border-collapse: collapse;
  min-width: 960px;
  width: 100%;
}

.dashboard-account-table th,
.dashboard-account-table td {
  border-bottom: 1px solid #edf1f3;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
}

.dashboard-account-table th {
  background: #f2f5f7;
  color: #20292c;
  font-weight: 800;
}

.dashboard-account-table td:first-child span {
  color: #6b777c;
  display: block;
  font-size: 0.78rem;
  margin-top: 2px;
}

.dashboard-account-table .positive {
  color: #16803a;
  font-weight: 800;
}

.dashboard-account-table .negative {
  color: #c51d12;
  font-weight: 800;
}

.dashboard-account-note {
  color: #6b777c;
  display: block;
  margin-top: 10px;
}

.dashboard-metric-error {
  border-color: #f2c4c4;
}

/* -------------------- */
/* TIME ADMIN LAYOUT */
.time-admin-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.time-admin-card h3 {
  margin: 0 0 14px;
  color: #101719;
}

.time-admin-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.time-admin-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.time-admin-actions button:hover {
  background: #303d42;
}

.time-admin-actions button:active {
  transform: translateY(1px);
}

.time-admin-toolbar {
  display: none;
}

.time-admin-form-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 190px);
  gap: 12px;
  align-items: end;
}

.time-admin-filters > .time-admin-form-row:not(.time-admin-date-row) {
  grid-template-columns: minmax(260px, 1fr);
}

.time-admin-date-row {
  grid-template-columns: repeat(2, minmax(150px, 190px));
  margin-top: 12px;
}

.time-admin-top-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(520px, 1.55fr);
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}

.time-admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.time-admin-employee-field {
  min-width: 0;
}

.time-admin-form-group label {
  color: #344044;
  font-size: 13px;
  font-weight: 700;
}

.time-admin-form-group select,
.time-admin-form-group input {
  height: 38px;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
  background: #ffffff;
  color: #101719;
}

.time-admin-form-group select:focus,
.time-admin-form-group input:focus {
  outline: none;
  border-color: #20292c;
  box-shadow: 0 0 0 3px rgba(32, 41, 44, 0.12);
}

.time-admin-primary-actions {
  margin-top: 14px;
}

#timeAdminSummary {
  line-height: 1.5;
}

.time-admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.time-admin-summary-grid > div {
  min-height: 48px;
  padding: 10px 12px;
  background: #f7f9fa;
  border: 1px solid #edf0f2;
  border-radius: 8px;
}

.time-admin-summary-grid strong {
  display: block;
  margin-bottom: 2px;
  color: #5d686d;
  font-size: 12px;
}

.time-admin-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.7fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.time-subpage-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.time-absence-requests-grid {
  margin-top: 0;
}

.time-assignment-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.time-assignment-employee {
  flex: 0 1 360px;
}

.time-assignment-toolbar .time-admin-actions {
  flex: 0 0 auto;
}

.project-analysis-category .custom-create-btn {
  display: none;
}

.project-detail-shell {
  gap: 16px;
}


.company-detail-form {
  margin-top: 18px;
}

.company-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.company-detail-wide {
  grid-column: span 2;
}

.company-detail-options,
.company-detail-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.company-detail-options label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
}

.company-detail-options input {
  width: 18px;
  height: 18px;
}

.company-detail-message {
  color: #16834a;
  font-weight: 700;
}

.company-detail-message.is-error {
  color: #b42318;
}

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

  .company-detail-wide {
    grid-column: auto;
  }
}

.project-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.project-detail-title {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.project-detail-title h3,
.project-add-sub-card h3,
.project-detail-card-title h3 {
  margin: 0;
}

.project-detail-title p {
  margin: 4px 0 0;
  color: #5d686d;
  font-weight: 600;
}

.project-detail-name-row {
  display: flex;
  gap: 18px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 4px;
}

.project-detail-name-row p {
  margin: 0;
  min-width: 220px;
}

.project-main-delivery {
  min-width: 190px;
  margin: 0;
}

.project-main-delivery span {
  display: block;
  margin-bottom: 6px;
  color: #344044;
  font-size: 12px;
  font-weight: 800;
}

.project-main-delivery input {
  min-height: 38px;
  font-size: 14px;
}

.project-back-btn,
.project-sub-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.project-back-btn:hover,
.project-sub-actions button:hover {
  background: #303d42;
}

.project-detail-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-detail-meta > div {
  min-width: 140px;
  padding: 10px 12px;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  background: #f7f9fa;
}

.project-detail-meta strong,
.sub-meta {
  display: block;
  color: #5d686d;
  font-size: 12px;
}

.project-sub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-sub-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.project-sub-main {
  min-width: 0;
}

.project-sub-main .view-mode {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-sub-main .sub-planning-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  color: #5d686d;
  font-size: 12px;
}

.project-sub-main .sub-planning-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #e1e7ea;
  border-radius: 999px;
  background: #ffffff;
}

.project-sub-main .sub-planning-meta strong {
  color: #20292c;
}

.project-sub-main .edit-name {
  width: 100%;
  max-width: 520px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
}

.project-sub-main .edit-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  width: 100%;
}

.project-sub-main .edit-mode label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #344044;
  font-size: 11px;
  font-weight: 700;
}

.project-sub-main .edit-type {
  height: 36px;
  min-width: 140px;
  padding: 0 10px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
  background: #ffffff;
}

.project-sub-main .edit-delivery-date,
.project-sub-main .edit-size-text {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
  background: #ffffff;
}

.project-sub-main .edit-size-text {
  width: 150px;
}

.project-sub-check,
.project-add-sub-check label {
  min-height: 36px;
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
}

.project-sub-check input[type="checkbox"],
.project-add-sub-check input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  accent-color: #c51d12;
}

.project-sub-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-empty-state {
  margin: 0;
  color: #5d686d;
}

.project-add-sub-form {
  grid-template-columns: 180px 170px 140px auto;
  align-items: end;
  max-width: 640px;
}

.project-add-sub-form .time-admin-form-group {
  min-width: 0;
}

.project-add-sub-check {
  align-self: end;
}

.project-add-sub-actions {
  align-self: end;
}

.switchgear-planning-card {
  overflow: hidden;
}

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

.switchgear-planning-toolbar h3 {
  margin: 0;
}

.switchgear-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.switchgear-planning-toolbar button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.switchgear-filter-row {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(110px, 140px) minmax(90px, 110px) minmax(95px, 115px) minmax(120px, 135px) minmax(110px, 125px) minmax(105px, 125px) minmax(105px, 125px) minmax(130px, 160px);
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.switchgear-filter-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #344044;
  font-size: 12px;
  font-weight: 800;
}

.switchgear-filter-row input,
.switchgear-filter-row select {
  height: 32px;
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid #cbd4da;
  border-radius: 6px;
  background: #ffffff;
  font-size: 12px;
}

.switchgear-group-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  justify-content: flex-end;
  background: rgba(16, 23, 25, 0.28);
}

.switchgear-group-drawer.open {
  display: flex;
}

.switchgear-group-drawer-panel {
  width: min(420px, 92vw);
  height: 100%;
  background: #ffffff;
  border-left: 1px solid #d9e0e4;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.switchgear-group-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.switchgear-group-drawer-header h3 {
  margin: 0;
}

.switchgear-group-drawer-header p {
  margin: 5px 0 0;
  color: #5d686d;
  font-size: 12px;
  line-height: 1.35;
}

.switchgear-group-drawer-header button,
.switchgear-group-actions button,
.switchgear-group-add button,
.switchgear-group-item button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.switchgear-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

.switchgear-group-list > p {
  margin: 0;
  color: #5d686d;
}

.switchgear-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e1e6e9;
  border-radius: 8px;
  background: #f7f9fa;
}

.switchgear-group-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.switchgear-group-item-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

.switchgear-group-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}

.switchgear-group-add {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.switchgear-group-add label {
  color: #344044;
  font-size: 12px;
  font-weight: 800;
}

.switchgear-group-add > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.switchgear-group-add input,
.switchgear-group-add select {
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #cbd4da;
  border-radius: 8px;
  background: #ffffff;
}

.switchgear-group-actions {
  display: flex;
  justify-content: flex-end;
}

.switchgear-planning-scroll {
  width: 100%;
  max-height: calc(100vh - 250px);
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #d9e0e4;
  border-radius: 8px;
  background: #ffffff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.switchgear-planning-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.switchgear-planning-table {
  width: 100%;
  min-width: 1420px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}

.switchgear-planning-table th,
.switchgear-planning-table td {
  border: 1px solid #d9e0e4;
  padding: 3px 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.switchgear-planning-table th {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 86px;
  background: #f5f7f8;
  color: #20292c;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  vertical-align: bottom;
}

.switchgear-planning-table th.switchgear-work-header {
  min-width: 25px;
  width: 25px;
  max-width: 25px;
  writing-mode: sideways-lr;
  transform: none;
  text-align: center;
  color: #101719;
  background: #f7f9fa;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  vertical-align: middle;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.switchgear-planning-table th.switchgear-size-header {
  min-width: 25px;
  width: 25px;
  max-width: 25px;
  writing-mode: sideways-lr;
  transform: none;
  text-align: center;
  color: #101719;
  background: #f7f9fa;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  vertical-align: middle;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

@supports not (writing-mode: sideways-lr) {
  .switchgear-planning-table th.switchgear-work-header,
  .switchgear-planning-table th.switchgear-size-header {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

.switchgear-planning-table th.switchgear-work-header.switchgear-group-material {
  background: #eef4f8;
}

.switchgear-planning-table th.switchgear-work-header.switchgear-group-planning {
  background: #eef2ff;
}

.switchgear-planning-table th.switchgear-work-header.switchgear-group-assembly {
  background: #edf7ed;
}

.switchgear-planning-table th.switchgear-work-header.switchgear-group-wiring {
  background: #fff4df;
}

.switchgear-planning-table th.switchgear-work-header.switchgear-group-testing {
  background: #f6ecfb;
}

.switchgear-planning-table th.switchgear-work-header.switchgear-group-projectLeader {
  background: #f7f9fa;
}

.switchgear-planning-table th.switchgear-group-material,
.switchgear-planning-table td.switchgear-group-material {
  background: #eef4f8;
}

.switchgear-planning-table th.switchgear-group-planning,
.switchgear-planning-table td.switchgear-group-planning {
  background: #eef2ff;
}

.switchgear-planning-table th.switchgear-group-assembly,
.switchgear-planning-table td.switchgear-group-assembly {
  background: #edf7ed;
}

.switchgear-planning-table th.switchgear-group-wiring,
.switchgear-planning-table td.switchgear-group-wiring {
  background: #fff4df;
}

.switchgear-planning-table th.switchgear-group-testing,
.switchgear-planning-table td.switchgear-group-testing {
  background: #f6ecfb;
}

.switchgear-planning-table th.switchgear-group-projectLeader,
.switchgear-planning-table td.switchgear-group-projectLeader {
  background: #f7f9fa;
}

.switchgear-planning-table .switchgear-field-materialOrdered {
  border-left: 2px solid #7f9cac;
}

.switchgear-planning-table .switchgear-field-planStarted {
  border-left: 2px solid #94a9ea;
}

.switchgear-planning-table .switchgear-field-assemblyStarted {
  border-left: 2px solid #91bc8d;
}

.switchgear-planning-table .switchgear-field-wiringStarted {
  border-left: 2px solid #d6aa5d;
}

.switchgear-planning-table .switchgear-field-testingDone {
  border-left: 2px solid #b48aca;
}

.switchgear-planning-table .switchgear-field-projectLeader {
  border-left: 2px solid #b48aca;
}

.switchgear-planning-table .switchgear-field-cabinetComplete {
  border-left: 2px solid #11181b;
}

.switchgear-planning-table th.switchgear-field-materialOrdered {
  border-left: 1px solid #d9e0e4;
  border-right: 2px solid #7f9cac;
}

.switchgear-planning-table th.switchgear-field-planStarted {
  border-left: 1px solid #d9e0e4;
  border-right: 2px solid #94a9ea;
}

.switchgear-planning-table th.switchgear-field-assemblyStarted {
  border-left: 1px solid #d9e0e4;
  border-right: 2px solid #91bc8d;
}

.switchgear-planning-table th.switchgear-field-wiringStarted {
  border-left: 1px solid #d9e0e4;
  border-right: 2px solid #d6aa5d;
}

.switchgear-planning-table th.switchgear-field-testingDone {
  border-left: 1px solid #d9e0e4;
  border-right: 2px solid #b48aca;
}

.switchgear-planning-table th.switchgear-field-projectLeader {
  border-left: 1px solid #d9e0e4;
  border-right: 2px solid #b48aca;
}

.switchgear-planning-table th.switchgear-field-cabinetComplete {
  border-left: 1px solid #3a464b;
  border-right: 2px solid #11181b;
}

.switchgear-planning-table th.switchgear-group-finish,
.switchgear-planning-table td.switchgear-group-finish {
  background: #20292c;
  border-color: #3a464b;
  color: #ffffff;
}

.switchgear-planning-table th.switchgear-group-finish {
  color: #ffffff;
}

.switchgear-planning-table th.switchgear-employee-header {
  color: #101719;
}

.switchgear-planning-table th.switchgear-notes-header,
.switchgear-planning-table td.switchgear-notes-cell {
  width: 100%;
  min-width: 120px;
}

.switchgear-planning-table th.switchgear-sticky-id,
.switchgear-planning-table th.switchgear-sticky-project,
.switchgear-planning-table th.switchgear-sticky-customer,
.switchgear-planning-table th.switchgear-sticky-delivery,
.switchgear-planning-table th.switchgear-notes-header,
.switchgear-planning-table th.switchgear-house-header {
  vertical-align: middle;
  padding: 8px 6px;
  background: #f1f4f6;
}

.switchgear-planning-table th.switchgear-house-header {
  text-align: center;
}

.switchgear-planning-table tbody tr {
  background: #ffffff;
}

.switchgear-planning-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.switchgear-group-spacer td {
  height: 12px;
  padding: 0;
  border: 0;
  background: #ffffff;
}

.switchgear-group-row td {
  position: sticky;
  left: 0;
  z-index: 4;
  padding: 5px 8px;
  background: #687276;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0;
}

.switchgear-planning-table tbody tr.switchgear-saving {
  opacity: 0.65;
}

.switchgear-planning-table tbody tr.switchgear-save-ok {
  background: #eaf7ed;
}

.switchgear-planning-table tbody tr.switchgear-save-error {
  background: #fff1f0;
}

.switchgear-planning-table .switchgear-id {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  font-weight: 800;
  color: #20292c;
}

.switchgear-project-cell {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
}

.switchgear-customer-cell {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
}

.switchgear-sticky-col {
  position: sticky;
  z-index: 3;
  background: inherit;
}

.switchgear-planning-table th.switchgear-sticky-col {
  z-index: 12;
  background: #f2f5f7;
}

.switchgear-sticky-id {
  left: 0;
}

.switchgear-sticky-project {
  left: 118px;
}

.switchgear-sticky-customer {
  left: 328px;
}

.switchgear-sticky-delivery {
  left: 488px;
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}

.switchgear-project-cell strong,
.switchgear-project-cell span,
.switchgear-customer-cell strong,
.switchgear-customer-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.switchgear-project-cell span,
.switchgear-customer-cell span {
  margin-top: 3px;
  color: #5d686d;
}

.switchgear-planning-table input[type="date"],
.switchgear-planning-table input[type="text"] {
  height: 26px;
  min-width: 68px;
  padding: 0 5px;
  border: 1px solid #cbd4da;
  border-radius: 6px;
  background: #ffffff;
  font-size: 11px;
}

.switchgear-planning-table input[type="date"] {
  width: 92px;
  padding: 0 3px;
}

.switchgear-planning-table input.switchgear-date-input {
  border-width: 2px;
}

.switchgear-planning-table input.switchgear-size-input[type="text"] {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  text-align: center;
}

.switchgear-date-missing {
  border-color: #101719 !important;
  background: #101719 !important;
  color: #ffffff !important;
}

.switchgear-date-overdue {
  border-color: #ffd8d2 !important;
  background: #ffd8d2 !important;
  color: #8f160b !important;
}

.switchgear-date-thisWeek {
  border-color: #ffe7a8 !important;
  background: #ffe7a8 !important;
  color: #7a5200 !important;
}

.switchgear-date-nextWeek,
.switchgear-date-weekAfterNext {
  border-color: #d9edff !important;
  background: #d9edff !important;
  color: #174f78 !important;
}

.switchgear-date-thisMonth,
.switchgear-date-nextMonth {
  border-color: #dff3df !important;
  background: #dff3df !important;
  color: #24612a !important;
}

.switchgear-date-later {
  border-color: #eef2f4 !important;
  background: #eef2f4 !important;
  color: #20292c !important;
}

.switchgear-planning-table input.switchgear-employee-input[type="text"] {
  height: 26px;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  padding: 0 3px;
  border: 1px solid #cbd4da;
  border-radius: 6px;
  background: #ffffff;
  font-size: 11px;
  box-sizing: border-box;
}

.switchgear-planning-table input.switchgear-employee-input::-webkit-calendar-picker-indicator {
  display: none !important;
}

.switchgear-planning-table .switchgear-notes-input {
  width: 100%;
  min-width: 130px;
}

.switchgear-plan-cell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  min-width: 112px;
}

.project-planning-toolbar-card {
  overflow: hidden;
}

#projectPlanningContainer {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.project-planning-category {
  overflow: hidden;
}

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

.project-planning-category h4 {
  margin: 0;
  color: #20292c;
  font-size: 13px;
  font-weight: 800;
}

.project-planning-category-head span {
  color: #5d686d;
  font-size: 12px;
  font-weight: 700;
}

.project-planning-filter-row {
  grid-template-columns: minmax(220px, 1fr) minmax(120px, 150px) repeat(4, minmax(105px, 125px));
  margin-bottom: 10px;
}

.project-planning-scroll {
  max-height: none;
}

.project-planning-table {
  min-width: 1220px;
}

.project-planning-table th.project-planning-id,
.project-planning-table td.project-planning-id {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.project-planning-table th.project-planning-name,
.project-planning-table td.project-planning-name {
  width: 230px;
  min-width: 230px;
  max-width: 230px;
}

.project-planning-table th.project-planning-customer,
.project-planning-table td.project-planning-customer {
  width: 170px;
  min-width: 170px;
  max-width: 170px;
}

.project-planning-table th.project-planning-delivery,
.project-planning-table td.project-planning-delivery {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}

.project-planning-table th.project-planning-notes,
.project-planning-table td.project-planning-notes {
  width: 100%;
  min-width: 160px;
}

.project-planning-table th.project-planning-id,
.project-planning-table th.project-planning-name,
.project-planning-table th.project-planning-customer,
.project-planning-table th.project-planning-delivery,
.project-planning-table th.project-planning-notes {
  vertical-align: middle;
  padding: 8px 6px;
  background: #f1f4f6;
}

.project-planning-customer strong,
.project-planning-customer span,
.project-planning-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-planning-customer span {
  margin-top: 3px;
  color: #5d686d;
}

.project-planning-sub-row td {
  background-color: #fbfcfd;
}

.project-planning-main-row.project-planning-has-sub td:first-child,
.project-planning-sub-row td:first-child {
  position: relative;
}

.project-planning-sub-row td:first-child {
  padding-left: 14px;
}

.project-planning-main-row.project-planning-has-sub td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #20292c;
}

.project-planning-sub-indent {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 10px;
}

.project-planning-sub-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #20292c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.project-planning-sub-row.project-planning-sub-n .project-planning-sub-type {
  background: #20292c;
}

.project-planning-sub-row.project-planning-sub-r .project-planning-sub-type {
  background: #20292c;
}

.project-planning-sub-row .project-planning-name span {
  display: block;
  margin-top: 3px;
  color: #7a858a;
  font-size: 11px;
  font-weight: 600;
}

.project-planning-table th.project-planning-group-finish,
.project-planning-table td.project-planning-group-finish {
  background: #20292c;
  border-color: #3a464b;
  color: #ffffff;
}

.project-planning-table th.project-planning-group-engineeringM,
.project-planning-table td.project-planning-group-engineeringM {
  background: #edf1ff;
  border-color: #b5c2ff;
}

.project-planning-table th.project-planning-group-engineeringE,
.project-planning-table td.project-planning-group-engineeringE {
  background: #f0ecff;
  border-color: #c2b2f0;
}

.project-planning-table th.project-planning-group-engineeringM .switchgear-auto-check,
.project-planning-table td.project-planning-group-engineeringM .switchgear-auto-check,
.project-planning-table th.project-planning-group-engineeringE .switchgear-auto-check,
.project-planning-table td.project-planning-group-engineeringE .switchgear-auto-check {
  cursor: not-allowed;
}

.project-planning-table th.project-planning-group-materialM,
.project-planning-table td.project-planning-group-materialM {
  background: #eef4f8;
  border-color: #9bb2bf;
}

.project-planning-table th.project-planning-group-materialE,
.project-planning-table td.project-planning-group-materialE {
  background: #edf8ef;
  border-color: #97c99e;
}

.project-planning-table th.project-planning-group-construction,
.project-planning-table td.project-planning-group-construction {
  background: #fff4df;
  border-color: #e2ba65;
}

.project-planning-table th.project-planning-group-projectLeader,
.project-planning-table td.project-planning-group-projectLeader {
  background: #f5ecfb;
  border-color: #c591dc;
}

.project-planning-table .project-planning-field-engineeringMStarted,
.project-planning-table .project-planning-field-engineeringEStarted,
.project-planning-table .project-planning-field-materialM,
.project-planning-table .project-planning-field-materialE,
.project-planning-table .project-planning-field-inConstruction,
.project-planning-table .project-planning-field-projectLeader,
.project-planning-table .project-planning-field-engineeringFinished,
.project-planning-table .project-planning-field-orderInHouse {
  border-left-width: 2px;
}

.project-planning-table .project-planning-field-engineeringMStarted {
  border-left-color: #8798e8;
}

.project-planning-table .project-planning-field-engineeringEStarted {
  border-left-color: #a586df;
}

.project-planning-table .project-planning-field-materialM {
  border-left-color: #7f9cac;
}

.project-planning-table .project-planning-field-materialE {
  border-left-color: #7cb784;
}

.project-planning-table .project-planning-field-inConstruction {
  border-left-color: #d6a544;
}

.project-planning-table .project-planning-field-projectLeader {
  border-left-color: #b96ed5;
}

.project-planning-table .project-planning-field-engineeringFinished {
  border-left-color: #3a464b;
}

.project-planning-table .project-planning-field-orderInHouse {
  border-left-color: #3a464b;
}

.project-planning-employee-cell {
  min-width: 52px;
  width: 52px;
}

.project-planning-employee-input {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  padding: 5px 4px;
  text-align: center;
  text-transform: uppercase;
}

.switchgear-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #344044;
  font-weight: 700;
}

.switchgear-check input,
.switchgear-check-only input {
  width: 13px;
  height: 13px;
  accent-color: #c51d12;
}

.switchgear-check-only input.switchgear-auto-check {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  cursor: not-allowed;
  opacity: 1;
  border: 1px solid #9aa4a9;
  border-radius: 2px;
  background: #ffffff;
  filter: none;
}

.switchgear-check-only input.switchgear-auto-check:checked {
  border-color: #c51d12;
  background: #c51d12;
}

.switchgear-check input[type="checkbox"]:checked,
.switchgear-check-only input[type="checkbox"]:checked,
.project-planning-table input[type="checkbox"]:checked,
.switchgear-planning-table input[type="checkbox"]:checked {
  accent-color: #c51d12;
}

.invoice-switchgear-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.invoice-switchgear-toolbar h3 {
  margin: 0;
}

.invoice-switchgear-toolbar button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.invoice-switchgear-filter-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.invoice-switchgear-filter-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #344044;
  font-size: 11px;
  font-weight: 700;
}

.invoice-switchgear-filter-row input,
.invoice-switchgear-filter-row select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cbd4da;
  border-radius: 7px;
  background: #ffffff;
  color: #11181b;
  font-size: 12px;
}

.invoice-switchgear-scroll {
  overflow: visible;
  border: 1px solid #d9e0e4;
  border-radius: 8px;
  background: #ffffff;
}

.invoice-switchgear-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.invoice-switchgear-table th,
.invoice-switchgear-table td {
  border-bottom: 1px solid #e2e7ea;
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.invoice-switchgear-table th {
  background: #f1f4f6;
  color: #20292c;
  font-weight: 800;
}

.invoice-switchgear-table td span {
  display: block;
  margin-top: 3px;
  color: #5d686d;
}

.invoice-switchgear-status {
  display: inline-block;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf0f2;
  color: #20292c !important;
  font-weight: 800;
}

.invoice-switchgear-check {
  text-align: center;
}

.invoice-switchgear-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #c51d12;
}

.invoice-switchgear-table input[type="date"] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid #cbd4da;
  border-radius: 6px;
}

.switchgear-check-only {
  text-align: center;
  vertical-align: middle;
  min-width: 20px;
  padding-left: 2px;
  padding-right: 2px;
}

.switchgear-group-finish input[type="checkbox"] {
  accent-color: #c51d12;
}

.company-home-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
}

.company-home-layout > div {
  background: #f7f9fa;
  border: 1px solid #e1e6e9;
  border-radius: 8px;
  padding: 18px;
}

.company-home-layout p {
  margin: 8px 0 0;
  color: #4f5b60;
}

.org-chart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  padding: 8px 0;
}

.org-chart-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.org-chart-actions button {
  background: #20292c;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 9px 14px;
}

.org-chart-actions button:hover {
  background: #344247;
}

.org-chart-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.org-chart-header img {
  width: 260px;
  max-width: 40vw;
  height: auto;
}

.org-chart-node {
  min-width: 220px;
  background: #f7f9fa;
  border: 1px solid #d9e1e5;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.org-chart-node strong,
.org-chart-node span,
.org-chart-node small {
  display: block;
}

.org-chart-node span {
  margin-top: 4px;
}

.org-chart-node small {
  margin-top: 5px;
}

.org-chart-employees {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.88em;
  line-height: 1.4;
  margin-top: 10px;
  padding-top: 8px;
}

.org-chart-children {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  min-width: max-content;
}

.org-chart-children-row {
  flex-direction: row;
}

.org-chart-children-column {
  flex-direction: column;
  align-items: center;
}

.org-chart-footnotes {
  color: #111;
  display: grid;
  gap: 6px 28px;
  grid-template-columns: minmax(260px, 1fr);
  margin-top: 12px;
  min-width: 320px;
}

.org-chart-footnote {
  font-size: 0.9em;
  line-height: 1.35;
}

.org-chart-footnote strong {
  margin-right: 4px;
}

.org-chart-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.color-preview-cell,
.color-picker-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.color-picker-row input[type="color"] {
  width: 52px;
  min-height: 34px;
  padding: 2px;
}

.color-preview-dot {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #b8c1c5;
  flex: 0 0 auto;
}

.time-admin-details-card,
.time-admin-timeline-card {
  overflow: hidden;
}

.time-admin-timeline-card {
  padding: 0;
}

.time-admin-timeline-card .time-timeline-list {
  box-shadow: none;
  border-radius: 8px;
}

/* -------------------- */
/* ABSENCE CALENDAR */
.absence-calendar-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.absence-calendar-card {
  min-height: calc(100vh - 120px);
}

.absence-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.absence-calendar-toolbar h3 {
  margin: 0;
  font-size: 24px;
  text-transform: capitalize;
}

.absence-calendar-toolbar p {
  margin-top: 4px;
  color: #606b70;
}

.absence-calendar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.absence-calendar-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #20292c;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.absence-calendar-actions button:hover {
  background: #303d42;
}

.absence-calendar-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(110px, 1fr));
  gap: 8px;
  min-width: 870px;
  overflow-x: auto;
}

.absence-calendar-weekday {
  padding: 0 4px 4px;
  color: #606b70;
  font-size: 13px;
  font-weight: 700;
}

.absence-calendar-day {
  min-height: 118px;
  padding: 10px;
  background: #f7f9fa;
  border: 1px solid #edf0f2;
  border-radius: 8px;
}

.absence-calendar-day.weekend {
  background: #e9edf0;
  border-color: #d9e0e4;
}

.absence-calendar-day.holiday {
  background: #dfe5e8;
  border-color: #cbd4d9;
}

.absence-calendar-day.outside-month {
  opacity: 0.45;
}

.absence-calendar-day.today {
  border: 2px solid rgba(197, 29, 18, 0.45);
  background: rgba(197, 29, 18, 0.06);
}

.absence-calendar-date {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  color: #101719;
  font-weight: 700;
}

.absence-calendar-date small {
  max-width: 70%;
  color: #4f5b60;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.absence-calendar-entries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.absence-calendar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 72px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absence-calendar-chip.approved {
  background: #722ed1;
}

.absence-calendar-chip.requested {
  background: #eb2f96;
}

.absence-calendar-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  color: #606b70;
  font-size: 13px;
}

.absence-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.absence-calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.absence-calendar-legend i.approved {
  background: #722ed1;
}

.absence-calendar-legend i.requested {
  background: #eb2f96;
}

/* -------------------- */
/* STAMPING */
.stamp-admin-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stamp-admin-shell:has(.stamp-admin-stamp-card) {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.stamp-admin-shell:has(.stamp-admin-stamp-card) > .stamp-admin-grid {
  display: contents;
}

.stamp-admin-card {
  min-width: 0;
}

.stamp-admin-stamp-card {
  max-width: 720px;
}

.stamp-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.stamp-requests-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(360px, 1.2fr);
  gap: 18px;
  align-items: start;
}

.stamp-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.stamp-comment-field {
  grid-column: 1 / -1;
}

.stamp-form-grid input[type="datetime-local"] {
  max-width: 220px;
}

.stamp-comment-field textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
}

.stamp-project-field {
  position: relative;
}

.stamp-project-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  margin-top: 8px;
  overflow-y: auto;
}

.stamp-project-result {
  padding: 10px;
  border: 1px solid #e1e6e9;
  border-radius: 8px;
  background: #f7f9fa;
  cursor: pointer;
}

.stamp-project-result:hover {
  background: #eef2f3;
  border-color: #cbd4d9;
}

.stamp-project-result div {
  margin-top: 3px;
  color: #606b70;
  font-size: 13px;
}

.stamp-action-row {
  margin-top: 16px;
}

.stamp-active-status {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 2px solid currentColor;
}

.stamp-active-status strong {
  font-size: 18px;
}

.stamp-active-status span {
  font-size: 13px;
  opacity: 0.9;
}

.stamp-active-status.running {
  color: #1f8b4c;
}

.stamp-active-status.paused {
  color: #d48806;
}

.stamp-active-status.inactive {
  color: #c51d12;
}

.stamp-contact-search {
  max-width: 420px;
  margin-bottom: 16px;
}

.stamp-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.stamp-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e1e6e9;
  border-radius: 8px;
  background: #f8fafb;
}

.stamp-contact-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #c8d0d4;
  color: #ffffff;
  font-weight: 800;
}

.stamp-contact-avatar.present {
  background: #1f8b4c;
}

.stamp-contact-avatar.paused {
  background: #d48806;
}

.stamp-contact-avatar.absent-request {
  background: #7b2cbf;
}

.stamp-contact-name {
  font-weight: 800;
}

.stamp-contact-meta {
  margin-top: 2px;
  color: #606b70;
  font-size: 13px;
}

.stamp-contact-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 13px;
}

.stamp-contact-links a {
  color: #20292c;
  text-decoration: none;
  word-break: break-word;
}

.stamp-contact-links a:hover {
  text-decoration: underline;
}

.stamp-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.stamp-account-tile {
  padding: 16px;
  border: 1px solid #e1e6e9;
  border-radius: 8px;
  background: #f8fafb;
}

.stamp-account-tile span {
  display: block;
  color: #606b70;
  font-size: 13px;
  font-weight: 700;
}

.stamp-account-tile strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.stamp-account-tile strong.positive {
  color: #1f8b4c;
}

.stamp-account-tile strong.negative {
  color: #c51d12;
}

.stamp-account-tile small {
  display: block;
  margin-top: 6px;
  color: #606b70;
}

.stamp-account-date {
  margin-top: 12px;
  color: #606b70;
  font-weight: 700;
}

.stamp-account-note {
  margin: 14px 0 0;
  color: #606b70;
  font-size: 13px;
}

/* -------------------- */
/* USERS */
.user-presence-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.user-presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c8d0d4;
  flex: 0 0 auto;
}

.user-presence-dot.present {
  background: #1f8b4c;
}

.user-presence-dot.paused {
  background: #d48806;
}

.user-presence-dot.absent-request {
  background: #7b2cbf;
}

@media (max-width: 1100px) {
  .time-admin-top-grid,
  .time-admin-workspace,
  .time-subpage-grid,
  .stamp-admin-shell:has(.stamp-admin-stamp-card),
  .stamp-admin-grid,
  .stamp-requests-grid,
  .stamp-form-grid,
  .stamp-account-grid {
    grid-template-columns: 1fr;
  }

  .stamp-admin-shell:has(.stamp-admin-stamp-card) > .stamp-admin-grid {
    display: grid;
  }
}

@media (max-width: 768px) {
  .module-topbar-title strong {
    font-size: 18px;
  }

  .module-topbar-title span {
    display: none;
  }

  .time-admin-card {
    padding: 16px;
  }

  .time-admin-form-row {
    grid-template-columns: 1fr;
  }

  .time-admin-actions button,
  .time-admin-form-group,
  .time-admin-form-group select,
  .time-admin-form-group input {
    width: 100%;
  }

  .time-admin-employee-field {
    min-width: 0;
  }

  .absence-calendar-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .absence-calendar-actions,
  .absence-calendar-actions button {
    width: 100%;
  }
}

/* -------------------- */
/* TABLE */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #eee;
  text-align: left;
}

tr:hover {
  background: #f9f9f9;
}

.table-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.table-container {
  width: 100%;
}

/* -------------------- */
/* INPUT */
input {
  font-size: 16px;
}

/* -------------------- */
/* LOGIN */
body.login-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #f3f5f7;
  color: #20292c;
}

.login-shell {
  width: min(1080px, 100%);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(340px, 0.95fr);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e1e5e8;
  border-radius: 8px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 56px;
  background: #f8fafb;
  border-right: 1px solid #e8ecef;
}

.login-logo {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

.login-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 4px;
}

.login-brand-copy span {
  color: #c51d12;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.login-brand-copy strong {
  font-size: 34px;
  line-height: 1.1;
  color: #20292c;
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 56px;
}

.login-panel-header {
  margin-bottom: 28px;
}

.login-panel-header p {
  margin-bottom: 8px;
  color: #c51d12;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-panel-header h1 {
  font-size: 34px;
  line-height: 1.15;
  color: #101719;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-field label {
  font-size: 14px;
  font-weight: 700;
  color: #344044;
}

.login-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #cfd6db;
  border-radius: 8px;
  background: #ffffff;
  color: #101719;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field input:focus {
  border-color: #c51d12;
  box-shadow: 0 0 0 3px rgba(197, 29, 18, 0.12);
}

.login-submit {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: none;
  border-radius: 8px;
  background: #c51d12;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.login-submit:hover {
  background: #a9150c;
}

.login-submit:active {
  transform: translateY(1px);
}

.login-message {
  min-height: 22px;
  margin-top: 18px;
  color: #c51d12;
  font-weight: 700;
}

@media (max-width: 820px) {
  body.login-page {
    padding: 18px;
  }

  .login-shell {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .login-brand {
    padding: 32px;
    border-right: none;
    border-bottom: 1px solid #e8ecef;
  }

  .login-logo {
    max-width: 420px;
  }

  .login-brand-copy strong,
  .login-panel-header h1 {
    font-size: 28px;
  }

  .login-panel {
    padding: 36px 32px;
  }
}

/* -------------------- */
/* TYPE CIRCLE */
.type-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffcccc;
  border: 2px solid #c51d12;
  color: #c51d12;
  font-weight: bold;
  font-size: 13px;
}

/* -------------------- */
/* TIME ADMIN TIMELINE TABLE - CUSTOM TABLE LOOK */

#timeAdminEntries {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.time-timeline-list {
  width: 100%;
  min-width: 860px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e8eb;
  border-radius: 8px;
  padding: 32px;
  box-sizing: border-box;
}

.time-timeline-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
  user-select: none;
}

.time-timeline-header,
.time-timeline-row {
  display: grid;
  grid-template-columns:
    120px
    minmax(300px, 1fr)
    76px
    82px
    100px
    100px
    95px
    105px;
  gap: 0;
  align-items: center;
}

.time-timeline-header {
  background: #eee;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e4e8eb;
  overflow: hidden;
}

.time-timeline-header > div {
  padding: 8px 12px;
    font-size: 13px;
  border-bottom: 2px solid #eee;
}

.time-timeline-row {
  min-height: 72px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.15s ease;
}

.time-timeline-row > div {
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
}
.time-timeline-row:hover {
  background: #f9f9f9;
}

.time-timeline-row.day-off {
  background: #f3f4f6;
}

.time-timeline-row.overlap-warning {
  background: #fff7d6;
}

.time-timeline-row.selected {
  background: #fff4f4;
  border-left: 4px solid #c51d12;
}

.time-timeline-row.day-off.selected {
  background: #f3f4f6;
}

.time-timeline-row.overlap-warning.selected {
  background: #fff7d6;
}

.timeline-date strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.timeline-date span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.day-timeline {
  position: relative;
  height: 72px;
  padding-top: 28px;
  padding-right: 42px; /* Platz für Sollzeit */
  overflow: hidden;
}

.timeline-track {
  position: relative;
  height: 8px;
  background: #edf1f5;
  border-radius: 999px;
  overflow: visible;
}

.timeline-segment {
  position: absolute;
  top: 0;
  height: 8px;
  border-radius: 999px;
}

.timeline-segment.work {
  background: #1677ff;
}

.timeline-segment.pause {
  background: #fa8c16;
  z-index: 5;
}

.timeline-segment.plus {
  background: #1f8b4c;
  z-index: 3;
}

.timeline-segment.minus {
  background: #cf1322;
  z-index: 3;
}

.timeline-segment.pause span {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff4e6;
  color: #663c00;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  white-space: nowrap;
}

.timeline-time {
  position: absolute;
  top: 0;
  font-size: 12px;
  color: #333;
}

.timeline-time.start {
  left: 0;
}

.timeline-empty {
  color: #777;
  text-align: center;
  font-size: 14px;
}

.timeline-diff {
  font-weight: 700;
}

.timeline-diff.positive {
  color: #1f8b4c;
}

.timeline-diff.negative {
  color: #cf1322;
}

.time-timeline-header > div {
  border-right: 1px solid #e2e2e2;
}

.time-timeline-header > div:last-child {
  border-right: none;
}

.timeline-segment.pause.top-label span {
  top: -22px;
}

.timeline-segment.pause.bottom-label span {
  top: 12px;
}
.timeline-time.end {
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  text-align: right;
  background: rgba(255, 244, 244, 0.9);
  padding-left: 4px;
}

.timeline-expected-end {
  font-size: 10px;
  color: #cf1322;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-segment.absence {
  background: #722ed1;
  z-index: 4;
}

.timeline-segment.absence.requested {
  background: #eb2f96;
}

.timeline-segment.absence.training {
  background: #fadb14;
}

/* -------------------- */
/* ERP COMPACT FONT SCALE */
body:not(.login-page),
body:not(.login-page) button,
body:not(.login-page) input,
body:not(.login-page) select,
body:not(.login-page) textarea,
body:not(.login-page) table {
  font-size: 13px;
}

body:not(.login-page) .module-topbar-title strong {
  font-size: 20px;
}

body:not(.login-page) .module-topbar-title span {
  font-size: 12px;
}

body:not(.login-page) .sidebar li {
  font-size: 13px;
}

body:not(.login-page) .sidebar li.menu-section-title,
body:not(.login-page) .sidebar-user-text span {
  font-size: 10px;
}

body:not(.login-page) .sidebar-user-text strong,
body:not(.login-page) .sidebar-role-pill {
  font-size: 12px;
}

body:not(.login-page) .time-admin-form-group label,
body:not(.login-page) .stamp-contact-meta,
body:not(.login-page) .stamp-contact-links,
body:not(.login-page) .user-presence-name {
  font-size: 12px;
}

body:not(.login-page) .dashboard-metric-card strong {
  font-size: 2rem;
}

body:not(.login-page) .dashboard-card-label {
  font-size: 0.82rem;
}

body:not(.login-page) .switchgear-planning-table,
body:not(.login-page) .switchgear-planning-table input[type="date"],
body:not(.login-page) .switchgear-planning-table input[type="text"],
body:not(.login-page) .switchgear-planning-table input.switchgear-employee-input[type="text"] {
  font-size: 11px;
}

body:not(.login-page) .time-timeline-header,
body:not(.login-page) .time-timeline-row > div,
body:not(.login-page) .timeline-date strong {
  font-size: 12px;
}


.team-calendar-grid {
  min-width: 0;
}

.team-calendar-scroll {
  width: 100%;
  overflow: visible;
  border: 1px solid #d9e0e4;
  border-radius: 8px;
  background: #ffffff;
}

.team-calendar-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.team-calendar-table th,
.team-calendar-table td {
  border-right: 1px solid #d9e0e4;
  border-bottom: 1px solid #d9e0e4;
}

.team-calendar-employee-header,
.team-calendar-employee-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 190px;
  min-width: 190px;
  max-width: 190px;
  background: #f1f4f6;
  text-align: left;
}

.team-calendar-employee-header {
  top: 0;
  z-index: 4;
  padding: 9px 10px;
}

.team-calendar-employee-cell {
  padding: 7px 10px;
  background: #ffffff;
}

.team-calendar-employee-cell strong,
.team-calendar-employee-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-calendar-employee-cell span {
  margin-top: 2px;
  color: #606b70;
  font-size: 11px;
  font-weight: 600;
}

.team-calendar-day-header {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 34px;
  min-width: 34px;
  height: 46px;
  padding: 4px 2px;
  background: #f1f4f6;
  text-align: center;
}

.team-calendar-day-header span,
.team-calendar-day-header small {
  display: block;
}

.team-calendar-day-header small {
  margin-top: 2px;
  color: #606b70;
  font-size: 10px;
  font-weight: 700;
}

.team-calendar-day-cell {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 2px;
  background: #ffffff;
  text-align: center;
  vertical-align: middle;
}

.team-calendar-day-cell span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  max-width: 100%;
  height: 18px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.team-calendar-day-header.weekend,
.team-calendar-day-cell.weekend {
  background: #eef2f4;
}

.team-calendar-day-header.holiday,
.team-calendar-day-cell.holiday {
  background: #dfe6ea;
}

.team-calendar-day-header.today,
.team-calendar-day-cell.today {
  background: rgba(197, 29, 18, 0.12);
}

.team-calendar-day-cell.approved span {
  background: #722ed1;
}

.team-calendar-day-cell.requested span {
  background: #eb2f96;
}

.team-calendar-department-row th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 7px 10px;
  background: #20292c;
  color: #ffffff;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0;
}

.team-calendar-day-cell.partial span {
  box-sizing: border-box;
  width: 30px;
  max-width: 100%;
  height: 18px;
  background: #ffffff;
  border: 2px solid currentColor;
  border-radius: 6px;
  font-size: 8px;
  letter-spacing: 0;
}

.team-calendar-day-cell.partial.approved span {
  color: #722ed1;
}

.team-calendar-day-cell.partial.requested span {
  color: #eb2f96;
}

.team-calendar-day-cell.full-day span {
  border: 0;
}

.absence-calendar-legend i.partial {
  border: 2px solid #722ed1;
  background: #ffffff;
}




.user-documents-panel {
  max-width: 95%;
  margin: 0 auto 24px;
}

.user-documents-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.user-documents-header h3 {
  margin: 0;
}

.user-documents-header p {
  margin: 4px 0 0;
  color: #606b70;
}

.user-documents-upload {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.user-documents-upload label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
}

.user-documents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-document-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8ec;
  border-radius: 6px;
  background: #f8fafb;
}

.user-document-row strong {
  display: block;
}

.user-document-row span {
  display: block;
  color: #606b70;
  font-size: 0.9em;
  margin-top: 3px;
}

.user-document-row div:last-child {
  display: flex;
  gap: 8px;
}

.switchgear-group-row-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.switchgear-group-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 10px;
  font-weight: 700;
}

.switchgear-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f1f4f6;
  color: #20292c;
  border: 1px solid rgba(32, 41, 44, 0.18);
  box-sizing: border-box;
  line-height: 1;
}

.switchgear-summary-missing {
  background: #101719;
  color: #ffffff;
  border-color: rgba(32, 41, 44, 0.18);
}

.switchgear-summary-overdue {
  background: #ffd8d2;
  color: #8f160b;
}

.switchgear-summary-thisWeek {
  background: #ffe7a8;
  color: #7a5200;
}

.switchgear-summary-nextWeek,
.switchgear-summary-weekAfterNext {
  background: #d9edff;
  color: #174f78;
}

.switchgear-summary-thisMonth,
.switchgear-summary-nextMonth {
  background: #dff3df;
  color: #24612a;
}

.switchgear-planning-table tbody tr.switchgear-week-break td {
  border-top-width: 3px;
  border-top-color: #20292c;
}
/* Dokumentvorschau und Prüfer-Upload bei Abwesenheitsanträgen */
.absence-attachment-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.absence-attachment-list,
.absence-attachment-item,
.absence-review-upload {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.absence-attachment-item {
  padding: 6px 8px;
  border: 1px solid #d9e0e6;
  border-radius: 7px;
  background: #f7f9fa;
}

.absence-attachment-item button,
.absence-review-upload button {
  margin: 0;
  padding: 6px 10px;
}

.absence-document-preview {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}

/* Einheitliche Tabellen- und Formularbedienelemente */
.time-admin-card,
.custom-table-container,
.dashboard-metric-card,
.user-documents-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e1e6e9;
  border-radius: 10px;
}

.time-admin-timeline-card {
  padding: 0;
}

.custom-table-header {
  gap: 16px;
  margin-bottom: 16px !important;
  padding-bottom: 8px;
}

.custom-table-title {
  color: #20292c;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.custom-table {
  border: 1px solid #e1e6e9;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.custom-table-heading {
  padding: 9px 10px;
  background: #f1f4f5;
  border-bottom: 1px solid #dfe5e8;
  color: #526066;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.custom-table-heading:first-child {
  border-top-left-radius: 9px;
}

.custom-table-heading:last-child {
  border-top-right-radius: 9px;
}

.custom-table tbody tr {
  transition: background-color 0.15s ease;
}

.custom-table tbody tr:hover {
  background: #f8fafb;
}

.custom-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.custom-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.custom-toolbar > *:not(.custom-search-input) {
  flex-shrink: 0;
}

.custom-search-input {
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
  color: #20292c;
  font: inherit;
}

.custom-search-input:focus,
.table-form-control:focus {
  outline: none;
  border-color: #20292c;
  box-shadow: 0 0 0 3px rgba(32, 41, 44, 0.12);
}

.table-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #c7d0d5;
  border-radius: 7px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.table-button:hover:not(:disabled) {
  background: #edf1f3;
  border-color: #9ca9af;
}

.table-button:focus-visible {
  outline: 3px solid rgba(32, 41, 44, 0.2);
  outline-offset: 2px;
}

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

.table-button--icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.table-button--icon img {
  width: 16px;
  height: 16px;
  display: block;
}

.table-button--primary {
  background: #20292c;
  border-color: #20292c;
  color: #ffffff;
}

.table-button--primary:hover:not(:disabled) {
  background: #303d42;
  border-color: #303d42;
}

.table-button--primary img {
  filter: brightness(0) invert(1);
}

.table-button--danger {
  border-color: #efc1bb;
  background: #fff7f5;
  color: #a1261b;
}

.table-button--danger:hover:not(:disabled) {
  border-color: #d57b71;
  background: #ffe8e4;
}

.table-button--danger img {
  filter: invert(19%) sepia(62%) saturate(2290%) hue-rotate(343deg) brightness(86%) contrast(90%);
}

.custom-table-actions-cell {
  white-space: nowrap;
}

.custom-table-empty-cell {
  padding: 0 !important;
}

.table-empty-state {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 24px;
  box-sizing: border-box;
  color: #667277;
  text-align: center;
}

.table-empty-state-icon {
  position: relative;
  width: 42px;
  height: 34px;
  margin-bottom: 4px;
  border: 1px solid #cbd4d9;
  border-radius: 8px;
  background: #f7f9fa;
}

.table-empty-state-icon::before {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #9ba8ae;
  box-shadow: 0 7px 0 #c1cbd0, 0 14px 0 #d5dde0;
  content: '';
}

.table-empty-state strong {
  color: #344044;
  font-size: 14px;
}

.table-empty-state span:last-child {
  font-size: 13px;
}

.table-action-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
}

.custom-table .table-action-group .table-button,
.custom-table .table-action-group .ui-button {
  height: 30px;
  min-height: 30px;
  padding-right: 8px;
  padding-left: 8px;
}

.custom-table .table-action-group .table-button--icon {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.custom-table .table-action-group .table-button--icon img {
  width: 14px;
  height: 14px;
}

.custom-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px !important;
}

.table-filter-token-remove {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d686d;
  font-size: 16px;
}

.table-filter-token-remove:hover:not(:disabled) {
  background: #dfe5e8;
  color: #20292c;
}

.table-form-control:not([type='checkbox']):not([type='radio']):not([type='color']) {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
}

textarea.table-form-control {
  min-height: 88px;
  resize: vertical;
}

@media (max-width: 768px) {
  .custom-table-container {
    padding: 18px !important;
  }

  .custom-table-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .custom-toolbar {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .custom-search-input {
    flex: 1 1 180px !important;
  }
}

/* Gemeinsame Oberflächen für Dialoge und die heute ergänzten Module */
.shared-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(16, 23, 25, 0.46);
}

.modal.shared-modal-overlay {
  display: none;
}

.shared-modal {
  display: flex;
  width: 100%;
  max-height: calc(100vh - 48px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d9e1e5;
  border-radius: 10px;
  background: #ffffff;
}

.shared-modal-header,
.shared-modal-footer {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 14px 24px;
}

.shared-modal-header {
  justify-content: space-between;
  gap: 16px;
}

.shared-modal-header h2 {
  margin: 0;
  color: #101719;
  font-size: 20px;
}

.shared-modal-close {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #5d686d;
  font-size: 0;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.shared-modal-close:hover {
  border-color: #d8e0e4;
  background: #f3f6f7;
  color: #20292c;
}

.shared-modal-close svg {
  display: block;
  width: 21px;
  height: 21px;
}

.shared-modal-close svg path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.shared-modal-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px;
}

.shared-modal:has(.procurement-invoice-editor) .shared-modal-header {
  padding-bottom: 6px;
}

.shared-modal:has(.procurement-invoice-editor) .shared-modal-content {
  padding-top: 8px;
}

.shared-modal-footer {
  display: none;
  justify-content: flex-end;
  gap: 10px;
}

.shared-modal-action {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #c7d0d5;
  border-radius: 7px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shared-modal-action:hover:not(:disabled) {
  border-color: #9ca9af;
  background: #edf1f3;
}

.shared-modal-action--primary {
  border-color: #c51d12;
  background: #c51d12;
  color: #ffffff;
}

.shared-modal-action--primary:hover:not(:disabled) {
  border-color: #a8170e;
  background: #a8170e;
}

.shared-modal-action:focus-visible {
  outline: 3px solid rgba(32, 41, 44, 0.2);
  outline-offset: 2px;
}

.shared-modal-action.ui-button {
  min-height: 38px;
  padding: 0 14px;
}

.shared-modal-content > .time-admin-card {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.shared-modal-form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shared-modal-form-field label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #344044;
  font-size: 13px;
  font-weight: 700;
}

.shared-modal-form-description {
  margin: 0;
  color: #5d686d;
  font-size: 14px;
}

.shared-modal-form-control {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
  box-sizing: border-box;
  background: #ffffff;
  color: #20292c;
  font: inherit;
}

textarea.shared-modal-form-control {
  min-height: 104px;
  resize: vertical;
}

.shared-modal-form-control:focus {
  outline: none;
  border-color: #20292c;
  box-shadow: 0 0 0 3px rgba(32, 41, 44, 0.12);
}

.shared-modal-form-message {
  margin: 0;
  font-size: 13px;
}

.shared-modal-form-message--error {
  color: #b42318;
}

.shared-modal-form-message--success {
  color: #19703a;
}

.account-password-modal {
  max-width: 520px;
}

.account-password-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 2px -24px -24px;
  padding: 16px 24px;
}

.custom-create-btn:not(.table-button):not(.ui-button),
.custom-action-btn:not(.table-button):not(.ui-button),
.button-primary {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #c7d0d5;
  border-radius: 7px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.custom-create-btn:not(.table-button):not(.ui-button),
.button-primary {
  border-color: #20292c;
  background: #20292c;
  color: #ffffff;
}

.custom-action-btn:not(.table-button):not(.ui-button):hover {
  border-color: #9ca9af;
  background: #edf1f3;
}

.custom-create-btn:not(.table-button):not(.ui-button):hover,
.button-primary:hover {
  border-color: #303d42;
  background: #303d42;
}

.custom-create-btn.button-primary:not(.table-button):not(.ui-button),
.button-primary,
.modal-content .button-primary {
  border-color: #c51d12;
  background: #c51d12;
  color: #ffffff;
}

.custom-create-btn.button-primary:not(.table-button):not(.ui-button):hover,
.button-primary:hover,
.modal-content .button-primary:hover {
  border-color: #a8170e;
  background: #a8170e;
}

.button-primary:focus-visible {
  outline: 3px solid rgba(197, 29, 18, 0.24);
  outline-offset: 2px;
}

.form-field-error,
[data-form-error-summary] {
  color: #b42318;
  font-size: 13px;
}

.form-field-error {
  margin: 6px 0 0;
}

[data-form-error-summary] {
  margin: 0 0 14px;
  font-weight: 600;
}

[data-form-field][aria-invalid='true'] {
  border-color: #b42318 !important;
}

.procurement-shell {
  gap: 16px;
}

.procurement-button,
.procurement-shell .table-button {
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #c7d0d5;
  border-radius: 7px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.procurement-button:hover:not(:disabled),
.procurement-shell .table-button:hover:not(:disabled) {
  border-color: #9ca9af;
  background: #edf1f3;
}

.procurement-button--primary,
.procurement-shell .table-button--primary {
  border-color: #c51d12;
  background: #c51d12;
  color: #ffffff;
}

.procurement-button--primary:hover:not(:disabled),
.procurement-shell .table-button--primary:hover:not(:disabled) {
  border-color: #a8170e;
  background: #a8170e;
}

.procurement-button--secondary,
.procurement-shell .table-button--secondary {
  border-color: #c7d0d5;
  background: #ffffff;
  color: #20292c;
}

.procurement-button--outline,
.procurement-shell .table-button:not(.table-button--primary):not(.table-button--danger):not(.table-pagination-button) {
  border-color: #c7d0d5;
  background: transparent;
  color: #526066;
}

.procurement-button--outline:hover:not(:disabled),
.procurement-shell .table-button:not(.table-button--primary):not(.table-button--danger):not(.table-pagination-button):hover:not(:disabled) {
  background: #f1f4f5;
  color: #20292c;
}

.procurement-shell .table-button--danger {
  border-color: #efc1bb;
  background: #fff7f5;
  color: #a1261b;
}

.procurement-shell .table-button--icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.procurement-button:focus-visible,
.procurement-shell .table-button:focus-visible {
  outline: 3px solid rgba(32, 41, 44, 0.2);
  outline-offset: 2px;
}

.procurement-button:disabled,
.procurement-shell .table-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ui-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #c7d0d5;
  border-radius: 7px;
  background: #ffffff;
  color: #526066;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ui-button--primary {
  border-color: #c51d12;
  background: #c51d12;
  color: #ffffff;
}

.ui-button--secondary {
  border-color: #20292c;
  background: #20292c;
  color: #ffffff;
}

.ui-button--outline {
  border-color: #c7d0d5;
  background: #ffffff;
  color: #526066;
}

.ui-button--primary:hover:not(:disabled) {
  border-color: #a8170e;
  background: #a8170e;
}

.ui-button--secondary:hover:not(:disabled) {
  border-color: #303d42;
  background: #303d42;
}

.ui-button--outline:hover:not(:disabled) {
  border-color: #9ca9af;
  background: #f1f4f5;
  color: #20292c;
}

.ui-button:focus-visible {
  outline: 3px solid rgba(32, 41, 44, 0.2);
  outline-offset: 2px;
}

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

.custom-pagination .table-pagination-button {
  min-width: 30px;
  min-height: 30px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12px;
}


.table-pagination-ellipsis {
  display: inline-flex;
  min-width: 20px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  color: #5d686d;
  font-size: 13px;
  font-weight: 700;
}

.table-pagination-button {
  min-width: 34px;
  padding: 0 8px;
}

.custom-pagination .table-pagination-button.table-pagination-button--current {
  border-color: #a8170e;
  background: #a8170e;
  color: #ffffff;
}

.procurement-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.procurement-content {
  min-width: 0;
}

.procurement-receipt-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.procurement-search-field {
  display: flex;
  min-width: min(100%, 320px);
  flex: 1 1 420px;
  flex-direction: column;
  gap: 6px;
  color: #344044;
  font-size: 13px;
  font-weight: 700;
}

.procurement-search-field input,
.shared-modal-content :is(.time-admin-card, .procurement-invoice-pane) :is(input:not([type='checkbox']), select, textarea),
#procurementOrderItems .procurement-price {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
  box-sizing: border-box;
  background: #ffffff;
  color: #20292c;
  font: inherit;
}

.shared-modal-content :is(.time-admin-card, .procurement-invoice-pane) textarea {
  min-height: 84px;
  resize: vertical;
}

.procurement-search-field input:focus,
.shared-modal-content :is(.time-admin-card, .procurement-invoice-pane) :is(input, select, textarea):focus,
#procurementOrderItems .procurement-price:focus {
  outline: none;
  border-color: #20292c;
  box-shadow: 0 0 0 3px rgba(32, 41, 44, 0.12);
}

.procurement-checkbox-field {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  color: #344044;
  font-size: 13px;
  font-weight: 600;
}

.procurement-checkbox-field input,
.procurement-request-check {
  width: 16px;
  height: 16px;
  accent-color: #c51d12;
}

.shared-modal-content :is(.time-admin-card, .procurement-invoice-pane) > p:first-child {
  margin-top: 0;
  color: #5d686d;
}

.procurement-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.procurement-invoice-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: start;
}

.procurement-invoice-pane {
  min-width: 0;
}

.procurement-invoice-editor > .procurement-invoice-pane:first-child {
  padding-right: 18px;
}

.procurement-invoice-pdf {
  padding-left: 18px;
  border-left: 1px solid #e4e8eb;
}

.procurement-invoice-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.procurement-invoice-heading h3 {
  margin: 0;
}

.procurement-invoice-upload {
  display: grid;
  min-height: 330px;
  padding: 24px;
  box-sizing: border-box;
  place-items: center;
  border: 2px dashed #cbd4d9;
  border-radius: 10px;
  background: #f8f9fa;
  color: #5d686d;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.procurement-invoice-upload:hover,
.procurement-invoice-upload:focus-visible,
.procurement-invoice-upload.is-dragging {
  border-color: #c51d12;
  background: #fff8f7;
  color: #20292c;
  outline: none;
}

.procurement-invoice-upload[hidden],
.procurement-invoice-change[hidden],
.procurement-invoice-preview[hidden] {
  display: none !important;
}

.procurement-invoice-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.procurement-invoice-upload-content {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.procurement-invoice-upload-icon {
  width: 52px;
  height: 52px;
  color: #c51d12;
}

.procurement-invoice-upload strong {
  color: #20292c;
  font-size: 18px;
}

.procurement-invoice-upload-or {
  color: #899398;
  font-size: 14px;
}

.procurement-invoice-upload-action {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 7px;
  background: #c51d12;
  color: #ffffff;
  font-weight: 700;
}

.procurement-invoice-upload small {
  color: #899398;
}

.procurement-invoice-change {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d686d;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.procurement-invoice-change:hover,
.procurement-invoice-change:focus-visible {
  color: #c51d12;
}

.procurement-invoice-preview {
  overflow: hidden;
  border: 1px solid #e4e8eb;
  border-radius: 7px;
  background: #f8f9fa;
}

.procurement-invoice-preview iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}

@media (max-width: 900px) {
  .procurement-invoice-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .procurement-invoice-editor > .procurement-invoice-pane:first-child {
    padding: 0 0 18px;
  }

  .procurement-invoice-pdf {
    padding: 18px 0 0;
    border-top: 1px solid #e4e8eb;
    border-left: 0;
  }

  .procurement-invoice-upload {
    min-height: 260px;
  }
}

#procurementOrderItems {
  margin-top: 18px !important;
  overflow-x: auto;
}

#procurementOrderItems table,
.procurement-data-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

#procurementOrderItems th,
#procurementOrderItems td,
.procurement-data-table th,
.procurement-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5eaed;
  text-align: left;
  vertical-align: middle;
}

#procurementOrderItems th,
.procurement-data-table th {
  background: #f1f4f6;
  color: #20292c;
  font-size: 12px;
  font-weight: 800;
}

.procurement-receipt-order {
  margin-bottom: 16px;
  overflow-x: auto;
}

.procurement-receipt-order-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.procurement-receipt-order-header h3 {
  margin: 0 0 6px;
}

.procurement-data-table {
  margin-top: 16px;
  min-width: 900px;
}

.procurement-billing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.procurement-billing-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.procurement-view-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
}

.procurement-view-toggle-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  background: #ffffff;
  color: #52616b;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.procurement-view-toggle-btn + .procurement-view-toggle-btn {
  border-left: 1px solid #cbd4d9;
}

.procurement-view-toggle-btn[aria-pressed='true'] {
  background: #20292c;
  color: #ffffff;
  cursor: default;
}

.procurement-view-toggle-btn:not([aria-pressed='true']):hover {
  background: #f1f4f6;
}

/* Abrechnungsstand einer Bestellung - im Editor und in der Bestellansicht identisch */
.procurement-billing-order {
  margin-bottom: 16px;
  overflow-x: auto;
}

.procurement-billing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.procurement-billing-title strong {
  display: block;
  color: #20292c;
  font-size: 15px;
}

.procurement-billing-title span {
  color: #52616b;
  font-size: 13px;
}

.procurement-billing-figures {
  display: flex;
  gap: 28px;
  margin: 0;
  flex-wrap: wrap;
}

.procurement-billing-figures div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.procurement-billing-figures dt {
  color: #52616b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.procurement-billing-figures dd {
  margin: 0;
  color: #20292c;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.procurement-billing-figures dd.is-negative {
  color: #b42318;
}

.procurement-billing-table {
  margin-top: 14px;
  min-width: 720px;
}

.procurement-billing-table td {
  vertical-align: top;
}

/* Verrechnete Anzahlungen zaehlen nicht mehr zum Abrechnungsstand der Bestellung.
   Die ganze Zeile wird zurueckgenommen - eine Durchstreichung einzelner Betraege
   liest sich faelschlich als "Betrag ungueltig". */
.procurement-billing-table tr.is-settled {
  opacity: 0.55;
}

.procurement-billing-sub {
  display: block;
  margin-top: 2px;
  color: #52616b;
  font-size: 12px;
}

.procurement-billing-empty {
  margin: 10px 0 0;
  color: #52616b;
  font-size: 13px;
}

.procurement-billing-hint {
  display: block;
  color: #52616b;
  font-size: 12px;
}

/* Kennzahlen-Fusszeile des Rechnungseditors */
.procurement-invoice-summary {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px 32px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}

.procurement-invoice-summary > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  text-align: right;
}

.procurement-invoice-summary > div[hidden] {
  display: none;
}

.procurement-invoice-summary dt {
  color: #52616b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.procurement-invoice-summary dd {
  margin: 0;
  color: #20292c;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.procurement-invoice-summary .is-deduction dd {
  color: #b42318;
}

.procurement-invoice-summary .is-result {
  padding-left: 32px;
  border-left: 1px solid #e5eaed;
}

.procurement-invoice-summary .is-result dd {
  font-size: 19px;
}

.procurement-invoice-billing {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.procurement-invoice-billing h4 {
  margin: 0 0 14px;
}

.procurement-invoice-billing .procurement-billing-table {
  min-width: 640px;
}

.procurement-dialog-error {
  margin: 0 0 12px;
  color: #b42318;
  font-size: 13px;
}

.procurement-modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e5eaed;
}

.procurement-modal-tab {
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: #5d686d;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.procurement-modal-tab:hover {
  color: #20292c;
}

.procurement-modal-tab.is-active {
  border-bottom-color: #c51d12;
  color: #20292c;
}

.procurement-form-section + .procurement-form-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5eaed;
}

.procurement-form-section-title {
  margin: 0 0 12px;
  color: #344044;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.procurement-form-hint {
  margin: 10px 0 0;
  color: #5d686d;
  font-size: 12px;
}

.procurement-article-results {
  height: 264px;
  margin-top: 10px;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
  overflow-y: auto;
}

.procurement-article-option {
  display: flex;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #e5eaed;
  flex-direction: column;
  gap: 2px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.procurement-article-option:last-child {
  border-bottom: none;
}

.procurement-article-option:hover,
.procurement-article-option:focus-visible {
  background: #f2f6f8;
  outline: none;
}

.procurement-article-option.is-selected {
  background: #eef4f7;
  box-shadow: inset 3px 0 0 #c51d12;
}

.procurement-article-option-title {
  font-weight: 600;
}

.procurement-article-option-meta {
  color: #5d686d;
  font-size: 12px;
}

.procurement-article-empty {
  margin: 0;
  padding: 10px 12px;
  color: #5d686d;
  font-size: 13px;
}

.procurement-article-selected {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #cbd4d9;
  border-radius: 7px;
  background: #f2f6f8;
  flex-wrap: wrap;
}

.procurement-article-selected.is-empty {
  color: #5d686d;
  font-size: 13px;
}

.modal-content textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  margin: 6px 0 12px;
  border: 1px solid #ccd4d9;
  border-radius: 8px;
  box-sizing: border-box;
  font: inherit;
  resize: vertical;
}

.modal-content .procurement-dialog-cancel {
  border: 1px solid #c7d0d5;
  background: #ffffff;
  color: #20292c;
}

.modal-content .procurement-dialog-cancel:hover {
  background: #edf1f3;
}

/* Einheitliche Beschriftungen für Formularfelder */
label {
  color: #667277 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  gap: 3px !important;
  line-height: 1.3;
  margin-bottom: 2px !important;
}

label:has(> input:not([type='checkbox']):not([type='radio']):not([type='color']), > select, > textarea) {
  display: flex;
  flex-direction: column;
  gap: 3px !important;
}

/* Die display-Regel oben würde sonst das hidden-Attribut aushebeln */
label[hidden] {
  display: none !important;
}

label > input:not([type='checkbox']):not([type='radio']):not([type='color']),
label > select,
label > textarea,
label + input:not([type='checkbox']):not([type='radio']):not([type='color']),
label + select,
label + textarea {
  margin-top: 0 !important;
}

body:not(.login-page) select {
  background-color: #ffffff;
  color: #20292c;
}

@media (max-width: 768px) {
  .shared-modal-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .shared-modal {
    max-height: calc(100vh - 24px);
  }

  .shared-modal-header,
  .shared-modal-content,
  .shared-modal-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  .procurement-receipt-toolbar > .custom-action-btn {
    width: 100%;
  }
}
.absence-document-preview-dialog {
  width: min(1100px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
}

.absence-document-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.absence-document-preview-close {
  margin: 0;
  padding: 4px 12px;
  font-size: 24px;
}

.absence-document-preview-body {
  min-height: 300px;
  max-height: 76vh;
  overflow: visible;
  text-align: center;
}

.absence-document-preview-body img,
.absence-document-preview-body iframe {
  width: 100%;
  height: 72vh;
  border: 0;
  object-fit: contain;
}

.absence-document-preview-body pre {
  text-align: left;
  white-space: pre-wrap;
}

.absence-document-preview-download {
  align-self: flex-start;
}
.absence-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.absence-action-button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 31, 36, 0.16);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.absence-action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(21, 31, 36, 0.22);
}
.absence-action-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(21, 31, 36, 0.16);
}
.absence-action-button--approve { background: #1f8b4c; }
.absence-action-button--approve:hover { background: #176f3c; }
.absence-action-button--reject { background: #cf1322; }
.absence-action-button--reject:hover { background: #a80f1b; }
.absence-action-button--cancel { background: #59656a; }
.absence-action-button--cancel:hover { background: #404b50; }
.absence-action-button--delete { background: #20292c; border-color: #20292c; }
.absence-action-button--delete:hover { background: #050708; border-color: #050708; }

.stamp-mileage-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stamp-mileage-fields[hidden] {
  display: none;
}

.stamp-mileage-distance {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef5f0;
  color: #245c35;
  font-weight: 700;
}

.stamp-reimbursement-details {
  margin-top: 8px;
  padding: 9px 10px;
  border-left: 4px solid #3a7c50;
  border-radius: 6px;
  background: #f1f7f3;
}

@media (max-width: 700px) {
  .stamp-mileage-fields {
    grid-template-columns: 1fr;
  }

  .stamp-mileage-distance {
    grid-column: 1;
  }
}

/* Artikelstamm: Detailansicht und Bearbeitung */
.article-detail-shell {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 16px;
}

.article-detail-toolbar {
  display: flex;
  justify-content: flex-start;
}

.article-detail-card {
  margin: 0;
}

.article-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.article-detail-heading h2 {
  margin: 2px 0 0;
}

.article-detail-eyebrow {
  margin: 0;
  color: #69777d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-detail-grid,
.article-detail-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.article-detail-grid[hidden],
.article-detail-form[hidden] {
  display: none;
}

.article-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.article-detail-grid span {
  color: #303b40;
  white-space: pre-wrap;
}

.article-detail-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

.article-detail-form input,
.article-detail-form select,
.article-detail-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #cad3d8;
  border-radius: 7px;
  background: #fff;
  color: #20292c;
  font: inherit;
}

.article-detail-form .article-detail-checkbox {
  flex-direction: row;
  align-items: center;
  align-self: end;
  min-height: 40px;
}

.article-detail-form .article-detail-checkbox input {
  width: auto;
}

.article-detail-wide {
  grid-column: 1 / -1;
}

.article-detail-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.article-detail-error {
  margin: 0;
  color: #b42318;
  font-weight: 600;
}

.article-supplier-blocked {
  color: #b42318;
  font-weight: 700;
}

.article-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  color: #526066;
  font-weight: 700;
}

.datanorm-import-form {
  display: grid;
  gap: 18px;
}

.datanorm-import-hint {
  margin: 0;
  color: #526066;
  line-height: 1.5;
}

.datanorm-import-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.datanorm-import-fields label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.datanorm-import-fields select,
.datanorm-import-fields input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cad3d8;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.datanorm-preview-summary,
.datanorm-import-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.datanorm-preview-summary span,
.datanorm-import-stats span {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #dbe2e5;
  border-radius: 8px;
  background: #f7f9fa;
  color: #526066;
  font-size: 12px;
}

.datanorm-preview-summary strong,
.datanorm-import-stats strong {
  color: #20292c;
  font-size: 16px;
}

.datanorm-preview-table-wrap {
  max-height: 360px;
  overflow: visible;
  border: 1px solid #dbe2e5;
  border-radius: 9px;
}

.datanorm-preview-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
}

.datanorm-preview-table th,
.datanorm-preview-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #e3e8ea;
  text-align: left;
  vertical-align: top;
}

.datanorm-preview-table th {
  position: sticky;
  top: 0;
  background: #eef2f3;
  color: #435158;
  z-index: 1;
}

.datanorm-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.datanorm-progress {
  height: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e8ea;
}

.datanorm-progress span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: #c51d12;
  transition: width 0.25s ease;
}

.datanorm-message {
  margin: 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: #e8f7ef;
  color: #137344;
  font-weight: 700;
}

.datanorm-message.is-error {
  background: #fff0ef;
  color: #b42318;
}
.article-price-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

.article-price-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 10px;
}

.article-price-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #303b40;
  font-size: 13px;
  font-weight: 600;
}

.article-price-legend-item i {
  width: 22px;
  height: 4px;
  border-radius: 999px;
}

.article-price-chart-scroll,
.article-price-history-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.article-price-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 260px;
  background: #fbfcfc;
  border: 1px solid #dbe2e5;
  border-radius: 10px;
}

.article-price-grid {
  stroke: #dfe5e8;
  stroke-width: 1;
}

.article-price-axis-label {
  fill: #637177;
  font-size: 12px;
}

.article-price-axis-title {
  fill: #303b40;
  font-size: 12px;
  font-weight: 700;
}

.article-price-history-table-wrap {
  margin-top: 16px;
  border: 1px solid #dbe2e5;
  border-radius: 10px;
}

.article-price-history-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.article-price-history-table th,
.article-price-history-table td {
  padding: 9px 11px;
  border-bottom: 1px solid #e3e8ea;
  text-align: left;
  white-space: nowrap;
}

.article-price-history-table th {
  background: #eef2f3;
  color: #435158;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-price-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.article-price-empty {
  padding: 28px;
  border: 1px dashed #cbd4d8;
  border-radius: 10px;
  color: #69777d;
  text-align: center;
}
@media (max-width: 700px) {
  .article-detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .article-list-toolbar,
  .datanorm-progress-head {
    align-items: stretch;
    flex-direction: column;
  }

  .datanorm-import-fields {
    grid-template-columns: 1fr;
  }

  .article-detail-heading .ui-button,
  .article-detail-toolbar .ui-button {
    width: 100%;
  }
}
/* Mitarbeiterdetail und Gehaltsentwicklung */
.user-detail-shell {
  max-width: 1500px;
  margin: 0 auto;
}

.user-detail-toolbar {
  display: flex;
  justify-content: flex-start;
}

.user-detail-card,
.user-access-card,
.user-salary-card {
  margin: 0;
}

.user-detail-heading,
.user-salary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.user-detail-heading p,
.user-salary-heading p {
  margin: 0 0 4px;
  color: #637177;
}

.user-detail-heading h2,
.user-salary-heading h3,
.user-access-card h3 {
  margin: 0;
}

.user-detail-heading > div > span {
  display: block;
  margin-top: 5px;
  color: #637177;
}

.user-detail-status {
  padding: 6px 12px;
  border-radius: 999px;
  background: #dff3e4;
  color: #17622a;
  font-weight: 800;
}

.user-detail-status.is-inactive {
  background: #f7d9d6;
  color: #9d1f12;
}

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

.user-detail-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe6e9;
  border-radius: 7px;
  background: #f7f9fa;
}

.user-detail-grid strong,
.user-detail-grid span {
  display: block;
}

.user-detail-grid span {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.user-access-section {
  margin-top: 15px;
}

.user-access-section > strong {
  display: block;
  margin-bottom: 8px;
}

.user-access-section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.user-access-chip {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e8eef1;
  color: #293438;
  font-size: 0.88rem;
  font-weight: 700;
}

.user-access-empty {
  color: #637177;
}

.user-salary-heading label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #536168;
  font-size: 0.85rem;
  font-weight: 700;
}

.user-salary-heading label span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-salary-heading input {
  width: 86px;
}

.user-salary-current-head {
  margin-top: 18px;
  color: #536168;
  font-weight: 700;
}

.user-salary-metrics {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.user-salary-metrics > div {
  padding: 14px;
  border-left: 4px solid #c51d12;
  border-radius: 7px;
  background: #f3f6f7;
}

.user-salary-metrics span,
.user-salary-metrics strong {
  display: block;
}

.user-salary-metrics span {
  color: #637177;
  font-size: 0.85rem;
}

.user-salary-metrics strong {
  margin-top: 5px;
  font-size: 1.25rem;
}

.user-salary-form {
  margin: 20px 0;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
  border: 1px solid #dbe2e5;
  border-radius: 8px;
  background: #f8fafb;
}

.user-salary-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #435158;
  font-size: 0.85rem;
  font-weight: 700;
}

.user-salary-form input {
  min-width: 0;
}

.user-salary-form button {
  min-height: 40px;
}

#userSalaryMessage {
  grid-column: 1 / -1;
  min-height: 20px;
}

#userSalaryMessage.is-success {
  color: #17622a;
}

#userSalaryMessage.is-error,
.user-detail-error {
  color: #b42318;
}

.user-salary-empty {
  margin-top: 16px;
  padding: 24px;
  border: 1px dashed #cbd4d8;
  border-radius: 8px;
  color: #637177;
  text-align: center;
}

.user-salary-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.user-salary-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 700;
}

.user-salary-legend-item i {
  width: 22px;
  height: 4px;
  border-radius: 999px;
}

.user-salary-chart-scroll,
.user-salary-history-wrap {
  overflow-x: auto;
}

.user-salary-chart {
  display: block;
  width: 100%;
  min-width: 760px;
  min-height: 330px;
}

.user-salary-grid {
  stroke: #dfe5e8;
  stroke-width: 1;
}

.user-salary-axis-label {
  fill: #637177;
  font-size: 12px;
}

.user-salary-axis-title {
  fill: #303b40;
  font-size: 12px;
  font-weight: 700;
}

.user-salary-history-wrap {
  margin-top: 16px;
  border: 1px solid #dbe2e5;
  border-radius: 8px;
}

.user-salary-history-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.user-salary-history-table th,
.user-salary-history-table td {
  padding: 9px 11px;
  border-bottom: 1px solid #e3e8ea;
  text-align: left;
}

.user-salary-history-table th {
  background: #eef2f3;
  color: #435158;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.user-salary-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.user-detail-shell > #userDocumentsPanel {
  padding: 0;
}

.user-detail-shell .user-documents-panel {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1100px) {
  .user-detail-grid,
  .user-salary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-salary-form {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}
/* Artikel: begrenzte Breite und Metallpreisverwaltung */
#articleSupplierTable {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.article-price-period {
  display: grid;
  gap: 5px;
  min-width: 150px;
  color: #526066;
  font-size: 12px;
  font-weight: 700;
}

.article-price-period select {
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid #cad3d8;
  border-radius: 7px;
  background: #fff;
  color: #20292c;
  font: inherit;
}

.metal-price-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.metal-price-current-card,
.metal-price-shell > .time-admin-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.metal-price-source-badge {
  padding: 7px 12px;
  border-radius: 999px;
  background: #e6f4ea;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metal-price-source-badge.is-manual {
  background: #fff1d6;
  color: #8a4b00;
}

.metal-price-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.metal-price-metrics > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dbe2e5;
  border-radius: 9px;
  background: #f7f9fa;
}

.metal-price-metrics span {
  color: #69777d;
  font-size: 12px;
  font-weight: 700;
}

.metal-price-metrics strong {
  color: #20292c;
  font-size: 18px;
}

.metal-price-source-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e3e8ea;
}

.metal-price-source-choice label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.metal-price-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.metal-price-form label {
  display: grid;
  gap: 6px;
  color: #303b40;
  font-weight: 700;
}

.metal-price-form input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cad3d8;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.metal-price-note,
.metal-price-form-action {
  grid-column: 1 / -1;
}

.metal-price-form-action {
  display: flex;
  justify-content: flex-end;
}

.metal-price-history-table {
  min-width: 940px;
}

@media (max-width: 700px) {
  .article-price-period {
    width: 100%;
  }

  .metal-price-form {
    grid-template-columns: 1fr;
  }
}
/* Projekt- und Schaltschranklisten: persoenliche Tabellenansicht */
.project-planning-toolbar-card,
.project-planning-category,
.switchgear-planning-card,
#projectPlanningContainer,
#switchgearPlanningContainer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.switchgear-planning-card {
  overflow: visible;
}

.planning-table-view-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.planning-column-picker {
  position: relative;
}

.planning-column-picker summary {
  min-height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  background: #20292c;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.planning-column-picker summary::-webkit-details-marker {
  display: none;
}

.planning-column-picker summary::after {
  content: '▾';
  margin-left: 8px;
  font-size: 11px;
}

.planning-column-picker[open] summary::after {
  transform: rotate(180deg);
}

.planning-column-picker-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 40;
  width: min(360px, 86vw);
  max-height: min(520px, 70vh);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid #ccd5d9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 31, 35, 0.18);
}

.planning-column-picker-panel > strong {
  display: block;
  margin-bottom: 10px;
}

.planning-column-picker-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}

.planning-column-picker-list label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  color: #303b40;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.planning-column-picker-list input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: #c51d12;
}

.planning-column-picker-list input:disabled + span {
  color: #78858a;
}

.planning-table-zoom {
  display: grid;
  grid-template-columns: auto 120px;
  align-items: center;
  gap: 8px;
  color: #344044;
  font-size: 12px;
  font-weight: 800;
}

.planning-table-zoom span {
  white-space: nowrap;
}

.planning-table-zoom output {
  display: inline-block;
  min-width: 36px;
  color: #c51d12;
  text-align: right;
}

.planning-table-zoom input[type='range'] {
  width: 120px;
  accent-color: #c51d12;
}

.switchgear-planning-scroll {
  max-width: 100%;
  min-width: 0;
  scrollbar-width: auto;
  scrollbar-color: #8b979c #edf1f3;
}

.switchgear-planning-scroll::-webkit-scrollbar {
  display: block;
  width: 12px;
  height: 12px;
}

.switchgear-planning-scroll::-webkit-scrollbar-track {
  background: #edf1f3;
}

.switchgear-planning-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #edf1f3;
  border-radius: 999px;
  background: #8b979c;
}

.switchgear-planning-table [hidden] {
  display: none !important;
}

/* Horizontal bleibt nur die Projektnummer fixiert. */
.switchgear-planning-table tbody .switchgear-sticky-project,
.switchgear-planning-table tbody .switchgear-sticky-customer,
.switchgear-planning-table tbody .switchgear-sticky-delivery {
  position: static;
}

.switchgear-planning-table thead .switchgear-sticky-project,
.switchgear-planning-table thead .switchgear-sticky-customer,
.switchgear-planning-table thead .switchgear-sticky-delivery {
  left: auto;
}

.project-planning-table th.project-planning-id,
.project-planning-table td.project-planning-id {
  position: sticky;
  left: 0;
  z-index: 5;
  background: inherit;
  box-shadow: 2px 0 0 #c5cdd1;
}

.project-planning-table th.project-planning-id {
  z-index: 14;
  background: #f1f4f6;
}

@media (max-width: 900px) {
  .switchgear-planning-toolbar,
  .switchgear-toolbar-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .planning-table-view-controls {
    flex-wrap: wrap;
  }

  .planning-table-zoom {
    grid-template-columns: auto minmax(100px, 1fr);
  }
}

/* Lager */
.warehouse-shell {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.warehouse-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

.warehouse-summary-card,
.warehouse-card {
  background: #fff;
  border: 1px solid #dce4e8;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(30, 52, 61, 0.05);
}

.warehouse-summary-card {
  min-height: 118px;
  padding: 18px;
  border-top: 4px solid #18434d;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.warehouse-summary-card.warning { border-top-color: #d99516; }
.warehouse-summary-card.accent { border-top-color: #2590a3; }
.warehouse-summary-card.surplus { border-top-color: #7455a5; }

.warehouse-summary-card span {
  color: #5e6c72;
  font-size: 13px;
  font-weight: 700;
}

.warehouse-summary-card strong {
  margin: 5px 0 2px;
  color: #17262b;
  font-size: 28px;
}

.warehouse-summary-card small {
  color: #738087;
}

.warehouse-management-single-page .warehouse-summary-card {
  border-color: #20292c;
  border-top-color: #20292c;
}
.warehouse-material-summary-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.warehouse-material-summary-list strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
}

.warehouse-material-summary-list strong b { font-size: 16px; }
.warehouse-material-summary-list .standard { color: #684d00; background: #fde59a; }
.warehouse-material-summary-list .bulk { color: #176b35; background: #d7f0dc; }
.warehouse-material-summary-list .surplus { color: #a12d27; background: #f7d6d3; }

.warehouse-capacity-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  min-width: 0;
}

.warehouse-capacity-summary { padding-right: 12px; padding-left: 12px; }

.warehouse-capacity-switcher {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 4px;
}

.warehouse-capacity-switcher .warehouse-capacity-list { margin-top: 8px; }

.warehouse-capacity-arrow {
  width: 22px;
  min-width: 22px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #20292c;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.warehouse-capacity-arrow:hover:not(:disabled) { background: #c51d12; }
.warehouse-capacity-arrow:disabled { cursor: default; opacity: 0.24; }

.warehouse-capacity-row {
  display: grid;
  grid-template-columns: minmax(50px, 1fr) auto auto;
  align-items: baseline;
  gap: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid #edf0f1;
}

.warehouse-capacity-row span { color: #33454c; font-size: 12px; }
.warehouse-capacity-row strong { margin: 0; font-size: 14px; }
.warehouse-capacity-row small { font-size: 11px; }
.warehouse-card {
  min-width: 0;
  padding: 20px;
}

.warehouse-card h2,
.warehouse-toolbar h2,
.warehouse-card-heading h2 {
  margin: 0;
  color: #17262b;
  font-size: 20px;
}

.warehouse-card p,
.warehouse-toolbar p,
.warehouse-card-heading p {
  margin: 4px 0 0;
  color: #68767c;
  font-size: 13px;
}

.warehouse-toolbar,
.warehouse-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.warehouse-toolbar-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.warehouse-toolbar input,
.warehouse-toolbar select {
  min-width: 220px;
}

.warehouse-shell input,
.warehouse-shell select,
.warehouse-shell textarea,
.warehouse-dialog input,
.warehouse-dialog select,
.warehouse-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid #cad5d9;
  border-radius: 7px;
  background: #fff;
  color: #17262b;
  font: inherit;
}

.warehouse-shell label,
.warehouse-dialog label {
  color: #4c5b61;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-shell input:focus,
.warehouse-shell select:focus,
.warehouse-shell textarea:focus,
.warehouse-dialog input:focus,
.warehouse-dialog select:focus,
.warehouse-dialog textarea:focus {
  border-color: #248ca0;
  box-shadow: 0 0 0 3px rgba(36, 140, 160, 0.12);
  outline: none;
}

.warehouse-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #dce4e8;
  border-radius: 10px;
}

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

.warehouse-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #dce4e8;
  background: #edf2f4;
  color: #536269;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.warehouse-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5ebee;
  color: #1d2c31;
  vertical-align: middle;
}

.warehouse-table tbody tr:last-child td { border-bottom: 0; }
.warehouse-table tbody tr:hover { background: #f7fafb; }
.warehouse-table td span { display: block; margin-top: 2px; color: #728087; font-size: 11px; }
.warehouse-table .number { text-align: right; white-space: nowrap; }
.warehouse-row-warning { background: #fff8e7; }
.warehouse-row-inactive { opacity: 0.58; }

.warehouse-badge,
.warehouse-priority {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7eef0;
  color: #29464e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-badge-kanban { background: #fff0c9; color: #785100; }
.warehouse-badge-schuettmaterial { background: #ddecf6; color: #245a78; }
.warehouse-badge-ueberschuss { background: #eee7f7; color: #604287; }
.warehouse-priority { background: #fde2de; color: #a5271d; }

.warehouse-booking-form,
.warehouse-location-form,
.warehouse-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  align-items: end;
}

.warehouse-location-form {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.warehouse-form-wide,
.warehouse-dialog-article {
  grid-column: 1 / -1;
}

.warehouse-form-actions,
.warehouse-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.warehouse-form-status {
  min-height: 18px;
  color: #197348;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-form-status.error,
.warehouse-error {
  color: #b52c23;
}

.warehouse-article-search-field {
  position: relative;
}

.warehouse-search-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(19, 41, 49, 0.2);
}

.warehouse-search-results button,
.warehouse-search-results > div {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid #e6ecee;
  border-radius: 0;
  background: #fff;
  color: #1d2c31;
  text-align: left;
}

.warehouse-search-results button:hover { background: #edf6f7; }
.warehouse-search-results span { display: block; margin-top: 2px; color: #6d7a80; font-size: 11px; }

.warehouse-empty,
.warehouse-loading {
  min-height: 120px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #6b797f;
  text-align: center;
}

.warehouse-empty strong { color: #33464d; }
.warehouse-empty span { margin-top: 4px; font-size: 12px; }

.warehouse-pagination {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #dce4e8;
  background: #f8fafb;
  color: #65747a;
  font-size: 12px;
}

.warehouse-pagination > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.warehouse-icon-button {
  min-width: 30px;
  padding: 5px 8px;
  border: 1px solid #cad5d9;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.warehouse-info-note {
  padding: 11px 13px;
  border-top: 1px solid #dce4e8;
  background: #f5f8f9;
  color: #617077;
  font-size: 12px;
}

.warehouse-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #28a061;
}

.warehouse-status-dot.inactive { background: #9ca7ab; }
.warehouse-muted { color: #7a878c; font-size: 11px; }

.warehouse-dialog-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(16, 31, 37, 0.48);
}

.warehouse-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(12, 29, 35, 0.3);
}

.warehouse-dialog-head {
  padding: 17px 20px;
  border-bottom: 1px solid #dde5e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.warehouse-dialog-head h3 { margin: 0; }
.warehouse-dialog-close { border: 0; background: transparent; color: #66757b; font-size: 26px; cursor: pointer; }
.warehouse-dialog-body { padding: 20px; }
.warehouse-dialog-article { padding: 12px; border-radius: 8px; background: #f1f5f6; }
.warehouse-dialog-article span,
.warehouse-dialog-article small { display: block; margin-top: 3px; color: #66757b; }

@media (max-width: 1100px) {
  .warehouse-summary-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .warehouse-booking-form,
  .warehouse-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 700px) {
  .warehouse-summary-grid,
  .warehouse-booking-form,
  .warehouse-location-form,
  .warehouse-form-grid { grid-template-columns: 1fr; }
  .warehouse-toolbar,
  .warehouse-card-heading { align-items: stretch; flex-direction: column; }
  .warehouse-toolbar-controls { align-items: stretch; flex-direction: column; }
  .warehouse-toolbar input,
  .warehouse-toolbar select { min-width: 0; }
  .warehouse-card { padding: 14px; }
  .warehouse-pagination { align-items: flex-start; flex-direction: column; }
}
.warehouse-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}

.warehouse-compact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.warehouse-structure-list {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #dce4e8;
  border-radius: 9px;
}

.warehouse-compact-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12px;
}

.warehouse-compact-table th {
  padding: 8px 10px;
  border-bottom: 1px solid #dce4e8;
  background: #edf2f4;
  color: #536269;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.warehouse-compact-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5ebee;
  vertical-align: middle;
}

.warehouse-compact-table tbody tr:last-child td {
  border-bottom: 0;
}

.warehouse-qr-token {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  color: #24515f;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-qr-missing {
  color: #b42318;
  font-weight: 700;
}
@media (max-width: 1050px) {
  .warehouse-management-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .warehouse-compact-form {
    grid-template-columns: 1fr;
  }
}
/* Lagerpositionen und Kanban-Behälter */
.warehouse-position-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.warehouse-position-intro h2 { margin: 0; }
.warehouse-position-intro p { margin: 5px 0 0; color: #68767c; font-size: 13px; }

.warehouse-position-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.warehouse-position-tabs button {
  padding: 8px 13px;
  border: 1px solid #ccd7db;
  border-radius: 999px;
  background: #fff;
  color: #34464d;
  font-weight: 700;
  cursor: pointer;
}

.warehouse-position-tabs button.active { color: #fff; background: #293133; border-color: #293133; }
.warehouse-position-tabs button.standard.active { color: #493900; background: #f0cc43; border-color: #f0cc43; }
.warehouse-position-tabs button.bulk.active { color: #fff; background: #4a9d55; border-color: #4a9d55; }
.warehouse-position-tabs button.surplus.active { color: #fff; background: #c84942; border-color: #c84942; }

.warehouse-position-filters {
  margin-bottom: 14px;
  justify-content: flex-end;
}

.warehouse-position-table { min-width: 1100px; }
.warehouse-position-row { border-left: 5px solid transparent; }
.warehouse-position-standard { border-left-color: #e4bd2a; background: #fffdf2; }
.warehouse-position-schuettmaterial { border-left-color: #4a9d55; background: #f4fbf5; }
.warehouse-position-ueberschuss { border-left-color: #c84942; background: #fff6f5; }

.warehouse-material-badge,
.warehouse-replenishment-open {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-material-badge.standard { color: #4e3a00; background: #f7df80; }
.warehouse-material-badge.schuettmaterial { color: #1f662a; background: #d9f0dc; }
.warehouse-material-badge.ueberschuss { color: #8d251f; background: #f6d8d5; }
.warehouse-replenishment-open { color: #9a3027; background: #fbe0dd; }

.warehouse-bin-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.warehouse-bin-chip {
  min-width: 104px;
  padding: 7px 8px;
  border: 1px solid #d5dfe2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.warehouse-bin-chip strong,
.warehouse-bin-chip span { display: block; margin: 0 0 2px; }
.warehouse-bin-chip span { color: #68777d; font-size: 10px; }

.warehouse-qr-button {
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid #9fb0b6;
  border-radius: 5px;
  background: #fff;
  color: #1b4c58;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.warehouse-replenishment-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .warehouse-position-intro { align-items: stretch; flex-direction: column; }
  .warehouse-position-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
}
.warehouse-rack-preview {
  min-height: 36px;
  padding: 9px 11px;
  border: 1px solid #d7e2e5;
  border-radius: 7px;
  background: #f4f8f9;
  color: #40545b;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-structure-filter {
  min-width: 230px;
}

.warehouse-structure-filter select {
  margin-top: 5px;
}

@media (max-width: 700px) {
  .warehouse-structure-filter { min-width: 0; }
}
.warehouse-structure-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.warehouse-edit-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.warehouse-edit-actions > div {
  display: flex;
  gap: 8px;
}

.warehouse-edit-delete {
  border-color: #d7a5a1 !important;
  color: #a7281f !important;
}

.warehouse-edit-delete:hover:not(:disabled) {
  border-color: #bb1e10 !important;
  background: #bb1e10 !important;
  color: #fff !important;
}

@media (max-width: 560px) {
  .warehouse-edit-actions,
  .warehouse-edit-actions > div {
    align-items: stretch;
    flex-direction: column;
  }
}
/* Hierarchische Lagerverwaltung und grafische Regalansicht */
.warehouse-management-intro h2,
.warehouse-detail-header h2,
.warehouse-position-detail-heading h3 { margin: 0; }

.warehouse-management-intro p,
.warehouse-detail-header p,
.warehouse-position-detail-heading p { margin: 5px 0 0; color: #68777d; }

.warehouse-detail-header { display: flex; align-items: center; gap: 18px; }
.warehouse-detail-back { flex: 0 0 auto; }

.warehouse-layout-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #526168;
  font-size: 11px;
}
.warehouse-layout-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid #dce3e6;
  border-radius: 999px;
  background: #f8fafb;
}
.warehouse-layout-legend span::before {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(39, 53, 59, 0.28);
  border-radius: 3px;
  background: linear-gradient(145deg, #f2f5f6, #c5ced2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
  content: '';
}
.warehouse-layout-legend .full::before { background: linear-gradient(145deg, #42ad70, #237d4d); }
.warehouse-layout-legend .partial::before { background: linear-gradient(90deg, #65757c 0 50%, #d4dadd 50% 100%); }
.warehouse-layout-legend .bulk::before { background: linear-gradient(145deg, #55b77c, #267d4e); }
.warehouse-layout-legend .standard::before { background: linear-gradient(145deg, #f1d35e, #c49512); }
.warehouse-layout-legend .surplus::before { background: linear-gradient(145deg, #e87169, #a63832); }
.warehouse-layout-legend .mixed::before {
  background: linear-gradient(135deg, #45aa70 0 33.333%, #e8c43d 33.333% 66.666%, #cf4f47 66.666% 100%);
}

.warehouse-rack-graphic {
  position: relative;
  width: 100%;
  max-width: 1250px;
  min-height: 190px;
  margin: 0 auto;
  padding: 14px;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid #d6dfe2;
  border-radius: 14px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(241, 245, 246, 0.88)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(87, 105, 112, 0.055) 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(87, 105, 112, 0.055) 40px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(27, 43, 49, 0.08);
  animation: warehouseRackReveal 0.32s ease-out;
}

.warehouse-rack-frame {
  position: relative;
  min-width: 560px;
  padding: 12px 14px 8px;
  border: 0;
  border-right: 10px solid #4c5a60;
  border-left: 10px solid #4c5a60;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(19, 29, 33, 0.08), transparent 5%, transparent 95%, rgba(19, 29, 33, 0.08)),
    #e9edef;
  box-shadow:
    inset 0 0 0 2px #aab5ba,
    inset 0 12px 22px rgba(34, 49, 55, 0.12),
    0 10px 16px rgba(26, 39, 44, 0.2);
}
.warehouse-rack-frame::before,
.warehouse-rack-frame::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 8px;
  background: repeating-linear-gradient(to bottom, #26343a 0 7px, #8e9ba0 7px 11px, #26343a 11px 18px);
  opacity: 0.52;
  content: '';
  pointer-events: none;
}
.warehouse-rack-frame::before { left: -9px; }
.warehouse-rack-frame::after { right: -9px; }

.warehouse-rack-floor {
  position: relative;
  display: block;
  padding: 5px 5px 13px;
  border-bottom: 9px solid #526168;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(204, 214, 218, 0.16));
  box-shadow: 0 7px 0 #303e44, 0 11px 12px rgba(27, 42, 48, 0.17);
}
.warehouse-rack-floor + .warehouse-rack-floor { margin-top: 11px; }
.warehouse-rack-floor--editable {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 54px;
  gap: 6px;
  align-items: stretch;
}
.warehouse-rack-floor:last-of-type { margin-bottom: 3px; }
.warehouse-rack-floor-positions {
  display: grid;
  gap: 8px;
  min-width: 440px;
}

.warehouse-rack-add-position,
.warehouse-rack-add-floor {
  border: 1px solid #77878e;
  border-radius: 7px;
  color: #eef3f5;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.warehouse-rack-add-position {
  min-width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #53636a, #354248);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.warehouse-rack-add-position span,
.warehouse-rack-add-floor span {
  display: block;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}
.warehouse-rack-add-position small,
.warehouse-rack-add-floor small {
  display: block;
  margin-top: 4px;
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.warehouse-rack-add-floor {
  width: 100%;
  min-height: 52px;
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #53636a, #354248);
  color: #eef3f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.warehouse-rack-add-position:hover:not(:disabled),
.warehouse-rack-add-floor:hover:not(:disabled),
.warehouse-rack-add-position:focus-visible,
.warehouse-rack-add-floor:focus-visible {
  border-color: #c51d12;
  background: #2b383e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(29, 43, 49, 0.2);
  outline: 2px solid rgba(197, 29, 18, 0.22);
  outline-offset: 2px;
}
.warehouse-rack-add-position:disabled,
.warehouse-rack-add-floor:disabled { cursor: wait; opacity: 0.55; }

.warehouse-rack-position {
  position: relative;
  min-height: 90px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #a6b1b6;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(145deg, #eef2f3 0%, #c9d1d5 64%, #aeb9bd 100%);
  color: #1d292e;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -7px 12px rgba(52, 67, 73, 0.12),
    0 4px 7px rgba(31, 46, 52, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.warehouse-rack-position::before {
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  height: 5px;
  border-radius: 0 0 4px 4px;
  background: rgba(68, 82, 88, 0.26);
  content: '';
}
.warehouse-rack-position::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: #9ba8ad;
  content: '';
}
.warehouse-rack-position--voll {
  border-color: #267c4d;
  background: linear-gradient(145deg, #6bc78e 0%, #359e64 58%, #207647 100%);
}
.warehouse-rack-position--leer { border-color: #2f8f58; }
.warehouse-rack-position--voll::after { background: #145e37; }
.warehouse-rack-position--teil {
  border-color: #d6a400;
  background: linear-gradient(90deg, #45aa70 0 50%, #d5dcdf 50% 100%);
}
.warehouse-rack-position--teil::after { background: linear-gradient(90deg, #176c40 0 50%, #9ba8ad 50% 100%); }
.warehouse-rack-position--material-bulk {
  border-color: #267c4d;
  background: linear-gradient(145deg, #6bc78e 0%, #359e64 58%, #207647 100%);
}
.warehouse-rack-position--material-bulk::after { background: #145e37; }
.warehouse-rack-position--material-standard {
  border-color: #a77e06;
  background: linear-gradient(145deg, #f6dc75 0%, #e5bc2f 58%, #b98908 100%);
}
.warehouse-rack-position--material-standard::after { background: #8a6500; }
.warehouse-rack-position--material-surplus {
  border-color: #9b342f;
  background: linear-gradient(145deg, #ee8a83 0%, #c94b43 58%, #93322e 100%);
}
.warehouse-rack-position--material-surplus::after { background: #7d2824; }
.warehouse-rack-position--material-mixed {
  border-color: #55646a;
  background: linear-gradient(135deg, #45aa70 0 33.333%, #e8c43d 33.333% 66.666%, #cf4f47 66.666% 100%);
}
.warehouse-rack-position--material-mixed::after {
  background: linear-gradient(90deg, #176c40 0 33.333%, #a87800 33.333% 66.666%, #922e29 66.666% 100%);
}
.warehouse-rack-position--material-mixed.has-material-bulk.has-material-standard:not(.has-material-surplus) {
  background: linear-gradient(135deg, #45aa70 0 50%, #e8c43d 50% 100%);
}
.warehouse-rack-position--material-mixed.has-material-bulk.has-material-standard:not(.has-material-surplus)::after {
  background: linear-gradient(90deg, #176c40 0 50%, #a87800 50% 100%);
}
.warehouse-rack-position--material-mixed.has-material-bulk.has-material-surplus:not(.has-material-standard) {
  background: linear-gradient(135deg, #45aa70 0 50%, #cf4f47 50% 100%);
}
.warehouse-rack-position--material-mixed.has-material-bulk.has-material-surplus:not(.has-material-standard)::after {
  background: linear-gradient(90deg, #176c40 0 50%, #922e29 50% 100%);
}
.warehouse-rack-position--material-mixed.has-material-standard.has-material-surplus:not(.has-material-bulk) {
  background: linear-gradient(135deg, #e8c43d 0 50%, #cf4f47 50% 100%);
}
.warehouse-rack-position--material-mixed.has-material-standard.has-material-surplus:not(.has-material-bulk)::after {
  background: linear-gradient(90deg, #a87800 0 50%, #922e29 50% 100%);
}
.warehouse-rack-position:hover,
.warehouse-rack-position:focus-visible {
  z-index: 3;
  transform: translateY(-4px);
  border-color: #42565e;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 9px 16px rgba(26, 43, 49, 0.27);
  outline: none;
}
.warehouse-rack-position.is-selected {
  border: 3px solid #c51d12;
  box-shadow: 0 0 0 4px rgba(197, 29, 18, 0.18), 0 9px 18px rgba(28, 42, 48, 0.24);
}
.warehouse-rack-position-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 72px;
  padding: 7px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(73, 88, 94, 0.17);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
  color: #1e2b30;
  backdrop-filter: blur(2px);
}
.warehouse-rack-position-eyebrow {
  color: #68767c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.warehouse-rack-position-content > strong {
  margin-top: 1px;
  font-size: 20px;
  line-height: 1;
}
.warehouse-rack-position-state {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: #3f5057;
  font-size: 10px;
  font-weight: 800;
}
.warehouse-rack-position-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #97a4a9;
  box-shadow: 0 0 0 2px rgba(151, 164, 169, 0.2);
}
.warehouse-rack-position--voll .warehouse-rack-position-state i { background: #22834f; box-shadow: 0 0 0 2px rgba(34, 131, 79, 0.18); }
.warehouse-rack-position--teil .warehouse-rack-position-state i { background: linear-gradient(90deg, #22834f 0 50%, #97a4a9 50% 100%); }
.warehouse-rack-position--material-bulk .warehouse-rack-position-state i {
  background: #22834f;
  box-shadow: 0 0 0 2px rgba(34, 131, 79, 0.18);
}
.warehouse-rack-position--material-standard .warehouse-rack-position-state i {
  background: #d4a800;
  box-shadow: 0 0 0 2px rgba(212, 168, 0, 0.2);
}
.warehouse-rack-position--material-surplus .warehouse-rack-position-state i {
  background: #c63f38;
  box-shadow: 0 0 0 2px rgba(198, 63, 56, 0.18);
}
.warehouse-rack-position--material-mixed .warehouse-rack-position-state i {
  background: linear-gradient(135deg, #29945b 0 33.333%, #d7ab08 33.333% 66.666%, #c63f38 66.666% 100%);
}
.warehouse-rack-position-material-summary {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 5px;
  overflow: hidden;
  border-left: 1px solid rgba(60, 75, 81, 0.24);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warehouse-rack-position-content small {
  margin-top: 4px;
  color: #5c6b71;
  font-size: 11px;
  line-height: 1.25;
}
.warehouse-rack-position-slots {
  width: 100%;
  height: 7px;
  margin-top: 5px;
  display: flex;
  gap: 2px;
}
.warehouse-rack-position-slot {
  min-width: 3px;
  flex: 1 1 0;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(45, 60, 66, 0.26);
  border-radius: 2px;
  background: #c8d0d3;
}
.warehouse-rack-position-slot i { flex: 1 1 0; background: #c8d0d3; }
.warehouse-rack-position-slot.is-empty {
  border-color: rgba(47, 143, 88, 0.62);
  background: #edf2f3;
}
.warehouse-rack-position-slot.is-empty i { background: #edf2f3; }
.warehouse-rack-position-slot .warehouse-rack-slot-material--bulk { background: #3ca567; }
.warehouse-rack-position-slot .warehouse-rack-slot-material--standard { background: #e2b91e; }
.warehouse-rack-position-slot .warehouse-rack-slot-material--surplus { background: #c94740; }
.warehouse-position-delete {
  position: absolute;
  z-index: 4;
  top: 6px;
  right: 6px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(142, 39, 31, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #9e281f;
  cursor: pointer;
  font-size: 18px;
  line-height: 22px;
  box-shadow: 0 2px 5px rgba(35, 47, 52, 0.16);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.warehouse-position-delete:hover:not(:disabled),
.warehouse-position-delete:focus-visible {
  background: #b42318;
  color: #fff;
  transform: scale(1.08);
  outline: none;
}
.warehouse-position-delete:disabled { cursor: wait; opacity: 0.55; }
.warehouse-position-detail { min-height: 150px; }

.warehouse-position-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #68777d;
  text-align: center;
}

.warehouse-position-placeholder span { margin-top: 5px; }

.warehouse-occupancy-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e2e7e9;
  color: #526168;
  font-size: 11px;
  font-weight: 700;
}

.warehouse-occupancy-badge.occupied { background: #d8f0e1; color: #19713d; }

@keyframes warehouseRackReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


.warehouse-location-list-values {
  display: grid;
  gap: 6px;
}
.warehouse-location-list-values > div + div {
  padding-top: 6px;
  border-top: 1px solid #e1e7e9;
}
.warehouse-location-list-values strong,
.warehouse-location-list-values small { display: block; }
.warehouse-location-list-values small {
  margin-top: 2px;
  color: #65747a;
  font-size: 11px;
}
.warehouse-location-list-stock { white-space: nowrap; }
.warehouse-location-loading { padding: 22px 4px; color: #607078; }
.warehouse-location-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.warehouse-location-summary strong { font-size: 18px; }
.warehouse-location-summary span { color: #607078; font-size: 13px; }
.warehouse-location-articles { display: grid; gap: 10px; }
.warehouse-location-article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, auto) minmax(180px, auto);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #dce3e6;
  border-radius: 10px;
  background: #fff;
}
.warehouse-location-article > div:first-child > strong,
.warehouse-location-article > div:first-child > span,
.warehouse-location-article > div:first-child > small,
.warehouse-location-stock > span,
.warehouse-location-stock > strong,
.warehouse-location-stock > small { display: block; }
.warehouse-location-article > div:first-child > span { margin-top: 3px; }
.warehouse-location-article > div:first-child > small,
.warehouse-location-stock > span,
.warehouse-location-stock > small { margin-top: 3px; color: #607078; font-size: 12px; }
.warehouse-location-stock { text-align: right; }

@media (max-width: 760px) {
  .warehouse-location-article { grid-template-columns: 1fr; gap: 9px; }
  .warehouse-location-stock { text-align: left; }
}
@media (max-width: 760px) {
  .warehouse-detail-header { align-items: flex-start; flex-direction: column; }
  .warehouse-rack-floor--editable { grid-template-columns: minmax(420px, 1fr) 48px; }
}
.warehouse-article-setup-card .custom-table-container {
  margin-top: 8px;
  margin-bottom: 0;
}

.warehouse-article-setup-card .custom-table-container tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.warehouse-article-setup-card .custom-table-container tbody tr:hover {
  background: #f3f8f8;
  box-shadow: inset 3px 0 0 #147d80;
}

.warehouse-article-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #edf1f2;
  color: #526067;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.warehouse-article-state.active {
  background: #e3f3e8;
  color: #176b39;
}

.warehouse-config-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 11px;
  box-sizing: border-box;
  border: 1px solid #d7e0e3;
  border-radius: 8px;
  background: #f7f9fa;
  cursor: pointer;
}

.warehouse-config-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.warehouse-form-grid [hidden] {
  display: none !important;
}

.warehouse-config-hint {
  min-height: 20px;
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #147d80;
  border-radius: 5px;
  background: #f1f7f7;
  color: #4b5e64;
  font-size: 13px;
  line-height: 1.4;
}

/* Lagerverwaltung: Ein-Seiten-Übersicht */
.warehouse-management-single-page {
  gap: 20px;
}
.warehouse-management-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.warehouse-management-heading h2,
.warehouse-inline-section-head h3,
.warehouse-inline-rack-heading h3 {
  margin: 0;
}
.warehouse-management-heading p {
  margin: 5px 0 0;
  color: #68777d;
}
.warehouse-management-selection {
  padding-top: 4px;
  scroll-margin-top: 18px;
}
.warehouse-inline-section-head,
.warehouse-inline-rack-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.warehouse-inline-section-head > div > span,
.warehouse-inline-rack-heading > div > span {
  display: block;
  margin-bottom: 3px;
  color: #6a787e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.warehouse-rack-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.warehouse-rack-tile {
  position: relative;
  min-height: 92px;
  padding: 14px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2px solid #d7e0e3;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 45, 50, 0.07);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.warehouse-rack-tile:hover,
.warehouse-rack-tile:focus-visible {
  border-color: #8c9ba1;
  box-shadow: 0 7px 16px rgba(31, 45, 50, 0.12);
  transform: translateY(-2px);
  outline: none;
}
.warehouse-rack-tile.is-selected {
  border-color: #c51d12;
  box-shadow: 0 0 0 3px rgba(197, 29, 18, 0.14), 0 7px 18px rgba(31, 45, 50, 0.13);
}
.warehouse-rack-tile-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border-radius: 8px;
  background: #edf2f3;
}
.warehouse-rack-tile-number small {
  color: #66757b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.warehouse-rack-tile-number strong {
  color: #202d32;
  font-size: 28px;
  line-height: 1;
}
.warehouse-rack-tile-info span,
.warehouse-rack-tile-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warehouse-rack-tile-info span { font-weight: 750; }
.warehouse-rack-tile-info small { margin-top: 5px; color: #68777d; font-size: 11px; }
.warehouse-rack-tile-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}
.warehouse-rack-tile-actions button {
  width: 25px;
  min-width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #d2dadd;
  border-radius: 6px;
  background: rgba(255,255,255,0.94);
  color: #526168;
  cursor: pointer;
}
.warehouse-rack-tile-actions button.delete { color: #a32720; }
.warehouse-rack-tile-actions button:hover { border-color: #c51d12; color: #c51d12; }
.warehouse-rack-inline {
  margin-top: 18px;
}
.warehouse-rack-inline:empty { display: none; }
.warehouse-rack-inline-card { padding: 16px; }
.warehouse-rack-inline-card .warehouse-rack-graphic {
  max-width: 1050px;
  min-height: 120px;
  margin-top: 12px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: #f7f9fa;
  box-shadow: none;
}
.warehouse-rack-inline-card .warehouse-rack-frame {
  min-width: 0;
  padding: 7px 8px 5px;
  border-right-width: 5px;
  border-left-width: 5px;
  background: #e9edef;
  box-shadow: inset 0 0 0 1px #aab5ba;
}
.warehouse-rack-inline-card .warehouse-rack-frame::before,
.warehouse-rack-inline-card .warehouse-rack-frame::after {
  display: none;
}
.warehouse-rack-inline-card .warehouse-rack-floor {
  padding: 4px 4px 8px;
  border-bottom-width: 5px;
  box-shadow: 0 4px 0 #46545a;
}
.warehouse-rack-inline-card .warehouse-rack-floor + .warehouse-rack-floor { margin-top: 7px; }
.warehouse-rack-inline-card .warehouse-rack-floor--editable {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 5px;
}
.warehouse-rack-inline-card .warehouse-rack-floor-positions {
  min-width: 0;
  gap: 5px;
}
.warehouse-rack-inline-card .warehouse-rack-position {
  min-height: 64px;
  padding: 4px;
  border-radius: 5px;
  box-shadow: none;
}
.warehouse-rack-inline-card .warehouse-rack-position::before { display: none; }
.warehouse-rack-inline-card .warehouse-rack-position-content {
  min-height: 54px;
  padding: 5px 6px;
  border: 0;
  background: rgba(255,255,255,0.86);
}
.warehouse-rack-inline-card .warehouse-rack-position-eyebrow { display: none; }
.warehouse-rack-inline-card .warehouse-rack-position-content > strong { font-size: 16px; }
.warehouse-rack-inline-card .warehouse-rack-position-state { font-size: 9px; }
.warehouse-rack-inline-card .warehouse-rack-position-content small { font-size: 9px; }
.warehouse-rack-inline-card .warehouse-rack-add-position {
  min-width: 42px;
}
.warehouse-rack-inline-card .warehouse-rack-add-floor {
  min-height: 42px;
  margin-top: 8px;
}
.warehouse-rack-inline-card .warehouse-rack-add-position small,
.warehouse-rack-inline-card .warehouse-rack-add-floor small {
  display: none;
}
@media (max-width: 760px) {
  .warehouse-management-heading,
  .warehouse-inline-section-head,
  .warehouse-inline-rack-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .warehouse-rack-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-rack-tile { grid-template-columns: 48px minmax(0, 1fr); padding: 10px; }
}

/* Lagerverwaltung: finale Fachzuordnung und Positions-QR */
.warehouse-position-qr {
  position: absolute;
  z-index: 4;
  top: 6px;
  right: 38px;
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(47, 66, 74, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #2d4149;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 24px;
  box-shadow: 0 2px 5px rgba(35, 47, 52, 0.14);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.warehouse-position-qr:hover,
.warehouse-position-qr:focus-visible {
  border-color: #26343a;
  background: #26343a;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.warehouse-position-qr-preview {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 20px;
  border: 1px solid #d9e1e4;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f4f7f8);
}

.warehouse-position-qr-svg {
  padding: 12px;
  border: 1px solid #dde4e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(29, 43, 49, 0.08);
}

.warehouse-position-qr-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.warehouse-position-qr-preview > div:last-child > span,
.warehouse-position-qr-preview > div:last-child > strong,
.warehouse-position-qr-preview > div:last-child > small {
  display: block;
}

.warehouse-position-qr-preview > div:last-child > span {
  color: #6a787e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warehouse-position-qr-preview > div:last-child > strong {
  margin-top: 5px;
  color: #1d292e;
  font-size: 25px;
}

.warehouse-position-qr-preview > div:last-child > small {
  margin-top: 10px;
  color: #607078;
  font-size: 13px;
  line-height: 1.45;
}

.warehouse-position-detail .custom-table tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.warehouse-position-detail .custom-table tbody tr:not(.warehouse-location-row-selected):not(.warehouse-location-row-disabled):hover > td {
  background: #f4f8f8;
}

.warehouse-position-detail .custom-table tbody tr.warehouse-location-row-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.warehouse-position-detail .custom-table tbody tr.warehouse-location-row-disabled > td {
  background: #f1f3f4;
}

.warehouse-position-detail .custom-table tbody tr.warehouse-location-row-selected > td {
  background: #fff3f1;
  border-bottom-color: #edc6c2 !important;
}

.warehouse-position-detail .custom-table tbody tr.warehouse-location-row-selected > td:first-child {
  box-shadow: inset 4px 0 0 #c51d12;
}

.warehouse-selected-location-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d9e1e4;
  border-left: 4px solid #c51d12;
  border-radius: 10px;
  background: #fbfcfc;
  box-shadow: 0 5px 16px rgba(31, 45, 50, 0.06);
}

.warehouse-selected-location-panel.is-empty {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left-color: #8b999f;
  color: #65747a;
  box-shadow: none;
}

.warehouse-selected-location-panel.is-empty strong,
.warehouse-selected-location-panel.is-empty span {
  display: block;
}

.warehouse-selected-location-panel.is-empty span {
  margin-top: 4px;
  font-size: 13px;
}

.warehouse-selected-location-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.warehouse-selected-location-heading span {
  color: #68777d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.warehouse-selected-location-heading h4 {
  margin: 2px 0 0;
  color: #1f2d32;
  font-size: 20px;
}

.warehouse-selected-location-heading > strong {
  color: #536269;
  font-size: 12px;
}

.warehouse-selected-location-articles {
  display: grid;
  gap: 8px;
}

.warehouse-selected-location-article {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(190px, auto) minmax(130px, auto) 38px;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid #dfe6e8;
  border-radius: 9px;
  background: #fff;
}

.warehouse-selected-location-main > strong,
.warehouse-selected-location-main > span,
.warehouse-selected-location-main > small,
.warehouse-selected-location-stock > span,
.warehouse-selected-location-stock > strong {
  display: block;
}

.warehouse-selected-location-main > strong {
  color: #1c292e;
  font-size: 14px;
}

.warehouse-selected-location-main > span {
  margin-top: 2px;
  color: #34474f;
  font-size: 13px;
}

.warehouse-selected-location-main > small {
  margin-top: 2px;
  color: #6b7a80;
}

.warehouse-assignment-role-badge,
.warehouse-location-role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid #d4dde0;
  border-radius: 999px;
  background: #f3f6f7;
  color: #41545b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-selected-location-stock {
  text-align: right;
}

.warehouse-selected-location-stock > span {
  color: #6a797f;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.warehouse-selected-location-stock > strong {
  margin-top: 3px;
  color: #203036;
  font-size: 14px;
}

.warehouse-assignment-delete {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid #efc6c2;
  border-radius: 8px;
  background: #fff7f6;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.warehouse-assignment-delete img {
  display: block;
  width: 100%;
  height: 100%;
}

.warehouse-assignment-delete:hover:not(:disabled),
.warehouse-assignment-delete:focus-visible {
  border-color: #b42318;
  background: #fbe3e0;
  outline: none;
  transform: translateY(-1px);
}

.warehouse-assignment-delete:disabled {
  cursor: wait;
  opacity: 0.55;
}

.warehouse-assignment-section {
  margin-top: 18px;
}

.warehouse-assignment-heading {
  align-items: center;
  gap: 20px;
}

.warehouse-assignment-target {
  min-width: 240px;
  padding: 9px 12px;
  border: 1px dashed #9ba8ad;
  border-radius: 8px;
  background: #f6f8f9;
  color: #68777d;
  text-align: right;
}

.warehouse-assignment-target span,
.warehouse-assignment-target strong {
  display: block;
}

.warehouse-assignment-target span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.warehouse-assignment-target strong {
  margin-top: 3px;
  font-size: 13px;
}

.warehouse-assignment-target.is-selected {
  border-style: solid;
  border-color: #c51d12;
  background: #fff3f1;
  color: #81241d;
  box-shadow: 0 0 0 3px rgba(197, 29, 18, 0.09);
}

.warehouse-assignment-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.warehouse-assignment-status {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #d8e0e3;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-assignment-status small {
  font-size: 9px;
  font-weight: 600;
}

.warehouse-assignment-status.is-complete {
  border-color: #b8ddc5;
  background: #e5f4ea;
  color: #176b39;
}

.warehouse-assignment-status.is-open {
  border-color: #efc1bd;
  background: #fff0ee;
  color: #9b2b22;
}

.warehouse-assignment-form {
  display: grid;
  gap: 16px;
}

.warehouse-assignment-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid #dce4e6;
  border-radius: 10px;
  background: #f5f8f9;
}

.warehouse-assignment-summary span,
.warehouse-assignment-summary strong,
.warehouse-assignment-summary small {
  display: block;
}

.warehouse-assignment-summary span {
  color: #6b797f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warehouse-assignment-summary strong {
  margin-top: 4px;
  color: #1e2c31;
  font-size: 16px;
}

.warehouse-assignment-summary small {
  margin-top: 3px;
  color: #64747a;
}

.warehouse-assignment-role-options {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.warehouse-assignment-role-options legend {
  margin-bottom: 8px;
  color: #34474f;
  font-size: 13px;
  font-weight: 800;
}

.warehouse-assignment-role-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.warehouse-assignment-role-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #c51d12;
}

.warehouse-assignment-role-option > span {
  padding: 10px 12px;
  border: 1px solid #d9e1e4;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.warehouse-assignment-role-option input:checked + span {
  border-color: #c51d12;
  background: #fff3f1;
  box-shadow: 0 0 0 3px rgba(197, 29, 18, 0.08);
}

.warehouse-assignment-role-option strong,
.warehouse-assignment-role-option small {
  display: block;
}

.warehouse-assignment-role-option strong {
  color: #26383f;
  font-size: 13px;
}

.warehouse-assignment-role-option small {
  margin-top: 2px;
  color: #69787e;
  font-size: 11px;
}

.warehouse-assignment-additional {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-left: 3px solid #c51d12;
  border-radius: 7px;
  background: #f6f8f9;
  color: #364951;
  font-size: 13px;
  font-weight: 700;
}

.warehouse-assignment-additional[hidden] {
  display: none !important;
}

.warehouse-assignment-additional input {
  width: 100%;
  padding: 9px 10px;
  box-sizing: border-box;
  border: 1px solid #cbd6da;
  border-radius: 7px;
  background: #fff;
}

.warehouse-assignment-additional small {
  color: #6b797f;
  font-weight: 400;
}

@media (max-width: 820px) {
  .warehouse-selected-location-article {
    grid-template-columns: minmax(0, 1fr) auto 38px;
  }
  .warehouse-selected-location-stock {
    grid-column: 1 / 3;
    text-align: left;
  }
  .warehouse-assignment-heading,
  .warehouse-selected-location-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .warehouse-assignment-target {
    min-width: 0;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .warehouse-position-qr-preview,
  .warehouse-assignment-summary {
    grid-template-columns: 1fr;
  }
  .warehouse-position-qr-svg {
    width: min(190px, 100%);
    margin: 0 auto;
  }
  .warehouse-selected-location-article {
    grid-template-columns: minmax(0, 1fr) 38px;
  }
  .warehouse-selected-location-article > div:nth-child(2),
  .warehouse-selected-location-stock {
    grid-column: 1;
    text-align: left;
  }
  .warehouse-assignment-delete {
    grid-column: 2;
    grid-row: 1;
  }
}

.module-read-only-banner {
  position: sticky;
  z-index: 20;
  top: 12px;
  margin: 0 0 18px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d1a925;
  border-left: 5px solid #c51d12;
  border-radius: 10px;
  background: #fff8dd;
  color: #26343a;
  box-shadow: 0 5px 16px rgba(38, 52, 58, 0.1);
}
.module-read-only-banner strong {
  flex: 0 0 auto;
  color: #9b2018;
}
.module-read-only-banner span {
  line-height: 1.35;
}
.module-read-only-banner.is-highlighted {
  animation: moduleReadOnlyHighlight 0.65s ease;
}
.main-content[data-read-only-module] [data-read-only-hidden="true"] {
  display: none !important;
}
@keyframes moduleReadOnlyHighlight {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
}
@media (max-width: 720px) {
  .module-read-only-banner {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* TASK MANAGEMENT */
.task-shell {
  display: grid;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

.task-intro,
.task-card {
  border: 1px solid #d9e1e5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32, 41, 44, 0.06);
}

.task-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border-top: 6px solid #20292c;
}

.task-intro h2,
.task-list-header h3 {
  margin: 4px 0 6px;
  color: #172125;
}

.task-intro p,
.task-list-header span {
  margin: 0;
  color: #66757d;
}

.task-eyebrow {
  color: #b91812;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.task-card {
  padding: 24px 28px;
  min-width: 0;
}

.task-filter-card {
  border-top: 4px solid #b91812;
}

.task-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.task-filter-grid label,
.task-form-grid label {
  display: grid;
  gap: 7px;
  color: #44545c;
  font-size: 13px;
  font-weight: 700;
}

.task-filter-grid input,
.task-filter-grid select,
.task-form-grid input,
.task-form-grid select,
.task-form-grid textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #cad5da;
  border-radius: 10px;
  background: #fff;
  color: #172125;
  padding: 10px 12px;
  font: inherit;
}

.task-form-grid textarea,
.task-form-grid select[multiple] {
  min-height: 110px;
}

.task-filter-grid input:focus,
.task-filter-grid select:focus,
.task-form-grid input:focus,
.task-form-grid select:focus,
.task-form-grid textarea:focus {
  border-color: #b91812;
  outline: 3px solid rgba(185, 24, 18, 0.1);
}

.task-filter-actions,
.task-list-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.task-list-header {
  justify-content: space-between;
  margin: 0 0 18px;
}

.task-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d9e1e5;
  border-radius: 14px;
}

.task-table {
  min-width: 1100px;
  margin: 0;
}

.task-table th {
  white-space: nowrap;
}

.task-table td {
  vertical-align: middle;
}

.task-table td strong,
.task-table td small {
  display: block;
}

.task-table td small {
  max-width: 360px;
  margin-top: 4px;
  color: #6b7980;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-priority,
.task-status,
.task-assignment-type {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.task-priority--low { background: #e9eff2; color: #4f6068; }
.task-priority--normal { background: #dcecf7; color: #245a78; }
.task-priority--high { background: #fff0c2; color: #785700; }
.task-priority--critical { background: #f8d8d5; color: #a3211b; }
.task-status--open { background: #e9eff2; color: #42545d; }
.task-status--in_progress { background: #dcecf7; color: #245a78; }
.task-status--waiting { background: #fff0c2; color: #785700; }
.task-status--done { background: #d9f0dc; color: #1f662a; }
.task-status--cancelled { background: #ece6ef; color: #65466e; }
.task-assignment-type { background: #f0f3f4; color: #34444b; }

.task-row-overdue td:first-child {
  box-shadow: inset 4px 0 #c51f18;
}

.task-due-overdue {
  color: #b91812;
  font-weight: 800;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.task-action,
.task-page-button {
  border: 1px solid #becbd1;
  border-radius: 8px;
  background: #fff;
  color: #28373e;
  padding: 7px 10px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.task-action:hover,
.task-page-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(32, 41, 44, 0.12);
  background: #f3f6f7;
}

.task-action--done { border-color: #8db999; color: #1f662a; }
.task-action--delete { border-color: #e1aaa6; color: #a3211b; }

.task-empty-cell {
  padding: 48px 20px !important;
  color: #6b7980;
  text-align: center;
}

.task-load-error,
.task-message--error { color: #a3211b; }
.task-message--success { color: #1f662a; }

.task-message {
  border-radius: 10px;
  background: #f3f6f7;
  padding: 12px 14px;
  font-weight: 700;
}

.task-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.task-page-button {
  min-width: 40px;
  min-height: 40px;
}

.task-page-button.is-active {
  border-color: #b91812;
  background: #b91812;
  color: #fff;
}

.task-page-button:disabled {
  cursor: default;
  opacity: 0.4;
}

.task-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.task-form-wide {
  grid-column: 1 / -1;
}

.task-form-grid label[hidden] {
  display: none;
}

.task-form-grid label small {
  color: #718088;
  font-weight: 500;
}

.task-checkbox {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
}

.task-checkbox input {
  width: 20px;
  min-height: 20px;
}

.task-form-message {
  margin: 18px 0 0;
  border-radius: 10px;
  background: #fff0ee;
  padding: 12px 14px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .task-intro,
  .task-list-header {
    align-items: stretch;
    flex-direction: column;
  }

  .task-intro,
  .task-card {
    padding: 20px;
  }

  .task-form-grid {
    grid-template-columns: 1fr;
  }

  .task-form-wide {
    grid-column: auto;
  }
}
.task-assignment-card {
  border-top: 4px solid #273238;
}

.task-assignment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.task-assignment-grid label {
  display: grid;
  gap: 7px;
  color: #44545c;
  font-size: 13px;
  font-weight: 700;
}

.task-assignment-grid label[hidden] {
  display: none;
}

.task-assignment-grid input,
.task-assignment-grid select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #cad5da;
  border-radius: 10px;
  background: #fff;
  color: #172125;
  padding: 10px 12px;
  font: inherit;
}

.task-rule-message {
  margin-right: auto;
  color: #66757d;
  font-weight: 700;
}
.task-intro-actions,
.task-menu-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-menu-summary {
  margin-left: auto;
  gap: 5px;
}

.task-menu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  box-sizing: border-box;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.task-menu-count--open {
  border: 1px solid #d4dde1;
  background: #fff;
  color: #111;
}

.task-menu-count--week {
  border: 1px solid #d7ab1f;
  background: #f7d95f;
  color: #332700;
}

.task-menu-count--urgent {
  border: 1px solid #e0342d;
  background: #c51f18;
  color: #fff;
}

.task-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 5px 2px;
}

.task-category-chip {
  min-height: 40px;
  border: 1px solid #c8d2d7;
  border-radius: 999px;
  background: #fff;
  color: #34444b;
  padding: 8px 16px;
  font-weight: 800;
  cursor: pointer;
}

.task-category-chip:hover,
.task-category-chip.is-active {
  border-color: #b91812;
  background: #b91812;
  color: #fff;
}

.task-category-list {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  border-top: 1px solid #dbe2e5;
  padding-top: 18px;
}

.task-category-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-radius: 10px;
  background: #f3f6f7;
  padding: 11px 13px;
}

.task-category-list span,
.task-category-list small {
  display: block;
}

.task-category-list small {
  margin-top: 3px;
  color: #6a7980;
}

.task-category-list button {
  margin-left: 7px;
  border: 1px solid #bcc9ce;
  border-radius: 7px;
  background: #fff;
  padding: 6px 9px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .task-intro-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .task-category-list > div {
    align-items: flex-start;
    flex-direction: column;
  }
}
.task-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(280px, 1.8fr);
  gap: 10px;
}

.task-overview-card {
  min-width: 0;
  border: 1px solid #d8e0e4;
  border-radius: 12px;
  background: #fff;
  padding: 13px 15px;
  box-shadow: 0 4px 12px rgba(31, 42, 47, 0.05);
}

.task-overview-card span {
  display: block;
  color: #66757d;
  font-size: 12px;
  font-weight: 750;
}

.task-overview-card > strong {
  display: block;
  margin-top: 4px;
  color: #172125;
  font-size: 25px;
}

.task-overview-card--week { border-left: 4px solid #e0b52d; }
.task-overview-card--today { border-left: 4px solid #df6a20; }
.task-overview-card--overdue { border-left: 4px solid #c51f18; }

.task-overview-card--priorities > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.task-overview-card--priorities b {
  border-radius: 999px;
  background: #eef2f4;
  padding: 5px 8px;
  font-size: 11px;
}

#taskPriorityCritical { color: #a3211b; background: #f8d8d5; }
#taskPriorityHigh { color: #785700; background: #fff0c2; }
#taskPriorityNormal { color: #245a78; background: #dcecf7; }
#taskPriorityLow { color: #4f6068; }

.task-personal-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.task-personal-panel {
  padding: 18px 20px;
}

.task-compact-list {
  display: grid;
  gap: 8px;
}

.task-compact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid #dde4e7;
  border-left: 4px solid #91a1a8;
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
}

.task-compact-item--critical { border-left-color: #c51f18; }
.task-compact-item--high { border-left-color: #e0b52d; }
.task-compact-item--normal { border-left-color: #4d8cae; }
.task-compact-item--low { border-left-color: #91a1a8; }
.task-compact-item.is-overdue { background: #fff7f6; }

.task-compact-main {
  min-width: 0;
}

.task-compact-title,
.task-compact-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.task-compact-title strong {
  color: #172125;
  font-size: 14px;
}

.task-compact-meta {
  margin-top: 5px;
  color: #68777e;
  font-size: 11px;
}

.task-compact-meta > span:not(.task-status) + span:not(.task-status)::before {
  content: '·';
  margin-right: 7px;
  color: #a1adb2;
}

.task-compact-item p {
  margin: 6px 0 0;
  color: #596970;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-compact-item .task-priority,
.task-compact-item .task-status {
  padding: 3px 7px;
  font-size: 10px;
}

.task-compact-item .task-actions {
  flex: 0 0 auto;
}

.task-compact-item .task-action {
  padding: 5px 7px;
  font-size: 11px;
}

.task-compact-empty {
  border: 1px dashed #ccd6da;
  border-radius: 10px;
  color: #748188;
  padding: 28px 15px;
  text-align: center;
}

@media (max-width: 1350px) {
  .task-overview-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

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

@media (max-width: 650px) {
  .task-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-overview-card--priorities { grid-column: 1 / -1; }
  .task-compact-item { align-items: flex-start; flex-direction: column; }
}
/* Durchsuchbare Auswahlfelder */
.ui-autocomplete-select {
  position: relative;
  width: 100%;
  min-width: 0;
  font-weight: 400;
}

.ui-autocomplete-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.ui-autocomplete-selection {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.ui-autocomplete-select.is-multiple .ui-autocomplete-selection {
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid #cad5da;
  border-radius: 10px;
  background: #fff;
}

.ui-autocomplete-select.is-multiple:focus-within .ui-autocomplete-selection {
  border-color: #b91812;
  outline: 3px solid rgba(185, 24, 18, 0.1);
}

.ui-autocomplete-select.is-multiple .ui-autocomplete-input {
  flex: 1 1 180px;
  width: auto;
  min-width: 140px;
  min-height: 32px;
  padding: 4px;
  border: 0;
  outline: 0;
}

.ui-autocomplete-chips {
  display: contents;
}

.ui-autocomplete-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid #c8d1d5;
  border-radius: 999px;
  background: #eef2f3;
  color: #26343a;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ui-autocomplete-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-autocomplete-chip b {
  color: #a3211b;
  font-size: 15px;
  line-height: 1;
}

.ui-autocomplete-results {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #c5d0d5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 37, 43, 0.18);
}

.ui-autocomplete-results[hidden] {
  display: none;
}

.ui-autocomplete-results button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #172125;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.ui-autocomplete-results button:hover,
.ui-autocomplete-results button.is-active {
  background: #f3e7e6;
}

.ui-autocomplete-results button b {
  color: #a3211b;
  font-size: 11px;
  white-space: nowrap;
}

.ui-autocomplete-empty {
  padding: 10px;
  color: #687980;
  font-size: 13px;
}
/* -------------------- */
/* TOPBAR ACCOUNT MENU */
.topbar-left {
  flex: 1 1 auto;
}

.topbar-right {
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-account {
  position: relative;
}

.topbar-account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 5px 8px 5px 6px;
  border: 1px solid #d7dfe3;
  border-radius: 12px;
  background: #ffffff;
  color: #20292c;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.topbar-account-trigger:hover,
.topbar-account.is-open .topbar-account-trigger {
  border-color: #b7c3c8;
  background: #f7f9fa;
  box-shadow: 0 5px 16px rgba(25, 38, 44, 0.08);
}

.topbar-account-trigger:focus-visible {
  border-color: #c51d12;
  outline: 3px solid rgba(197, 29, 18, 0.13);
}

.topbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #20292c;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.topbar-account-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.topbar-account-copy strong,
.topbar-account-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-account-copy strong {
  color: #20292c;
  font-size: 13px;
  line-height: 1.2;
}

.topbar-account-copy span {
  margin-top: 2px;
  color: #748087;
  font-size: 11px;
  line-height: 1.2;
}

.topbar-account-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #68767c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 0.15s ease;
}

.topbar-account.is-open .topbar-account-chevron {
  transform: rotate(180deg);
}

.topbar-account-dropdown {
  position: absolute;
  z-index: 300;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  padding: 10px;
  border: 1px solid #d7dfe3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(25, 38, 44, 0.18);
}

.topbar-account-dropdown[hidden] {
  display: none;
}

.topbar-account-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 5px 6px 11px;
  border-bottom: 1px solid #e7ecee;
}

.topbar-account-role > span {
  color: #68767c;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topbar-account-dropdown .sidebar-role-pill {
  width: auto;
  height: 28px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
}

.topbar-account-action {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #26343a;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.topbar-account-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.topbar-account-action:hover,
.topbar-account-action:focus-visible {
  background: #f1f4f5;
  outline: none;
}

.topbar-account-action--logout {
  color: #a3211b;
}

.topbar-account-action--logout:hover,
.topbar-account-action--logout:focus-visible {
  background: #fff0ef;
}

@media (max-width: 1100px) {
  .topbar-account-trigger {
    min-width: 0;
    padding-right: 6px;
  }

  .topbar-account-copy {
    display: none;
  }
}

@media (max-width: 768px) {
  .top-bar {
    gap: 8px;
    padding: 8px 12px;
  }

  .topbar-account-trigger {
    gap: 4px;
    padding: 4px;
  }

  .topbar-account-chevron {
    display: none;
  }

  .topbar-account-dropdown {
    width: min(270px, calc(100vw - 24px));
  }
}
/* Tickets */
.ticket-shell{display:grid;gap:20px;padding:28px}.ticket-intro,.ticket-list-header,.ticket-filter-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.ticket-intro>div:first-child>span{color:#b51d16;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ticket-intro h2,.ticket-list-header h3{margin:4px 0;color:#182327}.ticket-intro p,.ticket-list-header span{margin:0;color:#66757c}.ticket-card{min-width:0;padding:22px;border:1px solid #d9e1e4;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(28,42,48,.05)}
.ticket-overview{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:12px}.ticket-overview>div{padding:15px 16px;border:1px solid #d8e0e3;border-top:4px solid #253237;border-radius:12px;background:#fff}.ticket-overview span{display:block;color:#66757c;font-size:12px;font-weight:750}.ticket-overview strong{display:block;margin-top:5px;color:#172226;font-size:25px}.ticket-overview .is-submitted{border-top-color:#2775c9}.ticket-overview .is-accepted{border-top-color:#d7a800}.ticket-overview .is-rejected{border-top-color:#c62828}.ticket-overview .is-progress{border-top-color:#e97916}.ticket-overview .is-done{border-top-color:#24924b}
.ticket-filter-card{display:flex;align-items:end;justify-content:space-between;gap:18px}.ticket-filter-grid{display:grid;flex:1;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.ticket-filter-grid label,.ticket-form label{display:grid;gap:6px;color:#526168;font-size:13px;font-weight:750}.ticket-filter-grid input,.ticket-filter-grid select,.ticket-form select,.ticket-form textarea{width:100%;min-height:43px;padding:9px 11px;border:1px solid #cbd6da;border-radius:9px;background:#fff;color:#1d292e;font:inherit}.ticket-filter-grid input:focus,.ticket-filter-grid select:focus,.ticket-form select:focus,.ticket-form textarea:focus{border-color:#b51d16;box-shadow:0 0 0 3px rgba(181,29,22,.1);outline:none}.ticket-filter-actions{justify-content:flex-end}.ticket-list-header{margin-bottom:16px}
.ticket-table-wrap{max-width:100%;overflow-x:auto;border:1px solid #d9e1e4;border-radius:12px}.ticket-table{width:100%;min-width:900px;border-collapse:collapse}.ticket-table th,.ticket-table td{padding:11px 13px;border-bottom:1px solid #e0e6e8;text-align:left;vertical-align:top}.ticket-table th{background:#f0f3f4;color:#4d5b61;font-size:12px;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}.ticket-table tbody tr:last-child td{border-bottom:0}.ticket-table tbody tr:hover{background:#fafbfb}.ticket-description{min-width:260px;max-width:580px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.ticket-module{white-space:nowrap}
.ticket-status,.ticket-priority{display:inline-flex;align-items:center;justify-content:center;min-height:27px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap}.ticket-status--submitted{background:#dcecff;color:#195a9e}.ticket-status--accepted{background:#fff1b7;color:#755c00}.ticket-status--rejected{background:#ffe0dd;color:#a5211b}.ticket-status--in_progress{background:#ffe5cc;color:#a44d00}.ticket-status--done{background:#d9f1df;color:#166c35}.ticket-priority--open{background:#edf1f2;color:#526168}.ticket-priority--low{background:#edf1f2;color:#526168}.ticket-priority--medium{background:#fff1b7;color:#755c00}.ticket-priority--high{background:#ffe0dd;color:#a5211b}
.ticket-actions{display:flex;gap:7px;white-space:nowrap}.ticket-actions button{padding:6px 9px;border:1px solid #cbd6da;border-radius:7px;background:#fff;color:#26343a;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.ticket-actions button:hover{background:#edf1f2}.ticket-actions button.is-delete{border-color:#edb5b1;color:#a5211b}.ticket-actions button.is-delete:hover{background:#fff0ef}.ticket-empty{padding:42px 16px!important;color:#718087;text-align:center!important}.ticket-empty.is-error,.ticket-form-message.is-error,.ticket-message.is-error{color:#b51d16}.ticket-message{margin:0;padding:11px 14px;border-radius:9px;font-weight:700}.ticket-message.is-success{background:#e5f4e9;color:#176735}.ticket-message.is-error{background:#fff0ef}
.ticket-pagination{display:flex;justify-content:center;gap:6px;margin-top:16px}.ticket-pagination button{min-width:38px;height:38px;border:1px solid #ccd6da;border-radius:8px;background:#fff;color:#26343a;font-weight:800;cursor:pointer}.ticket-pagination button.is-active{border-color:#b51d16;background:#b51d16;color:#fff}.ticket-pagination button:disabled{cursor:default;opacity:.4}.ticket-form{display:grid;gap:16px}.ticket-form textarea{min-height:170px;resize:vertical}.ticket-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ticket-form-creator{display:flex;justify-content:space-between;gap:16px;padding:13px 14px;border-radius:9px;background:#f0f3f4;color:#56656b}.ticket-form-creator strong{color:#1b272c}.ticket-form-message{margin:0}
@media(max-width:1250px){.ticket-overview{grid-template-columns:repeat(3,minmax(140px,1fr))}.ticket-filter-card{align-items:stretch;flex-direction:column}.ticket-filter-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media(max-width:700px){.ticket-shell{gap:14px;padding:16px}.ticket-intro,.ticket-list-header{align-items:stretch;flex-direction:column}.ticket-overview{grid-template-columns:repeat(2,minmax(120px,1fr))}.ticket-filter-grid,.ticket-form-row{grid-template-columns:1fr}.ticket-filter-actions{flex-wrap:wrap}.ticket-filter-actions>*{flex:1}}
/* Ticketnummern und Ticketzuordnung */
.ticket-number{display:inline-block;color:#172226;font-variant-numeric:tabular-nums;white-space:nowrap}.ticket-child-links{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:7px}.ticket-child-links span{width:100%;color:#718087;font-size:10px;font-weight:750;text-transform:uppercase}.ticket-child-links button{padding:4px 7px;border:1px solid #cbd6da;border-radius:999px;background:#f3f6f7;color:#26343a;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.ticket-child-links button:hover,.ticket-child-links button:focus-visible{border-color:#b51d16;background:#fff0ef;color:#a5211b;outline:none}.ticket-parent-note{margin:0;padding:10px 12px;border-left:4px solid #2775c9;border-radius:7px;background:#edf5ff;color:#28587f;font-size:13px}.ticket-table{min-width:1050px}
.ticket-dialog-delete{margin-right:auto!important;border-color:#edb5b1!important;color:#a5211b!important}.ticket-dialog-delete:hover,.ticket-dialog-delete:focus-visible{background:#fff0ef!important}

/* Aufgaben: persönliche Übersicht und Lesebestätigung */
.task-menu-count--unread { border: 1px solid #2874bf; background: #2874bf; color: #fff; }
.task-workspace { gap: 16px; }
.task-workspace .task-intro { gap: 16px; padding: 18px 20px; flex-wrap: wrap; }
.task-workspace .task-intro h2 { font-size: 23px; }
.task-workspace .task-intro p { font-size: 12px; }
.task-heading-priorities { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.task-heading-priorities .task-priority { white-space: nowrap; }
.task-searchbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid #d9e1e4; border-radius: 12px; background: #fff; overflow-x: auto; }
.task-searchbar > input { flex: 1; min-width: 180px; max-width: none; margin: 0; }
.task-searchbar > button { flex-shrink: 0; white-space: nowrap; }
.task-search-tokens { display: flex; gap: 5px; flex-shrink: 0; }
.task-search-tokens:empty { display: none; }
.task-search-token { white-space: nowrap; border: 1px solid #ccd7dc; border-radius: 999px; padding: 5px 9px; background: #f1f5f7; color: #33474f; cursor: pointer; }
.task-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; align-items: flex-start; }
.task-category-card { flex: 0 1 420px; max-width: 100%; min-width: 0; border: 1px solid #d9e1e4; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(28,42,48,.04); overflow: hidden; }
.task-category-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 13px 14px 8px; background: #fff; }
.task-category-heading > div { min-width: 0; }
.task-category-heading h3 { margin: 2px 0; font-size: 15px; color: #203139; overflow-wrap: anywhere; }
.task-category-heading > div > span { color: #75838a; font-size: 10px; }
.task-category-count { flex-shrink: 0; border-radius: 999px; background: #e9eff2; padding: 4px 7px; font-size: 11px; color: #526168; white-space: nowrap; }
.task-category-toggle { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; background: #fff; color: #53666e; font-size: 11px; cursor: pointer; }
.task-category-toggle input { margin: 0; accent-color: #2874bf; }
.task-category-body { max-height: 390px; overflow-y: auto; }
.task-category-own { padding: 8px; }
.task-category-delegated { border-top: 2px solid #d7e1e6; padding: 8px; background: #fff; }
.task-category-delegated h4 { margin: 0 3px 8px; color: #5a707c; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.task-category-card .task-compact-item { display: block; padding: 9px; margin-bottom: 7px; border-radius: 7px; }
.task-category-card .task-compact-item:last-child { margin-bottom: 0; }
.task-category-card .task-compact-title { gap: 5px; align-items: flex-start; }
.task-category-card .task-compact-title strong { font-size: 13px; overflow-wrap: anywhere; }
.task-category-card .task-compact-meta { gap: 5px; margin-top: 5px; font-size: 10px; }
.task-category-card .task-actions { justify-content: flex-end; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.task-category-card .task-action { font-size: 10px; padding: 4px 7px; }
.task-category-card .task-priority, .task-category-card .task-status { font-size: 9px; padding: 3px 5px; }
.task-unread-label { background: #dcecff; color: #195a9e; padding: 3px 6px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.task-category-card .is-unread { box-shadow: inset 0 0 0 1px #b2d2ed; }
.task-action--read { border-color: #7bacd3; color: #195a9e; background: #edf5ff; }
.task-description-details { margin-top: 7px; font-size: 11px; }
.task-description-details summary { cursor: pointer; color: #60757f; }
.task-description-details p { white-space: pre-wrap; overflow-wrap: anywhere; }
.task-group-empty { padding: 8px; color: #7c8c93; font-size: 11px; }
.task-inline-dates { display: flex; align-items: center; gap: 8px; }
.task-inline-dates label { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: #526168; }
.task-inline-dates input { min-width: 135px; min-height: 34px; padding: 5px; border: 1px solid #cbd6da; border-radius: 6px; }
.task-archive .custom-table-header { flex-wrap: wrap; gap: 10px; }
.task-archive .custom-toolbar { flex-wrap: wrap; flex: 1; }
@media (max-width: 760px) {
  .task-workspace { padding: 14px; }
  .task-heading-priorities { margin-left: 0; }
  .task-workspace .task-intro-actions { flex-wrap: wrap; }
  .task-inline-dates { flex-wrap: wrap; }
}

/* Aufgaben: Fälligkeit und Neuanlage je Kategorie */
.task-category-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: #fff; }
.task-category-controls .task-category-toggle { padding: 0; background: transparent; }
.task-category-add { margin-left: auto; padding: 4px 6px; border: 1px solid #bac9d0; border-radius: 6px; background: #fff; color: #334b57; font: inherit; font-size: 10px; cursor: pointer; }
.task-category-add:hover { background: #eaf0f3; }
.task-category-card .task-compact-due--soon { background: #fff2c2; }
.task-category-card .task-compact-due--due { background: #ffdedb; }
.task-category-card .task-compact-due--none { background: #eef0f2; }
.task-category-card .task-compact-due--later { background: #dcecf7; }

/* Einzelne Aufgaben: Aktionen neben dem mehrzeiligen Titel */
.task-category-card .task-compact-heading { display: flex; align-items: flex-start; gap: 8px; }
.task-category-card .task-compact-heading .task-compact-title { flex: 1; min-width: 0; }
.task-category-card .task-compact-heading .task-compact-title strong { white-space: normal; overflow-wrap: anywhere; }
.task-category-card .task-compact-heading .task-actions { margin: 0 0 0 auto; max-width: 65%; flex-shrink: 1; }
.task-category-card .task-compact-meta > .task-priority::before { content: none; }

/* Persönlicher Arbeitsbereich: Priorität und Fälligkeit filtern */
.task-heading-priorities { flex-direction: column; align-items: stretch; }
.task-summary-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.task-summary-row > button { cursor: pointer; border: 1px solid transparent; font-family: inherit; font-size: 11px; font-weight: 700; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.task-summary-row > button[aria-pressed="true"] { outline: 2px solid #334b57; outline-offset: 1px; }
.task-summary-row > button:focus-visible { outline: 2px solid #2874bf; outline-offset: 2px; }
.task-summary-row > button:hover { filter: brightness(.96); }
.task-date-filter--due { background: #ffdedb; color: #922c24; }
.task-date-filter--soon { background: #fff2c2; color: #715b13; }
.task-summary-row .task-date-filter--later { background: #dcecf7; color: #245a78; }
.task-date-filter--none { background: #eef0f2; color: #53636c; }
@media (max-width: 480px) {
  .task-heading-priorities { width: 100%; }
  .task-summary-row { gap: 4px; }
  .task-summary-row > button { padding: 5px 3px; font-size: 10px; white-space: normal; }
}

/* Aufgabenbilder */
.task-image-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.task-image-upload[hidden], .task-image-preview[hidden] { display: none; }
.task-image-upload label { display: grid; gap: 6px; }
.task-image-upload input { max-width: 100%; }
.task-image-upload small { flex-basis: 100%; color: #68777e; }
.task-image-message { margin: 8px 0; overflow-wrap: anywhere; }
.task-image-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #dde4e7; }
.task-image-row > span { flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.task-image-row small { display: block; margin-top: 4px; color: #68777e; }
.task-image-row > div { display: flex; gap: 6px; }
.task-image-preview { margin: 16px 0 0; }
.task-image-preview figcaption { overflow-wrap: anywhere; margin-bottom: 8px; }
.task-image-preview img { display: block; max-width: 100%; max-height: 65vh; object-fit: contain; }

/* Sammelkarten jeweils unter der kürzesten Spalte */
.task-category-grid.is-masonry { display: block; position: relative; }
.task-category-grid.is-masonry > .task-category-card { position: absolute; margin: 0; }

/* Aktionssymbole wie in den anderen Modulen. */
.task-action[data-task-action='done'],
.task-action[data-task-action='edit'],
.task-action[data-task-action='images'],
.task-action[data-task-action='delete'] { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; font-size: 18px; }
.task-action img { display: block; width: 16px; height: 16px; pointer-events: none; }

.task-action--read { background: #195a9e; border-color: #195a9e; color: #fff; font-weight: 600; }
.task-action--read:hover { background: #124779; border-color: #124779; color: #fff; }

.task-recipient-unread { color: #bb1e10; font-size: 12px; font-weight: 700; margin-bottom: 5px; }

/* Gemeinsame Aufgabenlisten fuer Verwaltung und Archiv. */
.task-data-list .custom-table-header, .task-user-overview .custom-table-header { flex-wrap: wrap; gap: 10px; }
.task-data-list .custom-toolbar, .task-user-overview .custom-toolbar { flex-wrap: wrap; }
.task-table-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
.task-table-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.task-table-filters input[type='date'] { padding: 6px 8px; min-height: 34px; }
.task-table-filters label:last-child { min-width: 180px; }
.task-data-list td small { display: block; margin-top: 4px; color: #607783; font-size: 11px; }
.task-data-list td strong { display: block; min-width: 140px; white-space: normal; overflow-wrap: anywhere; }
.task-data-list .task-actions { flex-wrap: nowrap; }
.task-table-description { margin-top: 4px; max-width: 320px; font-size: 11px; white-space: normal; }
.task-table-description summary { cursor: pointer; color: #607783; }
.task-table-description p { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-data-list .task-data-row--due > td { background: #ffdedb; }
.task-data-list .task-data-row--soon > td { background: #fff2c2; }
.task-data-list .task-data-row--later > td { background: #dcecf7; }
.task-data-list .task-data-row--none > td, .task-data-list .task-data-row--cancelled > td { background: #eef0f2; }
.task-data-list .task-data-row--done > td { background: #edf7ef; }
.task-table-read { font-size: 11px; white-space: nowrap; }
.task-table-read.is-unread { color: #195a9e; font-weight: 700; }
.task-stat-count { display: inline-flex; justify-content: center; min-width: 32px; padding: 4px 9px; border-radius: 999px; font-weight: 700; }
.task-stat-count--due { background: #ffdedb; color: #922c24; }
.task-stat-count--soon { background: #fff2c2; color: #715b13; }
.task-stat-count--total { background: #eef0f2; color: #334b57; }
.task-stat-count--unread { background: #dcecf7; color: #195a9e; }
.task-data-list, .task-user-overview { min-width: 0; }

/* Kalenderwochen und persönliche Aufgabentermine */
.absence-calendar-week-number {
  padding-top: 12px;
  color: #606b70;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.absence-calendar-task {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #f0d6d3;
  border-left: 4px solid #4d8cae;
  border-radius: 7px;
  background: #fff0ee;
  color: #713b36;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.absence-calendar-task:hover { background: #ffe4df; }
.absence-calendar-task:focus-visible { outline: 2px solid #334b57; outline-offset: 2px; }
.calendar-task-priority--critical { border-left-color: #c51f18; }
.calendar-task-priority--high { border-left-color: #e0b52d; }
.calendar-task-priority--normal { border-left-color: #4d8cae; }
.calendar-task-priority--low { border-left-color: #91a1a8; }
.calendar-task-detail { border-left-width: 4px; border-left-style: solid; padding: 4px 0 4px 18px; }
.calendar-task-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #606b70; margin-bottom: 18px; }
.calendar-task-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.calendar-task-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 20px 0 0; }
.calendar-task-facts > div { min-width: 0; border-radius: 8px; padding: 10px 12px; background: #f5f7f8; }
.calendar-task-facts dt { color: #606b70; font-size: 12px; margin-bottom: 4px; }
.calendar-task-facts dd { margin: 0; color: #20292c; font-weight: 600; overflow-wrap: anywhere; }
.team-calendar-week-header {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 28px;
  padding: 4px;
  background: #e2e9ed;
  color: #334b57;
  text-align: center;
}
.team-calendar-table thead tr:nth-child(2) .team-calendar-day-header {
  top: 28px;
}
/* ISO-Prüfverwaltung */
.iso-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.iso-heading h2 { margin:0 0 6px; }
.iso-heading p { margin:0; color:#647887; }
.iso-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.iso-form label { display:flex; flex-direction:column; gap:6px; min-width:0; font-weight:600; }
.iso-form input:not([type="checkbox"]), .iso-form select, .iso-form textarea { box-sizing:border-box; width:100%; padding:9px 11px; border:1px solid #ccd7de; border-radius:7px; font:inherit; background:#fff; color:#26343c; }
.iso-form input:disabled { background:#f1f3f5; color:#78858e; }
.iso-form textarea { resize:vertical; }
.iso-form fieldset { border:1px solid #d7e1e8; border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.iso-form .iso-check { flex-direction:row; align-items:center; }
.iso-form small { color:#647887; font-weight:normal; }
.iso-wide { grid-column:1 / -1; }
.iso-error { color:#b42318; margin:0; }
.iso-prewrap { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.iso-help { width:27px; height:27px; border:1px solid #a9c9dd; border-radius:50%; color:#21668c; background:#e5f1fa; font-weight:700; cursor:pointer; }
.iso-cell-note { display:block; color:#647887; margin-top:4px; white-space:normal; }
.iso-row-due td { background:#fff1f0; }
.iso-preview-image { display:block; max-width:100%; max-height:65vh; margin:16px auto; object-fit:contain; }
.iso-preview-pdf { width:100%; height:65vh; border:0; margin-top:16px; }
.iso-download { display:inline-block; padding:9px 14px; border-radius:7px; background:#e5f1fa; color:#21668c; }
@media(max-width:640px) { .iso-form { grid-template-columns:1fr; } }.iso-views { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
.iso-row-reminder td { background:#fff8db; }
.iso-template-summary { border-left:4px solid #5089ab; background:#edf4f8; padding:12px; line-height:1.7; border-radius:5px; }
.iso-object-plans fieldset[hidden] { display:none; }
/* Übersichtlicher Kalender mit getrennten Kalenderquellen */
.calendar-workspace { min-width:0; }
.calendar-workspace .absence-calendar-card { padding:24px; overflow:hidden; }
.calendar-header { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.calendar-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#687a86; }
.calendar-header h2 { margin:5px 0 7px; font-size:26px; color:#233b49; }
.calendar-header p { margin:0; color:#687a86; font-size:13px; }
.calendar-workspace button { cursor:pointer; font:inherit; }
.calendar-navigation { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.calendar-navigation button,.calendar-navigation input,.calendar-filterbar > input,.calendar-outlook-status,.calendar-view-switch button { border:1px solid #d6e0e6; border-radius:8px; background:white; padding:9px 12px; color:#304d5c; min-height:38px; font:inherit; }
.calendar-navigation button img { width:17px; height:17px; vertical-align:middle; }
.calendar-navigation button:hover,.calendar-view-switch button:hover { background:#eef4f8; }
.calendar-filterbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid #edf1f4; border-bottom:1px solid #edf1f4; padding:16px 0; margin-top:20px; }
.calendar-filterbar > input { flex:1 1 220px; min-width:160px; }
.calendar-source-filters { display:flex; gap:14px; }
.calendar-source-filters label { display:flex; gap:6px; align-items:center; font-size:13px; cursor:pointer; }
.calendar-source-filters i { width:8px; height:8px; border-radius:50%; }
.calendar-dot-tasks { background:#c9746a; }.calendar-dot-holidays { background:#669987; }
.calendar-view-switch { display:flex; gap:3px; padding:3px; background:#edf2f5; border-radius:10px; }
.calendar-view-switch button { border-color:transparent; background:transparent; min-height:32px; padding:6px 12px; }
.calendar-view-switch button[aria-pressed="true"] { background:#fff; box-shadow:0 1px 4px #203b491a; font-weight:700; }
.calendar-outlook-status { font-size:12px; color:#6e7c86; background:#f7f9fa; }
.calendar-summary { padding:12px 0; font-size:12px; color:#687a86; }
.calendar-content { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; align-items:start; }
.calendar-month-scroll { min-width:0; overflow-x:auto; }
.calendar-workspace .absence-calendar-grid { grid-template-columns:30px repeat(7,minmax(82px,1fr)); min-width:660px; gap:5px; overflow:visible; }
.calendar-workspace .absence-calendar-weekday { text-align:center; font-size:12px; padding:6px 0; }
.calendar-workspace .absence-calendar-week-number { background:transparent; font-size:11px; color:#7f8d98; }
.calendar-workspace .absence-calendar-day { cursor:pointer; min-width:0; min-height:128px; padding:7px; border:1px solid #e6edf1; border-radius:9px; background:#fff; }
.calendar-workspace .absence-calendar-day.weekend { background:#f3f6f8; }
.calendar-workspace .absence-calendar-day.holiday { background:#f0f7f3; }
.calendar-workspace .absence-calendar-day.outside-month { opacity:.6; }
.calendar-workspace .absence-calendar-day.today { border:1px solid #9ebfd5; background:#f1f7fc; }
.calendar-workspace .absence-calendar-day.selected { box-shadow:inset 0 0 0 2px #39769a; opacity:1; }
.calendar-workspace .absence-calendar-date { align-items:center; gap:2px; margin-bottom:7px; }
.calendar-workspace .absence-calendar-date button { border:0; border-radius:50%; width:29px; height:29px; background:transparent; color:#304d5c; font-weight:700; padding:0; }
.calendar-workspace .today .absence-calendar-date button { background:#39769a; color:white; }
.calendar-workspace .absence-calendar-date small { font-size:10px; color:#81919b; font-weight:400; }
.calendar-workspace .absence-calendar-entries { display:flex; flex-direction:column; gap:4px; }
.calendar-workspace .absence-calendar-task { display:block; width:100%; min-width:0; padding:7px 8px; border-radius:5px; text-align:left; }
.calendar-workspace .absence-calendar-task span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.calendar-workspace .absence-calendar-task small { display:block; font-size:10px; opacity:.75; margin-bottom:4px; }
.calendar-holiday-entry { border-left:3px solid #74a691; background:#e6f2ea; padding:6px 7px; font-size:11px; color:#38614e; border-radius:4px; overflow-wrap:anywhere; }
.calendar-more { border:0; padding:5px 2px; text-align:left; background:transparent; color:#39769a; font-size:11px!important; }
.calendar-day-panel { min-width:0; border:1px solid #e1e9ee; border-radius:12px; background:#f7f9fb; padding:16px; }
.calendar-day-heading small { text-transform:uppercase; font-size:10px; letter-spacing:.08em; color:#7a8a96; }
.calendar-day-heading h3 { margin:8px 0; color:#304d5c; font-size:17px; }
.calendar-day-heading > span { font-size:12px; color:#7a8a96; }
.calendar-day-items { display:grid; gap:8px; margin-top:16px; max-height:65vh; overflow:auto; }
.calendar-empty-note { color:#788a95; font-size:13px; padding:12px; line-height:1.6; }
.calendar-agenda { display:grid; gap:12px; }
.calendar-agenda-day { display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px; border-bottom:1px solid #edf1f4; padding-bottom:14px; }
.calendar-agenda-day > div { display:grid; gap:7px; }
.calendar-agenda-date { align-self:start; border:0; background:#edf4f8; border-radius:8px; padding:10px; text-align:left; color:#304d5c; }
.calendar-source-list > div { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid #e3eaf0; padding:14px 0; }
.calendar-source-list span { color:#72848f; }
.calendar-workspace .team-calendar-scroll { overflow:auto; max-height:70vh; }
.calendar-workspace .team-calendar-table thead th { background:#edf3f7; }
.calendar-workspace .team-calendar-employee-cell { width:200px; min-width:200px; }
.calendar-workspace .team-calendar-department-row th { background:#e9f0f5; color:#35576b; }
.calendar-workspace .team-calendar-table tbody tr:hover .team-calendar-employee-cell { background:#f0f6fa; }
.calendar-workspace .absence-calendar-legend { flex-wrap:wrap; font-size:12px; }
.calendar-workspace button:focus-visible,.calendar-workspace input:focus-visible { outline:2px solid #39769a; outline-offset:2px; }
.calendar-workspace button:disabled,.calendar-workspace input:disabled { opacity:.5; cursor:wait; }
.calendar-header .calendar-load-error { color:#b42318; }
@media(max-width:1100px) { .calendar-content { grid-template-columns:minmax(0,1fr); }.calendar-day-items { max-height:none; }.calendar-day-panel { margin-top:4px; } }
@media(max-width:640px) { .calendar-workspace .absence-calendar-card { padding:12px; }.calendar-header h2 { font-size:22px; }.calendar-filterbar { gap:10px; }.calendar-agenda-day { grid-template-columns:90px minmax(0,1fr); gap:8px; }.calendar-navigation input { max-width:160px; } }
.calendar-day-panel:focus { outline:2px solid #9ebfd5; outline-offset:2px; }
.calendar-workspace .team-calendar-day-header.weekend { background:#e5ebef; }
.calendar-workspace .team-calendar-day-header.holiday { background:#e3f0e8; }
.calendar-workspace .team-calendar-day-header.today { background:#d7eaf7; color:#235c7c; }
/* ISO: strukturierte Prüfanweisungen und Prüfprotokolle */
.iso-criterion-editor { display:grid; grid-template-columns:minmax(140px,1fr) minmax(180px,2fr) auto; gap:10px; align-items:start; padding:12px 0; border-bottom:1px solid #e0e6ea; }
.iso-protocol-answer { display:grid; grid-template-columns:minmax(130px,1fr) 2fr 2fr; gap:12px; }
.iso-protocol-form fieldset { margin-bottom:12px; background:#f6f8fa; }
.iso-protocol-form fieldset[data-result="NOK"] { border-left:4px solid #be342c; background:#fff1ef; }
.iso-protocol-form fieldset[data-result="OK"] { border-left:4px solid #398160; }
.iso-protocol-total { font-size:17px; font-weight:700; }
.iso-instruction-note { border-left:4px solid #d5a928; background:#fff6d8; padding:12px; white-space:pre-wrap; }
.iso-protocol-scroll { overflow-x:auto; }
.iso-protocol-table { width:100%; border-collapse:collapse; margin:12px 0; }
.iso-protocol-table th,.iso-protocol-table td { border:1px solid #dce4e9; padding:10px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.iso-protocol-table th { background:#edf3f7; }
.iso-instruction-images { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.iso-instruction-images figure { margin:0; }
.iso-form label[hidden] { display:none; }
@media(max-width:650px) { .iso-criterion-editor,.iso-protocol-answer { grid-template-columns:1fr; } }
/* ISO-Dialoge: lesbare Anweisungen, kompakte Erfassung und Text-Bild-Zuordnung. */
.iso-modal { border-radius:16px; }
.iso-modal .shared-modal-header { padding:18px 24px; background:#fff; border-bottom:1px solid #dce4e9; }
.iso-modal .shared-modal-header h2 { font-size:20px; }
.iso-modal .shared-modal-content { background:#f4f6f8; padding:22px 24px; }
.iso-modal .shared-modal-footer { padding:14px 24px; background:#fff; border-top:1px solid #dce4e9; }
.iso-modal .iso-form { gap:18px; }
.iso-form-section { grid-column:1 / -1; background:#fff; border:1px solid #dfe6eb; border-radius:12px; padding:20px; min-width:0; }
.iso-form-section > header { margin-bottom:16px; }
.iso-modal h3 { margin:0 0 10px; font-size:17px; color:#243d4b; }
.iso-form-section > header p { margin:5px 0 0; font-size:13px; color:#617786; }
.iso-form-grid,.iso-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.iso-form-grid > *,.iso-plan-grid > * { min-width:0; }
.iso-modal .iso-form label { font-size:13px; color:#425766; }
.iso-modal .iso-form input:not([type=checkbox]),.iso-modal .iso-form select,.iso-modal .iso-form textarea { font-size:14px; padding:9px 11px; border-color:#cbd7df; }
.iso-modal .iso-form :is(input,select,textarea):focus { outline:2px solid #8cb9d5; outline-offset:1px; }
.iso-modal .iso-form fieldset { margin:0; background:#fbfcfd; border-radius:9px; border-color:#dce5eb; }
.iso-modal .iso-form legend { padding:0 6px; font-weight:700; font-size:14px; }
.iso-modal .iso-form .iso-check { font-weight:500; gap:9px; }
.iso-modal .iso-form input[type=checkbox] { width:17px; height:17px; flex:none; accent-color:#34799d; }
.iso-modal .iso-template-summary { background:#f2f6f9; border-left:3px solid #749bb0; font-size:13px; }
.iso-editor-section { background:#fff; border:1px solid #dfe6eb; border-radius:12px; overflow:hidden; }
.iso-editor-section > summary { padding:17px 20px; font-size:16px; font-weight:700; cursor:pointer; color:#243d4b; }
.iso-editor-section > summary span { font-size:12px; font-weight:400; color:#617786; margin-left:10px; }
.iso-editor-body { padding:0 20px 20px; display:grid; gap:14px; }
.iso-modal .iso-criterion-editor { grid-template-columns:minmax(0,1fr) 32px; border:1px solid #dfe6eb; border-radius:9px; padding:14px; margin:10px 0; background:#f8fafb; }
.iso-criterion-fields { display:grid; grid-template-columns:minmax(0,2fr) minmax(150px,1fr); gap:12px; }
.iso-criterion-editor > button { width:30px; height:30px; border:1px solid #d9e2e8; border-radius:6px; background:#fff; color:#8d4848; cursor:pointer; }
.iso-add-row { justify-self:start; border:1px solid #bacfdb; border-radius:7px; padding:8px 12px; color:#28678a; background:#edf5fa; cursor:pointer; }
.iso-image-assignments { display:grid; gap:14px; }
.iso-image-assignments > div { display:grid; grid-template-columns:1fr 1fr 2fr; align-items:center; gap:14px; padding:12px; background:#f5f8fa; border-radius:8px; }
.iso-dialog-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.iso-instruction-document { background:#fff; border:1px solid #dfe6eb; border-radius:12px; padding:24px; }
.iso-document-meta { display:flex; flex-wrap:wrap; gap:16px 36px; padding:0 0 18px; border-bottom:1px solid #e4eaee; margin-bottom:18px; }
.iso-document-meta span { min-width:120px; }
.iso-document-meta small { display:block; color:#6a7f8c; font-size:12px; margin-bottom:5px; }
.iso-document-meta strong { font-size:14px; color:#2b4352; }
.iso-reading-intro { font-size:14px; color:#4c6270; line-height:1.65; }
.iso-reading-intro p { margin:0 0 12px; }
.iso-equipment { background:#f4f7f9; border-radius:9px; padding:16px 18px; margin:18px 0; }
.iso-equipment h3 { font-size:14px; margin:0 0 10px; }
.iso-equipment ul { columns:2; padding-left:18px; margin:0; font-size:13px; line-height:1.75; }
.iso-instruction-section { margin-top:24px; }
.iso-instruction-section > h3 { padding-bottom:10px; border-bottom:2px solid #e7edf1; }
.iso-text-layout.has-images { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:24px; align-items:start; }
.iso-section-points,.iso-section-images { min-width:0; }
.iso-section-images { position:sticky; top:0; display:grid; gap:18px; }
.iso-text-image { margin:0; border:1px solid #e0e7ec; border-radius:10px; background:#fff; padding:12px; }
.iso-text-image img { display:block; width:100%; height:auto; max-height:340px; object-fit:contain; }
.iso-text-image figcaption { margin-top:10px; font-size:12px; color:#687e8b; text-align:center; line-height:1.5; }
.iso-image-placeholder { padding:32px 10px; text-align:center; color:#69818e; }
.iso-reading-point { padding:12px 0; border-bottom:1px solid #e8edf0; }
.iso-reading-point:first-child { padding-top:0; }
.iso-reading-point h4 { font-size:14px; margin:0 0 5px; color:#253f4e; }
.iso-reading-point p { font-size:13px; margin:0; color:#506572; line-height:1.6; }
.iso-failure-action { border-left:3px solid #ba7770; background:#fcf7f6; padding:14px 18px; margin-top:24px; border-radius:0 8px 8px 0; }
.iso-failure-action h3 { font-size:14px; }
.iso-failure-action p { margin:0; font-size:13px; }
.iso-object-banner { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:16px 20px; background:#eaf2f7; border:1px solid #d5e3eb; border-radius:12px; }
.iso-object-banner small { color:#577387; }
.iso-object-banner h3 { margin:4px 0 0; }
.iso-object-banner > span { font-size:13px; color:#365a70; }
.iso-protocol-progress { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #d4e0e7; }
.iso-protocol-progress span { font-size:13px; color:#5d7685; }
.iso-protocol-equipment { margin:12px 0; font-size:13px; color:#526e7d; }
.iso-protocol-equipment summary,.iso-plan-instruction summary { cursor:pointer; }
.iso-modal .iso-protocol-form .iso-answer-card { padding:14px; margin:0 0 14px; background:#fff; border:1px solid #dce5eb; }
.iso-answer-layout { display:grid; gap:12px; }
.iso-answer-requirement { margin:0; font-size:13px; color:#5a6e7a; }
.iso-answer-fields { display:grid; grid-template-columns:minmax(120px,1fr) minmax(120px,1.5fr); gap:10px; }
.iso-answer-note { grid-column:1 / -1; }
.iso-modal .iso-answer-fields textarea { min-height:50px; }
.iso-modal .iso-protocol-form fieldset[data-result=OK] { border-left:3px solid #4b9071; }
.iso-modal .iso-protocol-form fieldset[data-result=NOK] { border-left:3px solid #c25a51; background:#fff8f7; }
.iso-protocol-completion { background:#fff; border:1px solid #dce5eb; border-radius:10px; padding:18px; margin-top:18px; }
.iso-protocol-total { margin:0 0 14px; color:#334e60; }
.iso-protocol-total[data-result=NOK] { color:#a93730; }
.iso-protocol-total[data-result=OK] { color:#267450; }
.iso-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; }
.iso-detail-grid > div { background:#fff; border:1px solid #dfe6eb; border-radius:9px; padding:15px; }
.iso-detail-grid dt { font-size:12px; color:#6a7e8b; margin-bottom:6px; }
.iso-detail-grid dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.iso-upload-panel { background:#fff; border:1px dashed #b5cad7; border-radius:10px; padding:16px; margin-top:18px; }
.iso-saved-protocol { background:#fff; border-radius:12px; padding:24px; }
.iso-protocol-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:20px; }
.iso-protocol-heading small { color:#667f8f; }
.iso-protocol-heading h3 { margin:5px 0; }
.iso-protocol-heading p { font-size:13px; margin:0; color:#617988; }
.iso-result-badge,.iso-status { display:inline-flex; border-radius:14px; padding:5px 10px; font-size:12px; background:#edf2f5; color:#536c7b; white-space:nowrap; }
.iso-result-badge[data-result=OK],.iso-status[data-status="Geprüft"] { background:#e8f3ec; color:#307b53; }
.iso-result-badge[data-result=NOK],.iso-status[data-status="Nicht bestanden"],.iso-status[data-status=Fällig] { background:#fbe9e7; color:#a83f36; }
.iso-status[data-status="Bald fällig"] { background:#fff3d5; color:#8b690f; }
.iso-saved-answer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; }
.iso-record-stamp { border-top:1px solid #e1e8ed; padding-top:16px; margin-top:22px; color:#68808e; font-size:12px; }
.iso-help-group { display:inline-flex; gap:12px; align-items:center; }
.iso-use-help { display:flex; flex-direction:column; align-items:center; gap:3px; }
.iso-use-help small { font-size:10px; color:#6f8390; }
.iso-inspections .table-action-group { flex-wrap:nowrap; gap:5px; max-width:none; }
.iso-inspections .custom-table td { white-space:normal; }
.iso-inspections .custom-table td:nth-child(2) { max-width:250px; }
.iso-modal .custom-table-container { margin:0 auto !important; }
@media(max-width:760px) {
 .iso-modal .shared-modal-content { padding:14px; }
 .iso-form-grid,.iso-plan-grid,.iso-text-layout.has-images,.iso-detail-grid,.iso-criterion-fields,.iso-image-assignments > div { grid-template-columns:1fr; }
 .iso-section-images { position:static; }
 .iso-text-image { max-width:440px; margin:0 auto; }
 .iso-form-section,.iso-instruction-document,.iso-saved-protocol { padding:16px; }
 .iso-equipment ul { columns:1; }
 .iso-editor-section > summary { padding:15px; }
 .iso-editor-body { padding:0 15px 15px; }
 .iso-document-meta { gap:14px; }
 .iso-dialog-tabs .ui-button { flex:1; font-size:12px; }
}
/* Prüfkalender verwendet Monatsraster und Tagesübersicht des normalen Kalenders. */
.calendar-workspace .inspection-calendar-event { border-left:4px solid #327dac; background:#eaf4fc; color:#244c68; }
.calendar-workspace .inspection-calendar-external,.iso-modal .inspection-calendar-external { border-left-color:#8454ae; background:#f2ebfa; color:#613987; }
.calendar-workspace .inspection-calendar-reminder,.iso-modal .inspection-calendar-reminder { border-left-color:#d2a016; background:#fff5ce; color:#795b06; }
.calendar-workspace .inspection-calendar-event.is-agreed { outline:1px dashed currentColor; outline-offset:-2px; }
.inspection-calendar-event small { display:block; font-size:11px; margin-bottom:3px; }
.iso-modal .inspection-calendar-event { padding:14px; border-radius:10px; }
.inspection-agreed-label { display:block; margin-top:6px; font-size:13px; }
.calendar-source-filters .inspection-dot-internal { background:#327dac; }
.calendar-source-filters .inspection-dot-external { background:#8454ae; }
.calendar-source-filters .inspection-dot-reminder { background:#d2a016; }