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

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 15px;
    font-size: 18px;
  }

  /* zoom only on desktop — mobile must not be scaled down */
  @media (min-width: 769px) {
    body {
      zoom: 1;
    }
  }

  /* Performance-Optimierung: Utility-Klassen */
  .hidden-row {
    display: none !important;
  }

  .container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Urlaubsplanung und Schichtplanung: volle Breite */
  #schichtplanung .container,
  #schichtplanung-weView .container,
  body[data-view="urlaub"] .container {
    max-width: 1800px;
  }

  .header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 32px 40px;
    border-radius: 20px;
    margin-bottom: 24px;
    box-shadow: 0 10px 40px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
  }

  .header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
  }

  .header h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }

  .header p {
    font-size: 16px;
    opacity: 0.95;
    font-weight: 400;
    position: relative;
    z-index: 1;
  }

  .tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    background: white;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .tab {
    background: #f1f5f9;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    color: #475569;
    flex: 1;
    min-width: 110px;
    text-decoration: none;
    text-align: center;
    position: relative;
  }

  .tab:hover {
    transform: translateY(-2px);
    background: #e2e8f0;
    color: #1e293b;
  }

  .tab.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
  }

  /* ---- Grouped Navigation ---- */
  .nav-group {
    position: relative;
    flex: 1;
    min-width: 130px;
  }

  .nav-group-btn {
    background: #f1f5f9;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .nav-group-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: translateY(-2px);
  }

  .nav-group-btn.has-active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
  }

  .nav-group-btn .nav-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
    opacity: 0.7;
  }

  .nav-group.open .nav-arrow {
    transform: rotate(180deg);
  }

  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    z-index: 10000;
    padding: 6px;
    min-width: 180px;
    animation: navDropIn 0.15s ease-out;
  }

  @keyframes navDropIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Global Button Styles */
  .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
    transition: all 0.2s;
    white-space: nowrap;
    flex: 0 0 auto !important;
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .nav-group.open .nav-dropdown {
    display: block;
  }

  .nav-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
  }

  .nav-dropdown-item:hover {
    background: #f1f5f9;
    color: #4f46e5;
  }

  .nav-dropdown-item.active {
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
  }

  .nav-dropdown-item .nav-item-icon {
    display: inline-block;
    width: 22px;
    text-align: center;
    margin-right: 6px;
  }

  .card {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
  }

  .card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  .card h2 {
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: 700;
    color: #0f172a;
  }

  .card h3 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  /* Progress Bars */
  .progress-container {
    margin: 24px 0;
  }

  .progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
  }

  .progress-bar {
    background: #e2e8f0;
    height: 48px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .progress-bar.mini {
    height: 10px;
    margin: 6px 0;
    border-radius: 5px;
  }

  .progress-bar.mini .progress-segment {
    font-size: 0;
  }

  .progress-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  .progress-segment::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  .progress-segment.delivered {
    background: linear-gradient(90deg, #10b981, #059669);
  }

  .progress-segment.open {
    background: linear-gradient(90deg, #ef4444, #dc2626);
  }

  .progress-segment.overdue {
    background: linear-gradient(90deg, #7f1d1d, #991b1b);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.85;
    }
  }

  .big-counter {
    text-align: center;
    font-size: 96px;
    font-weight: 700;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 30px 0;
    line-height: 1;
  }

  input,
  button,
  select {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    width: 100%;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    background: white;
    font-family: inherit;
  }

  input:focus,
  select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
  }

  input:hover,
  select:hover {
    border-color: #cbd5e1;
  }

  button {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }

  button:active {
    transform: scale(0.98);
  }

  button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
  }

  button.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }

  button.danger:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  }

  button.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  button.success:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  }

  button.btn-sm {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 10px;
    margin: 0 4px;
  }

  button.btn-ghost {
    background: #fff;
    color: #4f46e5;
    border: 2px solid #4f46e5;
    box-shadow: none;
  }

  button.btn-ghost:hover {
    background: #4f46e5;
    color: white;
  }

  /* Scanner-spezifische Styles fuer Tablet/Touch */
  .scan-input-container select,
  .scan-input-container input {
    min-height: 48px;
    font-size: 16px;
  }

  /* Barcode scanner ready indicator */
  #scanArtikel {
    border: 2px solid #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    transition: all 0.3s ease;
  }

  #scanArtikel:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 0 20px rgba(16, 185, 129, 0.3) !important;
    outline: none !important;
    animation: scanner-pulse 2s infinite;
  }

  @keyframes scanner-pulse {

    0%,
    100% {
      box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 0 20px rgba(16, 185, 129, 0.3);
    }

    50% {
      box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15), 0 0 30px rgba(16, 185, 129, 0.4);
    }
  }

  @media (min-width: 600px) and (max-width: 1024px) {

    .scan-input-container select,
    .scan-input-container input {
      min-height: 56px;
      font-size: 18px;
      padding: 14px 16px;
    }

    .scan-input-container .success,
    .scan-input-container .danger {
      min-height: 52px;
      font-size: 16px;
    }
  }

  button.btn-red {
    background: #fff;
    color: #ef4444;
    border: 2px solid #ef4444;
    box-shadow: none;
  }

  button.btn-red:hover {
    background: #ef4444;
    color: white;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    font-size: 14px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }

  thead {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
  }

  th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
  }

  td {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
  }

  tbody tr {
    transition: all 0.2s ease;
  }

  tbody tr:hover {
    background: #f8fafc;
    transform: scale(1.005);
  }

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

  th:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  th.sortable:after {
    content: ' ⇅';
    opacity: 0.5;
  }

  th.sorted-asc:after {
    content: ' ↑';
    opacity: 1;
  }

  th.sorted-desc:after {
    content: ' ↓';
    opacity: 1;
  }

  tr.overdue {
    background: #fef2f2;
  }

  .alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 16px;
    animation: slideIn 0.3s ease;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .alert-success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 2px solid #86efac;
  }

  .alert-error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 2px solid #fca5a5;
  }

  /* Loading Spinner */
  .loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #e2e8f0;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
  }

  .loading-spinner.lg {
    width: 32px;
    height: 32px;
    border-width: 4px;
  }

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

  /* Loading-Container: zentrierter Spinner mit Text */
  .loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #64748b;
    font-size: 15px;
  }

  /* Skeleton-Rows fuer Tabellen */
  .skeleton-row td {
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
  }

  .skeleton-row td::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
    animation: shimmer 1.5s infinite;
  }

  .skeleton-bar {
    height: 14px;
    background: #e2e8f0;
    border-radius: 4px;
    width: 75%;
  }

  .skeleton-bar.short {
    width: 40%;
  }

  .skeleton-bar.long {
    width: 90%;
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-50%);
    }

    100% {
      transform: translateX(50%);
    }
  }

  /* Scan-Erfolg Animation */
  @keyframes scanSuccess {
    0% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
      box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }

  .scan-success-pulse {
    animation: scanSuccess 0.6s ease-out;
  }

  .filter-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }

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

  .filter-row input,
  .filter-row select,
  .filter-row button {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 20px 0;
  }

  .stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    padding: 24px;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  /* KPI cards with tooltips need visible overflow */
  .stat-card.kpi-hover {
    overflow: visible !important;
    z-index: 1000;
  }

  /* When popover is shown, increase z-index */
  .stat-card.kpi-hover:has(.kpi-popover[style*="display: block"]) {
    z-index: 100000 !important;
  }

  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  }

  /* Colored left borders for KPI cards */
  #dashboardKPIs .stat-card:nth-child(1)::before {
    background: #4f46e5;
    /* Blue for Stückzahl */
  }

  #dashboardKPIs .stat-card:nth-child(2)::before {
    background: #10b981;
    /* Green for OEE */
  }

  #dashboardKPIs .stat-card:nth-child(3)::before {
    background: #ef4444;
    /* Red for Krank */
  }

  #dashboardKPIs .stat-card:nth-child(4)::before {
    background: #3b82f6;
    /* Blue for Urlaub */
  }

  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.15);
    border-color: #4f46e5;
  }

  /* Hover border colors for KPI cards */
  #dashboardKPIs .stat-card:nth-child(1):hover {
    border-color: #4f46e5;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.2);
  }

  #dashboardKPIs .stat-card:nth-child(2):hover {
    border-color: #10b981;
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.2);
  }

  #dashboardKPIs .stat-card:nth-child(3):hover {
    border-color: #ef4444;
    box-shadow: 0 12px 24px rgba(239, 68, 68, 0.2);
  }

  #dashboardKPIs .stat-card:nth-child(4):hover {
    border-color: #3b82f6;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.2);
  }

  .stat-card-clickable {
    cursor: pointer;
  }

  /* KPI Detail-Popover */
  .kpi-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 99999;
    font-size: 13px;
    color: #334155;
    max-height: 350px;
    overflow-y: auto;
    animation: slideDown 0.2s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kpi-popover.kpi-popover-visible {
    display: block;
  }

  .kpi-popover-title {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }

  .kpi-popover-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
  }

  .kpi-popover-row:last-child {
    border-bottom: none;
  }

  .kpi-popover-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
  }

  .kpi-popover-val {
    font-weight: 600;
    white-space: nowrap;
  }

  .kpi-popover-empty {
    color: #64748b;
    font-style: italic;
    padding: 4px 0;
  }

  .stat-value {
    font-size: 36px;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 8px;
    line-height: 1;
  }

  .stat-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .stat-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
    font-style: italic;
  }

  .dim {
    font-size: 13px;
    color: #64748b;
  }

  .badge-last {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    font-size: 11px;
    font-weight: 600;
  }

  .matrix-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    background: #ffffff;
  }

  .matrix-table th,
  .matrix-table td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
  }

  .matrix-table thead th {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1f2937;
    text-align: center;
  }

  .matrix-table tbody tr:nth-child(odd) {
    background: #fafbff;
  }

  .matrix-table tbody tr:hover {
    background: #eef2ff;
  }

  .matrix-table tfoot th {
    background: #f9fafb;
    font-weight: 700;
  }

  .matrix-table .col-sum {
    background: #fff7e6;
    font-weight: 600;
  }

  .matrix-table .cell-nonzero {
    color: #4f46e5;
    font-weight: 600;
    text-align: right;
  }

  /* Mobile Hamburger Menu Button */
  .mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10;
  }

  .mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .mobile-menu-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }

  .mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  @media (max-width: 768px) {
    body {
      font-size: 16px;
      padding: 10px;
    }

    .big-counter {
      font-size: 72px;
    }

    .header h1 {
      font-size: 24px;
    }

    .card {
      padding: 20px;
    }

    .card h2 {
      font-size: 22px;
    }

    th,
    td {
      padding: 12px 8px;
      font-size: 14px;
    }

    /* Hamburger sichtbar auf Mobile */
    .mobile-menu-btn {
      display: flex;
    }

    /* Navigation verstecken auf Mobile, als Overlay zeigen */
    #mainNav {
      display: none !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9998;
      background: white;
      flex-direction: column;
      padding: 80px 20px 20px;
      overflow-y: auto;
      gap: 8px;
    }

    #mainNav.mobile-open {
      display: flex !important;
    }

    #mainNav .tab,
    #mainNav .nav-group-btn {
      width: 100%;
      text-align: left;
      padding: 16px 20px;
      font-size: 16px;
      min-height: 48px;
    }

    #mainNav .nav-group {
      width: 100%;
    }

    #mainNav .nav-dropdown {
      position: static;
      box-shadow: none;
      border: none;
      padding-left: 20px;
    }

    #mainNav .nav-dropdown-item {
      min-height: 44px;
      padding: 12px 16px;
      font-size: 15px;
    }
  }

  .kw-mini-btn {
    font-size: 14px;
    padding: 4px 8px;
    margin: 0 2px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
  }

  .kw-mini-btn:hover {
    background: #f1f5f9;
    border-color: #4f46e5;
  }

  .kw-btn-block {
    display: block;
    width: 100%;
    margin: 3px 0;
  }

  .kw-filter-panel {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #000;
  }

  .kw-filter-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
  }

  .kw-cat-btn {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: all 0.2s;
  }

  .kw-cat-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .kw-cat-btn-active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }

  .kw-cat-btn-alle {
    width: 100%;
  }

  .kw-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .kw-cat-btn-grid {
    width: 100%;
  }

  .kw-filter-btn-reset {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
  }

  .kw-filter-btn-reset:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .sb-small-table table.table th,
  .sb-small-table table.table td {
    font-size: 12px;
    padding: 4px 6px;
  }

  .sb-tag-pos {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .sb-tag-neg {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .dashboard-detail {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
  }

  .trend-bar-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 140px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow-x: auto;
  }

  .trend-bar-item {
    flex: 1;
    min-width: 40px;
    text-align: center;
    font-size: 11px;
    color: #64748b;
  }

  .trend-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    min-height: 3px;
  }

  .trend-bar-label {
    margin-top: 4px;
    white-space: nowrap;
  }

  /* Schichtbedarf Styles */
  .sb-table-wrap {
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    max-height: 70vh;
  }

  /* Dashboard KW-Matrix: KEINE max-height, volle Länge */
  #dashboardKWMatrix .matrix-table,
  #dashboardKWMatrix table {
    max-height: none !important;
    overflow: visible !important;
    font-size: 11px !important;
  }

  #dashboardKWMatrix {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Kompaktere Zellen für Dashboard KW-Matrix */
  #dashboardKWMatrix th,
  #dashboardKWMatrix td {
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #dashboardKWMatrix thead th {
    padding: 6px 8px !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  table.sb-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 11px;
  }

  .sb-table th,
  .sb-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
  }

  .sb-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    z-index: 3;
    font-weight: 700;
    font-size: 11px;
    color: #ffffff;
    border-bottom: 2px solid #312e81;
    padding: 8px 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .sb-table thead th:hover {
    background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
  }

  .sb-table th.sticky-1,
  .sb-table td.sticky-1 {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    min-width: 75px;
    max-width: 75px;
    font-size: 11px;
  }

  .sb-table th.sticky-2,
  .sb-table td.sticky-2 {
    position: sticky;
    left: 75px;
    background: #fff;
    z-index: 2;
    min-width: 180px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .sb-table thead th.sticky-1,
  .sb-table thead th.sticky-2 {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border-right: 2px solid #312e81;
    z-index: 4;
  }

  .sb-table td.sticky-1,
  .sb-table td.sticky-2 {
    border-right: 1px solid #f3f4f6;
  }

  .sb-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
  }

  .sb-cell .main {
    font-weight: 700;
    font-size: 12px;
    color: #111827;
  }

  .sb-cell .sub {
    font-size: 9px;
    color: #6b7280;
    font-weight: 400;
  }

  .sb-table tbody tr:nth-child(even) {
    background: #fafafa;
  }

  .sb-table tbody tr:nth-child(even) td.sticky-1,
  .sb-table tbody tr:nth-child(even) td.sticky-2 {
    background: #fafafa;
  }

  .sb-row-total td {
    font-weight: 700;
    background: #f3f4f6;
    border-top: 2px solid #e5e7eb;
    color: #111827;
    font-size: 12px;
  }

  .sb-kpis {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .sb-kpi {
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    min-width: 140px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  }

  .sb-kpi .label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .sb-kpi .value {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
    color: #111827;
  }

  .sb-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, .06);
  }

  .sb-badge.pos {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-color: #86efac;
  }

  .sb-badge.neg {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
  }

  .sb-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .sb-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
  }

  .sb-control label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .sb-control select,
  .sb-control input {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .sb-control select:focus,
  .sb-control input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
  }

  .sb-control input[type="text"] {
    min-width: 160px;
  }

  .sb-control-wide {
    grid-column: span 2;
  }

  .sb-week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
  }

  .sb-week-card {
    border-radius: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
  }

  .sb-week-card:hover {
    border-color: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
  }

  .sb-week-card.positive {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #86efac;
  }

  .sb-week-card.negative {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
  }

  .sb-week-kw {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 11px;
  }

  .sb-week-ma {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .sb-week-ma .value {
    font-weight: 700;
  }

  .sb-week-stk {
    font-size: 10px;
    color: #6b7280;
  }

  .sb-section {
    margin-top: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    background: #fafafa;
  }

  .sb-section summary {
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
    outline: none;
    color: #374151;
  }

  .sb-section summary::-webkit-details-marker {
    display: none;
  }

  .sb-section summary::before {
    content: '▾';
    display: inline-block;
    margin-right: 5px;
    font-size: 10px;
  }

  .sb-section[open] summary::before {
    content: '▴';
  }

  .sb-table tbody tr:hover {
    background: #f3f4f6;
  }

  .sb-table tbody tr:hover td.sticky-1,
  .sb-table tbody tr:hover td.sticky-2 {
    background: #f3f4f6;
  }

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

  .sb-head h2 {
    font-size: 20px;
    margin: 0;
  }

  .sb-zeitraum {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
  }

  .auf-filter .filter-row {
    gap: 8px;
  }

  .auf-filter input,
  .auf-filter select {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
  }

  .auf-filter button {
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 10px;
  }

  .auf-filter-top input,
  .auf-filter-top select {
    flex: 1;
    min-width: 160px;
  }

  .auf-filter-bottom {
    align-items: center;
  }

  .auf-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    flex: 1;
    min-width: 180px;
  }

  .auf-filter-checkbox input {
    width: auto;
    margin-bottom: 0;
    padding: 0;
  }

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

  .auf-filter-actions button {
    flex: 0 0 auto;
    min-width: 120px;
    margin-bottom: 0;
  }

  .auf-filter-btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
  }

  .auf-filter-btn-secondary {
    background: #ffffff;
    color: #64748b;
    border: 2px solid #e2e8f0;
  }

  .auf-filter {
    padding: 16px 20px;
  }

  .auf-card {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
  }

  .auf-card-summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 20px;
  }

  .auf-card>.auf-card-summary::-webkit-details-marker {
    display: none;
  }

  .auf-card-summary::after {
    content: '▾';
    float: right;
    font-size: 12px;
    color: #6b7280;
  }

  .auf-card[open]>.auf-card-summary::after {
    content: '▴';
  }

  .auf-card>div {
    padding: 0 20px 16px 20px;
  }

  .auf-card[open]>.auf-card-summary {
    border-bottom: 1px solid #e5e7eb;
  }

  .auf-progress {
    margin-top: 4px;
  }

  .table-responsive {
    width: 100%;
    overflow-x: hidden;
  }

  .table-responsive table {
    width: 100%;
    table-layout: fixed;
  }

  th.wa-pal,
  td.wa-pal {
    width: 90px;
  }

  th.wa-spp,
  td.wa-spp {
    width: 90px;
  }

  th.wa-gesamt,
  td.wa-gesamt {
    width: 110px;
  }

  th.wa-actions,
  td.wa-actions {
    width: 70px;
    text-align: center;
    padding-right: 4px;
  }

  td.wa-artikel,
  td.wa-pal,
  td.wa-spp,
  td.wa-gesamt,
  td.wa-actions {
    vertical-align: middle;
  }

  td.wa-artikel select,
  td.wa-pal input[type="number"] {
    height: 40px;
    line-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .wa-actions-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }

  .wa-actions-inner .btn-sm {
    padding: 3px 6px;
    font-size: 12px;
    margin: 0;
    width: 100%;
  }

  td.wa-artikel {
    word-break: break-word;
  }

  /* Schichtplanung Styles */
  #schichtplanungLayout {
    display: block;
  }

  #spMachines {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-start;
  }

  #spMachines .sp-machines-col {
    flex: 1 1 0;
    min-width: 0;
  }

  #spMachines table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  #spMachines thead th {
    padding: 6px 8px;
    font-weight: 600;
    background: linear-gradient(135deg, #f9fafb 0%, #f1f5f9 100%);
  }

  #spMachines tbody td {
    padding: 4px 8px;
    line-height: 1.2;
  }

  #spMachines select {
    font-size: 12px;
    padding: 4px 24px 4px 8px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 8px;
  }

  #spMachines tbody tr {
    border-bottom: 1px solid #eee;
  }

  #spRightTable {
    margin-top: 16px;
  }

  #spRightTable table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  #spRightTable th,
  #spRightTable td {
    padding: 8px 10px;
    line-height: 1.4;
    vertical-align: middle;
  }

  /* Better table header visibility */
  #spRightTable thead th {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #312e81;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
  }

  #spRightTable thead th:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  }

  /* Better number alignment */
  #spRightTable td[style*="text-align:right"],
  #spRightTable th[style*="text-align:right"] {
    font-variant-numeric: tabular-nums;
    padding-right: 12px !important;
  }

  /* Artikeltext Spalte - mehr Platz */
  #spRightTable td:nth-child(2) {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Tabelle scrollbar wenn zu breit */
  #spRightTable {
    overflow-x: auto;
    max-width: 100%;
  }

  /* Bessere Lesbarkeit bei langen Texten */
  .spCollapsibleBody {
    overflow-x: auto;
  }

  /* Enhanced group colors with better contrast and vibrancy */
  #spMachines tbody tr.sp-group-default {
    background-color: #ffffff;
  }

  #spMachines tbody tr.sp-group-G1 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
  }

  #spMachines tbody tr.sp-group-G2 {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left: 4px solid #ef4444;
  }

  #spMachines tbody tr.sp-group-G3 {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-left: 4px solid #3b82f6;
  }

  #spMachines tbody tr.sp-group-G4 {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-left: 4px solid #22c55e;
  }

  #spMachines tbody tr.sp-group-G5 {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-left: 4px solid #a855f7;
  }

  #spMachines tbody tr.sp-group-G6 {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    border-left: 4px solid #ea580c;
  }

  #spMachines tbody tr.sp-group-G7 {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    border-left: 4px solid #06b6d4;
  }

  #spMachines tbody tr.sp-group-G8 {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border-left: 4px solid #eab308;
  }

  #spMachines tbody tr.sp-group-G9 {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-left: 4px solid #10b981;
  }

  #spMachines tbody tr.sp-group-G10 {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-left: 4px solid #6366f1;
  }

  #spMachines tbody tr.sp-group-G11 {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-left: 4px solid #0ea5e9;
  }

  #spMachines tbody tr.sp-group-G12 {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
    border-left: 4px solid #f43f5e;
  }

  #spMachines tbody tr.sp-group-G13 {
    background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 100%);
    border-left: 4px solid #d946ef;
  }

  #spMachines tbody tr.sp-group-G14 {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-left: 4px solid #ca8a04;
  }

  #spMachines tbody tr.sp-group-G15 {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-left: 4px solid #14b8a6;
  }

  #spMachines tbody tr.sp-group-G16 {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 4px solid #16a34a;
  }

  #spMachines tbody tr.sp-group-G17 {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-left: 4px solid #ec4899;
  }

  #spMachines tbody tr.sp-group-G18 {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-left: 4px solid #6b7280;
  }

  #spMachines tbody tr.sp-group-G19 {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-left: 4px solid #fb7185;
  }

  #spMachines tbody tr:nth-child(even) {
    filter: brightness(0.99);
  }

  /* Shift-based color coding for dropdowns */
  #spMachines select[data-shift="F"]:focus,
  #spMachines select[data-shift="F"]:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
  }

  #spMachines select[data-shift="S"]:focus,
  #spMachines select[data-shift="S"]:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  }

  #spMachines select[data-shift="N"]:focus,
  #spMachines select[data-shift="N"]:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }

  /* Shift labels with colors */
  .spBesetzLabel[data-shift="F"] {
    color: #92400e;
    font-weight: 600;
  }

  .spBesetzLabel[data-shift="S"] {
    color: #9a3412;
    font-weight: 600;
  }

  .spBesetzLabel[data-shift="N"] {
    color: #1d4ed8;
    font-weight: 600;
  }

  .spHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

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

  .spToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 16px;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
  }

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

  .spSummaryBar {
    white-space: nowrap;
  }

  .spAlert {
    display: none;
    margin: 12px 0;
    padding: 12px 16px;
    border: 2px solid #fca5a5;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 12px;
    color: #991b1b;
    font-size: 14px;
  }

  .spMainGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }

  /* Sidebar rechts nur bei sehr breiten Screens */
  @media (min-width: 1800px) {
    .spMainGrid {
      grid-template-columns: 1fr 520px;
    }
  }

  .spPaneTitle {
    font-weight: 700;
    margin: 0 0 10px;
    font-size: 15px;
    color: #111827;
  }

  .spGroupCard {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    min-width: 0;
    max-width: 100%;
  }

  .spGroupCard:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .spGroupAlt0 {
    background: #ffffff;
  }

  .spGroupAlt1 {
    background: #fcfcff;
  }

  .spGroupHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
    background: rgba(0, 0, 0, 0.02);
  }

  .spGroupTitle {
    font-weight: 700;
    font-size: 14px;
  }

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

  .spTable th,
  .spTable td {
    border-bottom: 1px solid #eef2f7;
    padding: 8px 12px;
    vertical-align: middle;
  }

  .spTable th {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    font-size: 12px;
    color: #374151;
    font-weight: 600;
  }

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

  .spArtikelCell select,
  .spTable td select {
    width: 100%;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
  }

  .spInselCell {
    font-weight: 700;
    white-space: nowrap;
  }

  /* ===== NEUE KOMPAKTE GRID-ANSICHT ===== */
  table.spTableGrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
  }

  .spTableGrid thead tr {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  }

  .spTableGrid th {
    padding: 8px 6px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    text-align: center;
  }

  .spTableGrid th.spColInselGrid {
    text-align: left;
    padding-left: 12px;
    width: 30%;
    min-width: 100px;
  }

  .spTableGrid th.spColShiftGrid {
    width: 23.33%;
    min-width: 80px;
  }

  .spTableGrid th.spColF {
    color: #92400e;
  }

  .spTableGrid th.spColS {
    color: #9a3412;
  }

  .spTableGrid th.spColN {
    color: #1d4ed8;
  }

  .spTableGrid tbody tr.spRowGrid {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
  }

  .spTableGrid tbody tr.spRowGrid:hover {
    background: #fafbfc;
  }

  .spTableGrid tbody tr.spRowGrid:last-child {
    border-bottom: none;
  }

  /* Insel-Zelle */
  .spTableGrid td.spInselCellGrid {
    padding: 8px 12px;
    vertical-align: middle;
  }

  .spInselNameGrid {
    font-weight: 700;
    font-size: 12px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spInselArtikelGrid {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
  }

  .spArtikelSelGrid {
    font-size: 10px;
    padding: 2px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
    max-width: 100%;
  }

  .spArtikelStaticGrid {
    font-size: 10px;
    color: #64748b;
  }

  /* Schicht-Zellen */
  .spTableGrid td.spShiftCellGrid {
    padding: 6px 4px;
    text-align: center;
    vertical-align: middle;
    position: relative;
  }

  .spShiftCellF {
    background: rgba(245, 158, 11, 0.04);
  }

  .spShiftCellS {
    background: rgba(234, 88, 12, 0.04);
  }

  .spShiftCellN {
    background: rgba(59, 130, 246, 0.04);
  }

  .spSelectMaGrid {
    width: 100%;
    max-width: 100%;
    padding: 5px 4px;
    font-size: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
  }

  .spSelectMaGrid:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .spSelectMaGrid:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
  }

  /* Status-Icons */
  .spStatusIcon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    font-weight: 700;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
  }

  .spStatusOk {
    color: #16a34a;
    background: #dcfce7;
  }

  .spStatusWarn {
    color: #ea580c;
    background: #ffedd5;
  }

  /* Schicht-Farben für befüllte Selects */
  .spShiftCellF .spSelectMaGrid:not([value=""]):not(:invalid) {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  }

  .spShiftCellS .spSelectMaGrid:not([value=""]):not(:invalid) {
    border-color: #fb923c;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  }

  .spShiftCellN .spSelectMaGrid:not([value=""]):not(:invalid) {
    border-color: #60a5fa;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  }

  /* Responsive: kleinere Schriften auf schmalen Bildschirmen */
  @media (max-width: 600px) {

    .spTableGrid th,
    .spSelectMaGrid,
    .spInselNameGrid {
      font-size: 10px;
    }

    .spTableGrid td.spInselCellGrid,
    .spTableGrid td.spShiftCellGrid {
      padding: 4px 3px;
    }

    .spSelectMaGrid {
      padding: 3px 2px;
    }
  }

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

  .spRightTbl th,
  .spRightTbl td {
    border-bottom: 1px solid #eef2f7;
    padding: 8px 12px;
  }

  .spRightTbl th {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 12px;
  }

  .spRowWarn {
    background: #fff7ed;
  }

  .spSumRow {
    font-weight: 700;
    border-top: 2px solid #9ca3af;
  }

  .spDiffPos {
    color: #16a34a;
    font-weight: 700;
  }

  .spDiffNeg {
    color: #dc2626;
    font-weight: 700;
  }

  .spDiffZero {
    color: #64748b;
    font-weight: 700;
  }

  .spShiftStats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 16px;
  }

  .spShiftPill {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: white;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  }

  .spPoolPanel {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    padding: 16px;
  }

  .spPoolSelectedBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px dashed #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 13px;
  }

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

  .spPoolShift {
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
    margin-top: 12px;
  }

  .spPoolShift:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

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

  .spPoolRow {
    display: block;
    margin: 10px 0;
  }

  .spPoolRowHighlight {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 4px solid #f59e0b;
    padding: 12px;
    border-radius: 8px;
    margin: 12px 0;
  }

  .spPoolLabel {
    display: block;
    width: auto;
    margin-bottom: 8px;
    font-weight: 600;
  }

  .spPoolChips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .spChip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
  }

  .spChip:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }

  .spChipSelected {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
  }

  .spChipDisabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .spChipFree {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
  }

  .spChipGroup {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
  }

  .spChipAbsSick {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-color: #fca5a5;
  }

  .spChipAbsVac {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
  }

  .btn.btn-xs {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 10px;
  }

  #schichtplanung button {
    width: auto;
    margin: 0;
    margin-bottom: 0;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  #schichtplanung select,
  #schichtplanung input,
  #schichtplanung textarea {
    width: auto;
    margin: 0;
    margin-bottom: 0;
    font-size: 13px !important;
    padding: 10px 14px;
    border-radius: 12px;
  }

  #schichtplanung .spHeader {
    align-items: center;
    gap: 12px;
  }

  #schichtplanung .spHeaderLeft h2 {
    margin: 0;
    line-height: 1.15;
  }

  #schichtplanung .spHeaderRight {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  #schichtplanung .spKwBox label {
    font-size: 12px;
    margin-bottom: 4px;
    opacity: .85;
  }

  #schichtplanung #spKwSelect {
    min-width: 120px;
    width: auto;
    padding: 10px 14px;
    font-size: 13px !important;
    margin: 0;
  }

  #schichtplanung .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }

  #schichtplanung .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
  }

  #schichtplanung .btn:active {
    transform: translateY(0px) scale(0.99);
  }

  #schichtplanung .btn-outline {
    background: #fff;
    color: #4f46e5;
    border: 2px solid #c7d2fe;
    box-shadow: none;
  }

  #schichtplanung .spToolbarSpacer {
    display: none;
  }

  #schichtplanung #spSummaryBar {
    margin-left: auto;
  }

  #schichtplanung .spToolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  #schichtplanung .spToolbarGroup {
    gap: 10px;
  }

  #schichtplanung .spArtikelSel,
  #schichtplanung .spSelectMa {
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    font-size: 11px !important;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
  }

  #schichtplanung .spGroupCard table {
    table-layout: auto;
    width: 100%;
    min-width: 280px;
  }

  #schichtplanung .spGroupCard th,
  #schichtplanung .spGroupCard td {
    padding: 8px 10px;
  }

  #schichtplanung .spGroupCard td:first-child {
    white-space: nowrap;
  }

  #schichtplanung .spChip {
    width: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }

  #schichtplanung .spRightPane .spPanelTitle {
    margin-bottom: 10px;
  }

  #schichtplanung #spMachines {
    display: block;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  #schichtplanung .spUnifiedTable select,
  #schichtplanung .spUnifiedTable input,
  #schichtplanung .spSelectMaUnified,
  #schichtplanung .spArtikelSelUnified {
    font-size: 11px !important;
  }

  /* ===== UNIFIED TABLE - Eine Tabelle für alle Gruppen ===== */
  .spUnifiedTable {
    width: 100%;
    border-collapse: collapse;
    background: #f1f5f9;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    table-layout: auto;
  }

  .spUnifiedTable thead {
    background: linear-gradient(135deg, #1e40af 0%, #4338ca 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .spUnifiedTable thead th {
    padding: 14px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border: none;
    color: #fff !important;
    background: transparent !important;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.35);
    color: #fff;
    border-bottom: 2px solid rgba(15, 23, 42, 0.15);
  }

  .spUnifiedTable thead th.spColInsel {
    text-align: left;
    width: 200px;
  }

  .spUnifiedTable thead th.spColArtikel {
    text-align: left;
    width: 170px;
  }

  .spUnifiedTable thead th.spColShift {
    min-width: 170px;
  }

  .spUnifiedTable thead th.spColF {
    color: #fff7ed;
  }

  .spUnifiedTable thead th.spColS {
    color: #fff1d6;
  }

  .spUnifiedTable thead th.spColN {
    color: #e0f2fe;
  }

  /* Gruppen-Header-Zeilen */
  .spGroupHeaderRow {
    border-top: 3px solid #e2e8f0;
  }

  .spGroupHeaderRow:first-child {
    border-top: none;
  }

  .spGroupHeaderCell {
    padding: 12px 16px !important;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0f172a;
  }

  .spGroupName {
    font-size: 14px;
    color: #1e293b;
  }

  .spGroupCount {
    font-size: 12px;
    color: #334155;
    font-weight: 500;
  }

  /* Maschinen-Zeilen */
  .spMachineRow {
    transition: background 0.1s ease;
  }

  .spMachineRow:hover {
    background: rgba(79, 70, 229, 0.04) !important;
  }

  .spMachineRow td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
  }

  .spCellInsel {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
  }

  .spCellArtikel {
    font-size: 12px;
    color: #475569;
  }

  .spArtikelSelUnified {
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding: 6px 28px 6px 10px;
    font-size: 13px !important;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spCellShift {
    text-align: center;
    padding: 8px 8px !important;
  }

  .spCellF {
    background: rgba(245, 158, 11, 0.05);
  }

  .spCellS {
    background: rgba(234, 88, 12, 0.05);
  }

  .spCellN {
    background: rgba(59, 130, 246, 0.05);
  }

  .spSelectMaUnified {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 30px 8px 10px;
    font-size: 11px !important;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spSelectMaUnified:hover {
    border-color: #cbd5e1;
  }

  .spSelectMaUnified:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
  }

  /* Befüllte Selects farbig markieren */
  .spCellF .spSelectMaUnified:not(:invalid) {
    border-left: 3px solid #f59e0b;
  }

  .spCellS .spSelectMaUnified:not(:invalid) {
    border-left: 3px solid #ea580c;
  }

  .spCellN .spSelectMaUnified:not(:invalid) {
    border-left: 3px solid #3b82f6;
  }

  /* Bei Auswahl: leichter Hintergrund */
  .spCellF .spSelectMaUnified option:checked,
  .spSelectMaUnified[value]:not([value=""]) {
    font-weight: 600;
  }

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

    .spUnifiedTable thead th,
    .spCellInsel,
    .spSelectMaUnified {
      font-size: 11px;
      padding: 6px 6px;
    }

    .spUnifiedTable thead th.spColInsel,
    .spUnifiedTable thead th.spColArtikel {
      min-width: 120px;
    }

    .spSelectMaUnified {
      max-width: 100%;
      padding: 6px 8px;
    }
  }

  #schichtplanung .spMainGrid,
  #schichtplanung .spMachinesPane,
  #schichtplanung .spRightPane {
    min-width: 0;
  }

  #schichtplanung #spMachines table {
    min-width: 0;
    width: 100%;
  }

  #schichtplanung.sp-sidebar-collapsed .spMainGrid {
    grid-template-columns: 1fr;
  }

  #schichtplanung.sp-sidebar-collapsed .spRightPane {
    display: none;
  }

  #schichtplanung .spCollapsible {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
  }

  #schichtplanung .spCollapsible+.spCollapsible {
    margin-top: 16px;
  }

  #schichtplanung .spPaneSummary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    user-select: none;
    font-weight: 600;
  }

  #schichtplanung .spPaneSummary::-webkit-details-marker {
    display: none;
  }

  #schichtplanung .spCollapsibleBody {
    padding: 12px 16px 16px;
  }

  @media (max-width: 520px) {
    #schichtplanung .btn {
      padding: 10px 12px;
      font-size: 13px;
    }

    #schichtplanung #spKwSelect {
      min-width: 110px;
    }
  }

  #schichtplanung .spGroupGrid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
  }

  #schichtplanung .spGroupCard {
    border-color: #e2e8f0;
  }

  #schichtplanung .spGroupCardHeader {
    padding: 12px 16px;
  }

  #schichtplanung .spGroupCardBody {
    padding: 0 16px 16px 16px;
  }

  #schichtplanung .spMainGrid {
    grid-template-columns: 1fr;
  }

  /* Sidebar rechts nur bei sehr breiten Screens */
  @media (min-width: 1800px) {
    #schichtplanung .spMainGrid {
      grid-template-columns: 1fr 520px;
    }
  }

  /* ===== SCHICHTPLANUNG WOCHENENDE ===== */
  #schichtplanungWE .spHeader {
    align-items: center;
    gap: 12px;
  }

  #schichtplanungWE .spHeaderLeft h2 {
    margin: 0;
    line-height: 1.15;
  }

  #schichtplanungWE .spHeaderRight {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  #schichtplanungWE .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }

  #schichtplanungWE .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
  }

  #schichtplanungWE .btn:active {
    transform: translateY(0px) scale(0.99);
  }

  #schichtplanungWE .btn-outline {
    background: #fff;
    color: #4f46e5;
    border: 2px solid #c7d2fe;
    box-shadow: none;
  }

  #schichtplanungWE .spToolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  #schichtplanungWE .spToolbarGroup {
    gap: 10px;
  }

  #schichtplanungWE .spMainGrid {
    grid-template-columns: 1fr 380px;
    min-width: 0;
  }

  #schichtplanungWE .spMachinesPane,
  #schichtplanungWE .spRightPane {
    min-width: 0;
  }

  @media (max-width: 1200px) {
    #schichtplanungWE .spMainGrid {
      grid-template-columns: 1fr;
    }
  }

  /* Sidebar collapsed: volle Breite fuer Tabelle */
  #schichtplanungWE.sp-sidebar-collapsed .spMainGrid {
    grid-template-columns: 1fr;
  }

  #schichtplanungWE.sp-sidebar-collapsed .spRightPane {
    display: none;
  }

  #schichtplanungWE .spCollapsible {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
  }

  #schichtplanungWE .spCollapsible+.spCollapsible {
    margin-top: 16px;
  }

  #schichtplanungWE .spPaneSummary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    user-select: none;
    font-weight: 600;
  }

  #schichtplanungWE .spPaneSummary::-webkit-details-marker {
    display: none;
  }

  #schichtplanungWE .spCollapsibleBody {
    padding: 12px 16px 16px;
  }

  #schichtplanungWE .spUnifiedTable select,
  #schichtplanungWE .spSelectMaUnified,
  #schichtplanungWE .spArtikelSelUnified {
    font-size: 13px !important;
  }

  #schichtplanungWE #spweMachines {
    display: block;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  #schichtplanungWE #spweMachines table {
    min-width: 0;
    width: 100%;
  }

  /* Wochen-Tabs Styling */
  .spWeekTabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    padding: 4px;
    background: #f8fafc;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .spWeekTab {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-weight: 500;
    color: #64748b;
    user-select: none;
  }

  .spWeekTab:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
  }

  .spWeekTab.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }

  .spWeekTab.loaded {
    position: relative;
  }

  .spWeekTab.loaded::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    color: #22c55e;
  }

  .spWeekTab.active.loaded::after {
    color: #fff;
  }

  .spWeekTabLabel {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
  }

  .spWeekTabInfo {
    font-size: 11px;
    color: #475569;
  }

  /* Wochen-Navigation Buttons */
  .spWeekNavBtn {
    flex: 0 0 auto;
    width: 40px;
    height: 48px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #4f46e5;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spWeekNavBtn:hover:not(.disabled) {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
    transform: scale(1.05);
  }

  .spWeekNavBtn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    color: #94a3b8;
  }

  .spWeekAddBtn {
    flex: 0 0 auto;
    width: 40px;
    height: 48px;
    border: 2px dashed #c7d2fe;
    border-radius: 10px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spWeekAddBtn:hover:not(.disabled) {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border-style: solid;
    border-color: #4f46e5;
    transform: scale(1.05);
  }

  .spWeekAddBtn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* Übersichtstabelle Styling */
  .spOverviewCard {
    margin: 16px 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  .spOverviewTable {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
  }

  .spOverviewTable thead {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
  }

  .spOverviewTable th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
  }

  .spOverviewTable td {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
  }

  .spOverviewTable tbody tr:hover {
    background: #f8fafc;
    cursor: pointer;
  }

  .spOverviewTable tbody tr.active {
    background: #ede9fe;
    font-weight: 600;
  }

  .spOverviewStatusBadge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }

  .spOverviewStatusBadge.complete {
    background: #dcfce7;
    color: #16a34a;
  }

  .spOverviewStatusBadge.partial {
    background: #fef3c7;
    color: #ca8a04;
  }

  .spOverviewStatusBadge.empty {
    background: #fee2e2;
    color: #dc2626;
  }

  @media (max-width: 768px) {
    .spWeekTabs {
      gap: 6px;
    }

    .spWeekTab {
      min-width: 100px;
      padding: 10px 12px;
      font-size: 13px;
    }

    .spOverviewTable th,
    .spOverviewTable td {
      padding: 10px 12px;
      font-size: 12px;
    }
  }

  /* Haupttabelle (Schichtplan-Tabelle) Styling */
  .spMainTable {
    margin: 16px 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  .spPlanTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }

  .spPlanTable thead th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #000;
    font-size: 11px;
  }

  .spPlanTable tbody td {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    vertical-align: middle;
    line-height: 1.4;
  }

  .spPlanTable tbody tr:hover {
    background: #f8fafc;
  }

  /* Insel-Zelle (erste Spalte) */
  .spPlanTable .spInselCol {
    font-weight: bold;
    min-width: 80px;
    width: 100px;
  }

  /* Artikel-Zelle (zweite Spalte) */
  .spPlanTable .spArtikelCol {
    min-width: 120px;
    width: 150px;
  }

  /* Schicht-Zellen (F/S/N) */
  .spPlanTable .spShiftCol {
    min-width: 120px;
    max-width: 180px;
  }

  /* Contenteditable Zellen */
  .spPlanTable [contenteditable="true"] {
    cursor: text;
    outline: none;
    min-height: 18px;
    padding: 3px 5px;
    border-radius: 3px;
    transition: background 0.2s;
  }

  .spPlanTable [contenteditable="true"]:hover {
    background: #f1f5f9;
  }

  .spPlanTable [contenteditable="true"]:focus {
    background: #e0f2fe;
    box-shadow: 0 0 0 2px #3b82f6;
  }

  /* Drag & Drop Styles */
  .spPlanTable [contenteditable="true"][draggable="true"] {
    cursor: grab;
  }

  .spPlanTable .spDragging {
    opacity: 0.5;
    cursor: grabbing;
    background: #cbd5e1;
  }

  .spPlanTable .spDragOver {
    background: #bfdbfe;
    box-shadow: 0 0 0 2px #3b82f6;
    border-color: #3b82f6;
  }

  /* Gruppen-Farben (wie im Screenshot) */
  .spPlanTable tr[data-group-color="red"] .spInselCol,
  .spPlanTable tr[data-group-color="red"] .spArtikelCol {
    background: #e53935;
    color: #fff;
  }

  .spPlanTable tr[data-group-color="blue"] .spInselCol,
  .spPlanTable tr[data-group-color="blue"] .spArtikelCol {
    background: #4285f4;
    color: #fff;
  }

  /* Wartung/Leere Zeilen */
  .spPlanTable .spWartungCell {
    color: #64748b;
    font-style: italic;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .spPlanTable {
      font-size: 10px;
    }

    .spPlanTable thead th,
    .spPlanTable tbody td {
      padding: 3px 6px;
    }

    .spPlanTable .spInselCol {
      min-width: 60px;
    }

    .spPlanTable .spArtikelCol {
      min-width: 80px;
    }

    .spPlanTable .spShiftCol {
      min-width: 80px;
    }
  }

  #schichtplanung .spSummaryPill {
    padding: 10px 16px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: white;
    font-size: 13px;
  }

  #schichtplanung .spTable {
    table-layout: fixed;
  }

  #schichtplanung th.spColInsel,
  #schichtplanung td.spInselCell {
    width: 38%;
    min-width: 100px;
  }

  #schichtplanung th.spColBesetzung,
  #schichtplanung td.spBesetzCell {
    width: 62%;
    min-width: 180px;
  }

  #schichtplanung .spInselName {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1;
  }

  #schichtplanung .spInselArtikel {
    margin-top: 6px;
  }

  #schichtplanung .spArtikelSel {
    width: 100%;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  #schichtplanung .spArtikelStatic {
    display: inline-block;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #schichtplanung .spBesetzStack {
    display: grid;
    gap: 6px;
  }

  #schichtplanung .spBesetzRow {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #schichtplanung .spBesetzLabel {
    flex: 0 0 82px;
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
  }

  #schichtplanung .spBesetzRow .spSelectMa {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  /* Bei zu langen Namen: Ellipsis im Select */
  #schichtplanung .spBesetzRow .spSelectMa option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Urlaubsplanung Styles */
  .upCard {
    padding: 20px;
  }

  .upTopbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
  }

  .upTitle {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .upTitle h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
  }

  .upTitle .sub {
    font-size: 13px;
    color: #64748b;
  }

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

  .upControls label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
  }

  .upSelect,
  .upInput {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    background: #fff;
    outline: none;
    height: 40px;
    transition: all 0.2s;
  }

  .upSelect:focus,
  .upInput:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
  }

  .upInput {
    width: 200px;
  }

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

  .upPills {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }

  .upPills>.upModeBtn,
  button.upModeBtn {
    border: 2px solid #e2e8f0 !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    color: #475569 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transform: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .upPills>.upModeBtn:hover,
  button.upModeBtn:hover {
    background: #f8fafc !important;
    border-color: #4f46e5 !important;
    transform: translateY(-1px) !important;
  }

  .upPills>.upModeBtn.active,
  button.upModeBtn.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
  }

  .upAlert {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #fca5a5;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    font-size: 14px;
    display: none;
  }

  .upAlert.ok {
    border-color: #86efac;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
  }

  .upAlert.dim {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #475569;
  }

  .upPanelRow {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
    width: 100%;
  }

  .upPanelRow>.upPanelBtn,
  button.upPanelBtn {
    border: 2px solid #e2e8f0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    color: #475569 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transform: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .upPanelRow>.upPanelBtn:hover,
  button.upPanelBtn:hover {
    background: #f8fafc !important;
    border-color: #4f46e5 !important;
    transform: translateY(-1px) !important;
  }

  .upPanelRow>.upPanelBtn.active,
  button.upPanelBtn.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
  }

  /* CRITICAL: Force horizontal button layout */
  .card>div[style*="display:flex"] {
    display: flex !important;
    flex-direction: row !important;
  }

  .card>div[style*="display:flex"]>button {
    width: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
  }

  .upPanel {
    margin-top: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    display: none;
    overflow: hidden;
  }

  .upPanelHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
  }

  .upPanelHead h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  .upPanelBody {
    padding: 16px;
  }

  .upFormGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
  }

  .upFormGrid .full {
    grid-column: 1 / -1;
  }

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

  .upLabel {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
    font-weight: 600;
  }

  .upTextarea {
    width: 100%;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    min-height: 80px;
    resize: vertical;
  }

  .upCalWrap {
    margin-top: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
  }

  .upCalHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
  }

  .upCalHead .left {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .upCalHead .left .h {
    font-size: 16px;
    font-weight: 700;
  }

  .upCalHead .left .d {
    font-size: 13px;
    color: #64748b;
  }

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

  .upTableScroll {
    overflow: auto;
    max-height: 68vh;
  }

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

  .upGrid th,
  .upGrid td {
    border-bottom: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
    padding: 8px;
    text-align: center;
    background: #fff;
    white-space: nowrap;
  }

  .upGrid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
  }

  .upGrid thead tr:nth-child(2) th {
    top: 38px;
    font-weight: 600;
    color: #475569;
    background: #fbfdff;
  }

  .upStickyName {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
    min-width: 210px;
    text-align: left !important;
    border-right: 1px solid #e5e7eb;
  }

  .upGrid thead .upStickyName {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    z-index: 6;
  }

  .upGrid thead tr:nth-child(2) .upStickyName {
    background: #fbfdff;
    z-index: 6;
  }

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

  .upShiftTag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
  }

  .upSurname {
    font-weight: 600;
  }

  .upSmall {
    font-size: 11px;
    color: #64748b;
  }

  .upCellBtn {
    width: 36px;
    height: 28px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
  }

  .upCellBtn:hover {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    border-color: #4f46e5;
  }

  .upU {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fb923c;
    color: #9a3412;
  }

  .upK {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #f87171;
    color: #991b1b;
  }

  .upP {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-color: #c084fc;
    color: #6b21a8;
  }

  .upS {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #4ade80;
    color: #166534;
  }

  .upWK {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #a5b4fc;
    color: #3730a3;
  }

  .upF {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #60a5fa;
    color: #1e3a8a;
  }

  .upDim {
    color: #64748b;
    font-weight: 600;
  }

  .upHolidayLock {
    cursor: not-allowed !important;
    opacity: 0.9;
  }

  .upCellBtn:disabled {
    cursor: not-allowed;
    opacity: 0.9;
    transform: none !important;
    box-shadow: none !important;
  }

  .upWeekSep {
    border-right: 2px solid #cbd5e1 !important;
  }

  .upLegend {
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

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

  .matrix-wrapper-compact {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  /* Aber für Dashboard: volle Höhe ohne Scroll */
  #dashboardKWMatrix .matrix-wrapper-compact {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .matrix-table-compact {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    width: 100%;
  }

  .matrix-table-compact th,
  .matrix-table-compact td {
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
  }

  .matrix-table-compact thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
  }

  .matrix-table-compact tbody tr:nth-child(odd) {
    background: #fafafa;
  }

  .matrix-table-compact tbody tr:hover {
    background: #f1f5f9;
    cursor: pointer;
  }

  .matrix-table-compact tbody tr:nth-child(odd) .sticky-col {
    background: #fafafa;
  }

  .matrix-table-compact tbody tr:hover .sticky-col {
    background: #f1f5f9;
  }

  .matrix-table-compact .sticky-col-1 {
    left: 0;
    min-width: 90px;
  }

  .matrix-table-compact .sticky-col-2 {
    left: 90px;
    min-width: 150px;
  }

  .matrix-table-compact thead .sticky-col {
    z-index: 4;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  }

  .matrix-table-compact tfoot .sticky-col {
    z-index: 4;
    background: #f0f0f0;
  }

  .matrix-table-compact tfoot th {
    background: #f0f0f0;
    position: sticky;
    bottom: 0;
    font-weight: 600;
    border-top: 2px solid #e2e8f0;
    padding: 8px 10px;
  }

  .matrix-table-compact th {
    min-width: 55px;
  }

  /* Wochen-Import-Übersicht */
  .week-ov-cell {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
    transition: transform 0.1s, box-shadow 0.15s;
    min-width: 60px;
    text-align: center;
  }

  .week-ov-ok {
    background: #dcfce7;
    color: #16a34a;
    cursor: pointer;
  }

  .week-ov-ok:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
  }

  .week-ov-miss {
    background: #fee2e2;
    color: #dc2626;
  }

  /* ---- Dispo View Overrides ---- */
  #dispo button,
  #dispo select,
  #dispo input,
  #dispoView button,
  #dispoView select,
  #dispoView input,
  #dispoStammdatenModal button,
  #dispoStammdatenModal select,
  #dispoStammdatenModal input,
  #dispoStuecklisteModal button,
  #dispoStuecklisteModal select,
  #dispoStuecklisteModal input,
  #dispoBestandImportModal button,
  #dispoBestandImportModal input,
  #dispoBestellungenModal button,
  #dispoBestellungenModal select,
  #dispoBestellungenModal input {
    width: auto;
    margin-bottom: 0;
  }

  #dispo .dispo-toolbar,
  #dispoView .dispo-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }

  #dispo .dispo-toolbar h2,
  #dispoView .dispo-toolbar h2 {
    margin: 0;
    font-size: 22px;
  }

  #dispo .dispo-actions,
  #dispoView .dispo-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }

  #dispo .dispo-actions button,
  #dispoView .dispo-actions button {
    background: white;
    color: #4f46e5;
    border: 1.5px solid #c7d2fe;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
  }

  #dispo .dispo-actions button:hover,
  #dispoView .dispo-actions button:hover {
    background: #eef2ff;
    border-color: #4f46e5;
    transform: none;
    box-shadow: none;
  }

  #dispo .dispo-kw-bar,
  #dispoView .dispo-kw-bar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 14px;
  }

  #dispo .dispo-kw-bar button,
  #dispoView .dispo-kw-bar button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
  }

  #dispo .dispo-kw-bar button:hover,
  #dispoView .dispo-kw-bar button:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: none;
    box-shadow: none;
  }

  #dispo .dispo-kw-bar span,
  #dispoView .dispo-kw-bar span {
    color: white;
    font-weight: 700;
    font-size: 17px;
    min-width: 120px;
    text-align: center;
    letter-spacing: 0.3px;
  }

  #dispo .dispo-filters,
  #dispoView .dispo-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
  }

  #dispo .dispo-filters select,
  #dispoView .dispo-filters select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    background: white;
  }

  #dispo .dispo-filters label,
  #dispoView .dispo-filters label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  #dispo .dispo-filters input[type="checkbox"],
  #dispoView .dispo-filters input[type="checkbox"] {
    width: 16px;
  }

  /* Dispo modal form inputs */
  #dispoStammdatenModal input,
  #dispoStuecklisteModal input,
  #dispoStuecklisteModal select,
  #dispoStammdatenModal select {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
  }

  #dispoStammdatenModal .btn,
  #dispoStuecklisteModal .btn,
  #dispoBestandImportModal .btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border: none;
    padding: 8px 18px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
  }

  #dispoBestandImportModal input[type="file"] {
    width: 100%;
    box-sizing: border-box;
  }

  /* Mobile Tabellen-Scroll-Hinweis */
  .table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media (max-width: 768px) {
    .table-scroll-wrapper::after {
      content: '\2190 Scrollen \2192';
      display: block;
      text-align: center;
      font-size: 11px;
      color: #64748b;
      padding: 6px 0;
      letter-spacing: 0.5px;
    }

    .table-scroll-wrapper.scrolled::after {
      display: none;
    }
  }

  /* Print-Styles */
  @media print {
    body {
      background: white !important;
      padding: 0 !important;
      font-size: 12px !important;
    }

    .header,
    #mainNav,
    .mobile-menu-btn,
    .spToolbar,
    .sb-controls,
    .btn,
    button,
    .filter-container,
    #preloadOverlay,
    .nav-group,
    .tab {
      display: none !important;
    }

    .card {
      box-shadow: none !important;
      border: 1px solid #ddd !important;
      padding: 12px !important;
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .view {
      display: block !important;
    }

    table {
      box-shadow: none !important;
      font-size: 11px !important;
    }

    th,
    td {
      padding: 6px 8px !important;
    }

    thead {
      background: #333 !important;
      color: white !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    tbody tr:hover {
      transform: none !important;
      background: transparent !important;
    }

    /* Gruppenfarben im Druck beibehalten */
    [data-group-color] td {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .progress-bar,
    .progress-segment {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }

  /* ============================================================================ */
  /* ENHANCED UI STYLES - Added for Option A Implementation */
  /* ============================================================================ */

  /* Modal Backdrop */
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* Modal Styles */
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    display: none;
    animation: modalSlideIn 0.3s ease-out forwards;
  }

  .modal.active {
    display: block;
  }

  @keyframes modalSlideIn {
    to {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .modal-content {
    padding: 30px;
  }

  .modal-content h2 {
    margin-bottom: 20px;
    color: #1a202c;
    font-size: 24px;
  }

  .modal-content h3 {
    margin-top: 20px;
    margin-bottom: 12px;
    color: #2d3748;
    font-size: 18px;
  }

  .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 32px;
    color: #718096;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .modal-close:hover {
    background: #f7fafc;
    color: #1a202c;
    transform: rotate(90deg);
  }

  /* Form Groups */
  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.2s;
    font-family: inherit;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }

  .form-group textarea {
    resize: vertical;
    min-height: 100px;
  }

  /* Modal Actions */
  .modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
  }

  .import-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
  }

  .import-section {
    background: #f7fafc;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .import-section input[type="file"] {
    margin: 15px 0;
  }

  /* KPI Tooltips */
  .kpi-tooltip {
    background: #1a202c;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    max-width: 300px;
    animation: tooltipFadeIn 0.2s ease-out;
  }

  @keyframes tooltipFadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Auftragslage Table */
  .auftragslage-table {
    margin-top: 20px;
  }

  .auftragslage-table th {
    background: #4f46e5;
    color: white;
  }

  .auftragslage-table td strong {
    color: #4f46e5;
    font-size: 18px;
  }

  /* Employee Sidebar for Schichtplanung */
  .employee-sidebar {
    position: fixed;
    right: var(--sidebar-right, 20px);
    top: var(--sidebar-top, 120px);
    width: var(--sidebar-width, 450px);
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-height: var(--sidebar-max-height, calc(100vh - 150px));
    overflow-y: auto;
    border: 2px solid #e5e7eb;
    box-sizing: border-box;
  }

  .employee-sidebar h3 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #1a202c;
  }

  .planning-sidebar {
    min-width: 320px;
    min-height: 240px;
  }

  .planning-sidebar .spPoolPanel {
    display: block;
    margin-top: 0;
  }

  .planning-sidebar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -4px -4px 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
  }

  .planning-sidebar-drag {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: move;
    user-select: none;
  }

  .planning-sidebar-reset {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .planning-sidebar-reset:hover {
    border-color: #94a3b8;
    color: #0f172a;
  }

  .planning-sidebar-resize {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 72px;
    cursor: ew-resize;
    border-left: 3px solid #a5b4fc;
    border-radius: 999px;
    opacity: 0.85;
  }

  #schichtplanungView .spMainGrid--floatingSidebar,
  #schichtplanung-weView .spMainGrid--floatingSidebar {
    margin-right: 0;
  }

  #schichtplanungView.sp-sidebar-collapsed .spMainGrid--floatingSidebar,
  #schichtplanung-weView.sp-sidebar-collapsed .spMainGrid--floatingSidebar {
    margin-right: 0;
  }

  #schichtplanungView.sp-sidebar-collapsed .employee-sidebar,
  #schichtplanung-weView.sp-sidebar-collapsed .employee-sidebar {
    display: none;
  }

  .employee-chip {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: grab;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    text-align: center;
    user-select: none;
  }

  .employee-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .employee-chip.dragging {
    opacity: 0.5;
    cursor: grabbing;
  }

  /* Drag & Drop States */
  .droppable {
    transition: all 0.2s;
  }

  .drag-over {
    background: #e6f7ff !important;
    border: 2px dashed #4f46e5 !important;
    transform: scale(1.05);
  }

  /* Editable Cells */
  .editable-cell {
    cursor: text;
    position: relative;
  }

  .editable-cell:hover {
    background: #f7fafc !important;
    outline: 2px solid #cbd5e0;
  }

  .editable-cell:focus {
    outline: 2px solid #4f46e5;
    background: white !important;
  }

  .editable-cell[contenteditable="true"] {
    min-height: 25px;
  }

  .assigned {
    background: #d4edda !important;
    font-weight: 600;
    color: #155724;
  }

  /* Editable Price Cells */
  .editable-price {
    cursor: pointer;
    position: relative;
  }

  .editable-price:hover::after {
    content: '✏️';
    position: absolute;
    right: 5px;
    font-size: 12px;
    opacity: 0.6;
  }

  /* Batch Selection Checkboxes */
  .select-all-checkbox,
  .row-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  /* Table Striping */
  .table-striped tbody tr:nth-child(even) {
    background: #f7fafc;
  }

  /* Button Variants */
  .btn-large {
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
  }

  .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
  }

  .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
  }

  .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
  }

  .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
  }

  .btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
  }

  /* Email Section Styling */
  .email-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #e2e8f0;
  }

  /* Responsive: Hide employee sidebar on mobile */
  @media (max-width: 1024px) {
    .employee-sidebar {
      position: static;
      width: 100%;
      max-height: none;
      margin-bottom: 20px;
    }

    #schichtplanungView .spMainGrid--floatingSidebar,
    #schichtplanung-weView .spMainGrid--floatingSidebar {
      margin-right: 0;
    }

    .planning-sidebar-drag,
    .planning-sidebar-resize {
      cursor: default;
    }

    .employee-chip {
      display: inline-block;
      margin-right: 8px;
    }
  }

  /* Loading/Progress Indicators */
  .import-progress {
    text-align: center;
    padding: 30px;
    font-size: 18px;
    color: #4f46e5;
  }

  /* Data Table Improvements */
  .data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
  }

  .data-table thead th {
    background: #4f46e5;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border: none;
  }

  .data-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
  }

  .data-table tbody tr:hover {
    background: #f7fafc;
  }

  /* Absence Type Color Coding */
  td[data-type="Urlaub"] {
    background: #d4edda !important;
    color: #155724;
    font-weight: 600;
  }

  td[data-type="Krank"] {
    background: #f8d7da !important;
    color: #721c24;
    font-weight: 600;
  }

  td[data-type="Sonstiges"] {
    background: #fff3cd !important;
    color: #856404;
    font-weight: 600;
  }

  /* OEE Color Coding */
  .oee-card {
    transition: all 0.3s;
  }

  td[data-type="percent"] {
    font-weight: 600;
    text-align: right;
  }

  /* Confirmation Modal Specific */
  .confirm-modal .modal-content {
    text-align: center;
  }

  .confirm-modal .modal-actions {
    justify-content: center;
    margin-top: 30px;
  }

  /* Print Adjustments for New Elements */
  @media print {

    .modal-backdrop,
    .modal,
    .employee-sidebar,
    .kpi-tooltip {
      display: none !important;
    }
  }

  /* ============================================================================ */
  /* AUFTRÄGE GOOGLE STYLE - Specific Styles */
  /* ============================================================================ */

  /* Letzte Lieferung Details */
  .letzte-lieferung-details summary {
    padding: 4px 0;
    transition: all 0.2s;
  }

  .letzte-lieferung-details summary:hover {
    color: #4f46e5;
  }

  .letzte-lieferung-details[open] summary {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
  }

  /* Order Item Google Style */
  .order-item-google {
    transition: all 0.2s;
    border: 1px solid #e2e8f0 !important;
  }

  .order-item-google:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e0 !important;
    transform: translateY(-2px);
  }

  /* Progress Bar in Order Items - MAKE VISIBLE */
  .order-item-google .progress-bar-google {
    height: 10px !important;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin: 12px 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .order-item-google .progress-fill-google {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 6px;
  }

  /* Status Badge Styles */
  .status-badge-google {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: white;
  }

  .status-badge-google.completed {
    background: #10b981;
  }

  .status-badge-google.in-progress {
    background: #fbbf24;
    color: #78350f;
  }

  .status-badge-google.open {
    background: #ef4444;
  }

  /* Filter Section Styling */
  .filter-section-google {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
  }

  .filter-section-google input[type="text"],
  .filter-section-google select {
    transition: all 0.2s;
  }

  .filter-section-google input[type="text"]:focus,
  .filter-section-google select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }

  /* Info Text Styling */
  .info-text-google {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
  }

  /* Calendar Week Header */
  .kw-header-google {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
  }

  .kw-header-google h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
  }

  /* Ensure Progress Bars are Always Visible */
  div[style*="height:8px"] {
    min-height: 10px !important;
    background: #e2e8f0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  /* ============================================================================
   COLLAPSIBLE ARTICLE CARDS
   ============================================================================ */

  /* Remove default marker */
  details.order-item-google summary {
    list-style: none;
  }

  details.order-item-google summary::-webkit-details-marker {
    display: none;
  }

  /* Rotate arrow when open */
  details.order-item-google[open] summary .auf-arrow {
    transform: rotate(90deg);
    display: inline-block;
    transition: transform 0.3s ease;
  }

  details.order-item-google summary .auf-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  /* Hover effect on summary */
  details.order-item-google summary:hover {
    opacity: 0.9;
  }

  /* Smooth expand/collapse animation */
  details.order-item-google[open] {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0.8;
    }

    to {
      opacity: 1;
    }
  }

  /* ============================================================================
 * DASHBOARD AUFTRAGSLAGE TABLE (GOOGLE STYLE - WITH GRID LINES)
 * ============================================================================ */

  #dashboardAuftragslage table {
    border: 2px solid #cbd5e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  #dashboardAuftragslage thead {
    z-index: 10;
  }

  #dashboardAuftragslage th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  #dashboardAuftragslage td {
    border: 1px solid #e2e8f0 !important;
  }

  #dashboardAuftragslage tbody tr {
    transition: all 0.2s ease;
  }

  #dashboardAuftragslage tbody tr:hover {
    background-color: #eef2ff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  #dashboardAuftragslage tfoot {
    z-index: 5;
  }

  #dashboardAuftragslage tfoot tr {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }

  #dashboardAuftragslage tfoot td {
    border: 1px solid #cbd5e0 !important;
    border-top: 2px solid #4f46e5 !important;
  }

  /* Sticky columns styling - only left columns */
  #dashboardAuftragslage td[style*="position:sticky"],
  #dashboardAuftragslage th[style*="position:sticky"] {
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
    border-right: 2px solid #cbd5e0 !important;
  }

  /* Current week column highlight */
  #dashboardAuftragslage th[style*="border-left:3px solid #fbbf24"],
  #dashboardAuftragslage td[style*="border-left:3px solid #fbbf24"] {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2);
  }

  /* Responsive table container - ONLY horizontal scroll */
  #dashboardAuftragslage>div {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 12px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f1f5f9;
  }

  #dashboardAuftragslage>div::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  #dashboardAuftragslage>div::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
    margin: 4px;
  }

  #dashboardAuftragslage>div::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #cbd5e0 0%, #94a3b8 100%);
    border-radius: 6px;
    border: 2px solid #f1f5f9;
  }

  #dashboardAuftragslage>div::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  }

  #dashboardAuftragslage>div::-webkit-scrollbar-corner {
    background: #f1f5f9;
  }



  /* Mobile responsive adjustments */
  @media (max-width: 768px) {
    #dashboardAuftragslage table {
      font-size: 11px;
    }

    #dashboardAuftragslage th,
    #dashboardAuftragslage td {
      padding: 8px 6px !important;
    }

    #dashboardAuftragslage td[style*="position:sticky"] {
      min-width: 90px !important;
    }

    #dashboardAuftragslage th[style*="position:sticky"] {
      min-width: 90px !important;
    }
  }

  @media (max-width: 480px) {
    #dashboardAuftragslage table {
      font-size: 10px;
    }

    #dashboardAuftragslage th,
    #dashboardAuftragslage td {
      padding: 6px 4px !important;
    }
  }

  /* ============================================================================
 * AUFTRAGSLAGE FILTER BUTTONS
 * ============================================================================ */

  .auftrag-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  .auftrag-filter-btn.active {
    background: #4f46e5 !important;
    color: white !important;
  }

  /* Table row hover effect */
  .auftrag-table-row:hover {
    background: #eef2ff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
  }

  /* KPI Cards hover */
  #dashboardAuftragslage>div:first-child>div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease;
  }

  /* ============================================================================
 * KPI HOVER EFFECTS & TOOLTIPS
 * ============================================================================ */

  /* Ensure KPI container doesn't clip tooltips */
  #dashboardKPIs {
    overflow: visible !important;
  }

  .kpi-hover {
    position: relative;
    overflow: visible !important;
  }

  .kpi-hover:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2) !important;
  }

  /* Disable hover tooltips for KPI cards - use click popovers instead */
  #dashboardKPIs .kpi-hover::after,
  #dashboardKPIs .kpi-hover::before {
    display: none !important;
  }

  /* ============================================================================
 * SCAN DETAILS COLLAPSIBLE
 * ============================================================================ */

  details>summary {
    list-style: none;
  }

  details>summary::-webkit-details-marker {
    display: none;
  }

  details[open]>summary {
    color: #6366f1;
  }

  details>summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.3s ease;
    font-size: 10px;
  }

  details[open]>summary::before {
    transform: rotate(90deg);
  }

  /* Small button style for Lieferhistorie details */
  .btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    background: #6C5CE7;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-small:hover {
    background: #5B4CD3;
  }


  /* ============================================================================
   SCHICHTPLANUNG - MODULE STYLES
   ============================================================================ */

  /* -------------------------
   Header & Layout
   ------------------------- */

  .spHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
  }

  .spHeaderLeft h2 {
    margin: 0 0 4px 0;
  }

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

  /* -------------------------
   Wochen-Tabs Navigation
   ------------------------- */

  .spWeekTabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
    padding-bottom: 8px;
  }

  .spWeekTabs::-webkit-scrollbar {
    height: 6px;
  }

  .spWeekTabs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
  }

  .spWeekTabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .spWeekTab {
    padding: 12px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    min-width: 120px;
    text-align: center;
    flex-shrink: 0;
  }

  .spWeekTab:hover {
    border-color: #7c3aed;
    transform: translateY(-2px);
  }

  .spWeekTab.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border-color: #4f46e5;
  }

  .spWeekTab.loaded {
    border-color: #10b981;
  }

  .spWeekTabLabel {
    font-weight: 600;
    font-size: 14px;
  }

  .spWeekTabInfo {
    font-size: 12px;
    margin-top: 4px;
    color: #475569;
  }

  .spWeekNavBtn,
  .spWeekAddBtn {
    padding: 8px 16px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .spWeekNavBtn:hover:not(.disabled),
  .spWeekAddBtn:hover:not(.disabled) {
    border-color: #7c3aed;
    background: #f5f3ff;
  }

  .spWeekNavBtn.disabled,
  .spWeekAddBtn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* -------------------------
   Main Grid Layout
   ------------------------- */

  .spMainGrid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    margin-top: 16px;
  }

  .spMainGrid.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .spMachinesPane {
    min-height: 400px;
    overflow-x: auto;
  }

  .spRightPane {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .spRightPane.collapsed {
    display: none;
  }

  .spPaneTitle {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    color: #4f46e5;
  }

  /* -------------------------
   Unified Table (Gruppierte Ansicht)
   ------------------------- */

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

  .spUnifiedTable thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 12px 8px;
    text-align: left;
    z-index: 10;
    font-weight: 600;
  }

  .spGroupHeaderRow {
    background: #fef3c7;
    font-weight: 700;
    font-size: 14px;
  }

  .spGroupHeaderRow td {
    padding: 10px 8px;
    border-top: 2px solid #f59e0b;
    border-bottom: 2px solid #f59e0b;
  }

  .spMachineRow {
    transition: background 0.2s;
  }

  .spMachineRow:hover {
    background: rgba(79, 70, 229, 0.05);
  }

  .spMachineRow td {
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
  }

  .spCellShift select {
    width: 100%;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    background: white;
    cursor: pointer;
  }

  .spCellShift select:focus {
    outline: 2px solid #4f46e5;
    border-color: #4f46e5;
  }

  .spArtikelSel,
  .spArtikelSelGrid,
  .spArtikelSelUnified {
    width: 100%;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    background: white;
  }

  /* 19 Gruppen-Farben */
  .spGroupColor0 {
    background: #fef3c7 !important;
  }

  /* Gelb */
  .spGroupColor1 {
    background: #dbeafe !important;
  }

  /* Blau */
  .spGroupColor2 {
    background: #fce7f3 !important;
  }

  /* Pink */
  .spGroupColor3 {
    background: #d1fae5 !important;
  }

  /* Grün */
  .spGroupColor4 {
    background: #fed7aa !important;
  }

  /* Orange */
  .spGroupColor5 {
    background: #e9d5ff !important;
  }

  /* Lila */
  .spGroupColor6 {
    background: #ccfbf1 !important;
  }

  /* Türkis */
  .spGroupColor7 {
    background: #fecaca !important;
  }

  /* Rot */
  .spGroupColor8 {
    background: #f3f4f6 !important;
  }

  /* Grau */
  .spGroupColor9 {
    background: #fbcfe8 !important;
  }

  /* Rosa */
  .spGroupColor10 {
    background: #bfdbfe !important;
  }

  /* Hellblau */
  .spGroupColor11 {
    background: #d9f99d !important;
  }

  /* Lime */
  .spGroupColor12 {
    background: #fde68a !important;
  }

  /* Amber */
  .spGroupColor13 {
    background: #c7d2fe !important;
  }

  /* Indigo */
  .spGroupColor14 {
    background: #fecdd3 !important;
  }

  /* Rose */
  .spGroupColor15 {
    background: #bae6fd !important;
  }

  /* Sky */
  .spGroupColor16 {
    background: #a5f3fc !important;
  }

  /* Cyan */
  .spGroupColor17 {
    background: #e879f9 !important;
  }

  /* Fuchsia */
  .spGroupColor18 {
    background: #bbf7d0 !important;
  }

  /* Emerald */

  /* -------------------------
   Pool Panel
   ------------------------- */

  .spPoolPanel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .spPoolItem {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-size: 12px;
    user-select: none;
  }

  .spPoolItem:hover {
    border-color: #4f46e5;
    transform: translateY(-2px);
  }

  .spPoolItem.selected {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border-color: #4f46e5;
  }

  .spPoolItem.absent-sick {
    background: #fee2e2;
    opacity: 0.6;
    text-decoration: line-through;
  }

  .spPoolItem.absent-vacation {
    background: #dbeafe;
    opacity: 0.6;
    text-decoration: line-through;
  }

  /* -------------------------
   Schicht-Statistiken
   ------------------------- */

  .spShiftStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
  }

  .spShiftStat {
    padding: 8px;
    background: white;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #e2e8f0;
  }

  .spShiftStat .label {
    font-weight: 600;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .spShiftStat .value {
    font-size: 18px;
    font-weight: 700;
    color: #4f46e5;
    margin-top: 4px;
  }

  /* -------------------------
   Right Table (Artikelbedarf)
   ------------------------- */

  .spRightTable {
    overflow-x: auto;
  }

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

  .spRightTable th {
    background: #e2e8f0;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .spRightTable th:hover {
    background: #cbd5e1;
  }

  .spRightTable td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
  }

  .spRightTable tr:hover {
    background: #f8f9fa;
  }

  /* -------------------------
   Drag & Drop States
   ------------------------- */

  .spDragging {
    opacity: 0.5;
    background: #fef3c7;
  }

  .spDragOver {
    background: #dbeafe !important;
    border: 2px dashed #4f46e5 !important;
  }

  [contenteditable="true"] {
    cursor: text;
    min-height: 20px;
  }

  [contenteditable="true"]:focus {
    outline: 2px solid #4f46e5;
    background: #f0f9ff;
    border-radius: 4px;
    padding: 4px;
  }

  [contenteditable="true"]:empty::before {
    content: "–";
    color: #6b7280;
  }

  /* -------------------------
   Collapsible Sections
   ------------------------- */

  .spCollapsible {
    border: none;
  }

  .spCollapsible summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    color: #4f46e5;
    user-select: none;
    list-style: none;
  }

  .spCollapsible summary::-webkit-details-marker {
    display: none;
  }

  .spCollapsible summary::before {
    content: "▼";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s;
    font-size: 10px;
  }

  .spCollapsible:not([open]) summary::before {
    transform: rotate(-90deg);
  }

  /* -------------------------
   Alert/Message Box
   ------------------------- */

  .spAlert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  .spAlert.info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
  }

  .spAlert.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
  }

  .spAlert.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  .spAlert.warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
  }

  /* -------------------------
   Toolbar
   ------------------------- */

  .spToolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  /* -------------------------
   Main Table (Grid View)
   ------------------------- */

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

  .spMainTable thead th {
    padding: 12px 8px;
    text-align: left;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 600;
  }

  .spMainTable tbody tr:hover {
    background: rgba(79, 70, 229, 0.05);
  }

  .spMainTable tbody td {
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
  }

  /* -------------------------
   Overview Table
   ------------------------- */

  #spOverviewTable table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  #spOverviewTable th {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  #spOverviewTable td {
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
  }

  #spOverviewTable tr:hover {
    background: rgba(79, 70, 229, 0.05);
  }

  /* -------------------------
   Responsive Design
   ------------------------- */

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

    .spRightPane {
      max-height: none;
      margin-top: 20px;
    }

    .spWeekTabs {
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
    }

    .spHeader {
      flex-direction: column;
      align-items: stretch;
    }

    .spHeaderRight {
      justify-content: flex-start;
    }

    .spPoolPanel {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
  }

  @media (max-width: 768px) {
    .spWeekTab {
      min-width: 100px;
      padding: 10px 16px;
    }

    .spUnifiedTable,
    .spMainTable,
    #spOverviewTable table {
      font-size: 11px;
    }

    .spUnifiedTable thead th,
    .spMainTable thead th,
    #spOverviewTable th {
      padding: 8px 6px;
    }

    .spCellShift select,
    .spArtikelSel {
      font-size: 11px;
      padding: 4px;
    }

    .spToolbar {
      gap: 6px;
    }

    .btn {
      padding: 8px 12px;
      font-size: 13px;
    }
  }

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

    .spWeekTab {
      min-width: 90px;
    }

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

  /* -------------------------
   Loading States
   ------------------------- */

  .spLoading {
    text-align: center;
    padding: 40px;
    color: #64748b;
  }

  .spLoading::before {
    content: "⏳";
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  /* -------------------------
   Utility Classes
   ------------------------- */

  .spHidden {
    display: none !important;
  }

  .spDisabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  .spTextCenter {
    text-align: center;
  }

  .spTextRight {
    text-align: right;
  }

  .spFontBold {
    font-weight: 700;
  }

  .spFontSemibold {
    font-weight: 600;
  }

  .spColorPrimary {
    color: #4f46e5;
  }

  .spColorSuccess {
    color: #10b981;
  }

  .spColorDanger {
    color: #ef4444;
  }

  .spColorWarning {
    color: #92400e;
  }

  .spBgLight {
    background: #f8f9fa;
  }

  .spBgWhite {
    background: white;
  }

  .spBorderRadius {
    border-radius: 8px;
  }

  .spShadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  .spShadowLg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

  /* -------------------------
   Print Styles
   ------------------------- */

  @media print {

    .spHeader,
    .spToolbar,
    .spWeekTabs,
    .spRightPane {
      display: none !important;
    }

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

    .spUnifiedTable,
    .spMainTable {
      font-size: 10px;
    }

    .spGroupHeaderRow {
      background: #fef3c7 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }

  /* END SCHICHTPLANUNG STYLES */

  /* Schichtplan-Tabelle: Zeilen-Farben für Gruppen */
  .spRow-red {
    background-color: #fecaca !important;
    /* Light red */
  }

  .spRow-red:hover {
    background-color: #fca5a5 !important;
  }

  .spRow-blue {
    background-color: #bfdbfe !important;
    /* Light blue */
  }

  .spRow-blue:hover {
    background-color: #93c5fd !important;
  }

  /* Alternativ: Stärkere Farben wie im Screenshot */
  .spRow-red {
    background-color: #ef4444 !important;
    /* Red */
    color: white !important;
  }

  .spRow-red td {
    color: white !important;
  }

  .spRow-blue {
    background-color: #3b82f6 !important;
    /* Blue */
    color: white !important;
  }

  .spRow-blue td {
    color: white !important;
  }

  /* Grid: Zellen mit weißem Hintergrund */
  .spRow-red td,
  .spRow-blue td {
    background-color: white !important;
    color: #1e293b !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* Aber erste Spalte (Insel-Name) behält die Farbe */
  .spRow-red td:first-child {
    background-color: #ef4444 !important;
    color: white !important;
    font-weight: 600;
  }

  .spRow-blue td:first-child {
    background-color: #3b82f6 !important;
    color: white !important;
    font-weight: 600;
  }

  /* Sidebar breiter machen - immer sichtbar */
  #schichtplanung .spMainGrid {
    grid-template-columns: 1fr 450px !important;
  }

  @media (min-width: 1400px) {
    #schichtplanung .spMainGrid {
      grid-template-columns: 1fr 500px !important;
    }
  }

  /* Sidebar besser formatieren */
  #schichtplanung .spRightPane {
    min-width: 450px;
    padding: 20px;
  }

  /* Pool-Items als Pills/Badges */
  .spPoolItem {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: #10b981;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
  }

  .spPoolItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  .spPoolItem.absent-sick {
    background: #ef4444;
  }

  .spPoolItem.absent-vacation {
    background: #f59e0b;
  }

  .spPoolItem.selected {
    background: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  }

  /* Schicht-Badges */
  .spShiftBadge {
    display: inline-block;
    padding: 4px 10px;
    margin: 3px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
  }

  /* Warning Badges */
  .spWarningBadge {
    background: #fef3c7;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
  }

  .spWarningBadge strong {
    color: #92400e;
    font-size: 14px;
  }

  /* ======================================================================
   MITARBEITER VERWALTUNG (Google-Style)
   ====================================================================== */

  /* Info icon with enhanced tooltip */
  .mi-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    transition: all 0.2s;
  }

  .mi-info-icon:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.1);
  }

  /* Employee row hover effects */
  .mi-employee-row {
    position: relative;
    cursor: pointer;
  }

  .mi-employee-row:hover {
    background: #f8fafc !important;
  }

  /* Enhanced tooltips for title attributes */
  [title] {
    position: relative;
    cursor: help;
  }

  /* Search input styling for Mitarbeiter view */
  #miSearchInput {
    transition: all 0.2s;
  }

  #miSearchInput:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }

  /* ============================================================================
 * MOBILE IMPROVEMENTS
 * All rules here are scoped to max-width: 768px (or 480px) so desktop is
 * completely unaffected.
 * ============================================================================ */

  @media (max-width: 768px) {

    /* Hide header subtitle to save vertical space */
    .header p {
      display: none;
    }

    /* KPI / stat cards: allow 2-column layout on phones */
    .stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    /* Schichtplanung: sidebar is 450px hardcoded — stack vertically on mobile */
    #schichtplanung .spMainGrid {
      grid-template-columns: 1fr !important;
    }

    #schichtplanung .spRightPane {
      min-width: 0;
    }

    /* Urlaubsplanung add-absence form: single column on mobile */
    .upFormGrid {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 480px) {

    /* Tighter body & card padding on very small screens */
    body {
      padding: 6px;
    }

    .card {
      padding: 14px;
    }

    /* Floor table font sizes at 12px (overrides earlier 10px rules) */
    #dashboardAuftragslage table,
    .spUnifiedTable {
      font-size: 12px !important;
    }

    #dashboardAuftragslage th,
    #dashboardAuftragslage td {
      padding: 8px 5px !important;
    }
  }

  /* OEE quick-preset button active state */
  .oee-preset-btn.active {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
  }

/* ===========================================================================
   SCHICHTBEDARF 8-WOCHEN DASHBOARD (sb8-*)
   =========================================================================== */

/* Header */
.sb8-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.sb8-header-title { flex: 1 1 auto; }
.sb8-header-title h2 { margin: 0; }
.sb8-header-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.sb8-range-label {
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
  padding: 0 4px;
}

/* KPI row */
.sb8-kpi-row { margin-bottom: 24px; }
.stat-hint { font-size: 11px; margin-top: 3px; }

/* Grid wrapper */
.sb8-grid-wrapper {
  overflow-x: auto;
  margin-bottom: 28px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

/* Grid table */
.sb8-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 700px;
}
.sb8-grid-table th,
.sb8-grid-table td {
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}
/* Override globales thead { color: white } für unsere Tabelle */
.sb8-grid-table thead,
.sb8-grid-table thead th {
  background: #f8fafc;
  font-weight: 600;
  color: #1e293b !important;
  border-bottom: 2px solid #e2e8f0;
}
.sb8-row-head {
  text-align: left !important;
  font-weight: 600;
  color: #1e293b !important;
  background: #f8fafc;
  min-width: 140px;
  border-right: 2px solid #e2e8f0;
}
/* Schicht-farbige Labels in der linken Spalte: inline style hat Vorrang */
.sb8-grid-table tbody tr:hover td { background: #f8fafc; }
.sb8-thead-kw-cell {
  min-width: 100px;
  color: #1e293b !important;
}
.sb8-thead-kw-cell strong { color: #1e293b; }
.sb8-thead-kw-cell small  { color: #64748b; }
.sb8-row-holidays td,
.sb8-row-workdays td { font-size: 12px; color: #6b7280; }
.sb8-cell-dim { color: #d1d5db !important; }

/* Traffic-light status row */
.sb8-row-status td { padding: 10px 8px; }
.sb8-status-cell {
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb8-status-cell:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.sb8-status-green  { background: #dcfce7; color: #166534; }
.sb8-status-yellow { background: #fef9c3; color: #854d0e; }
.sb8-status-red    { background: #fee2e2; color: #991b1b; }

/* Glow dot */
.sb8-traffic-light {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.sb8-status-green  .sb8-traffic-light { background: #10b981; box-shadow: 0 0 5px #10b981; }
.sb8-status-yellow .sb8-traffic-light { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; }
.sb8-status-red    .sb8-traffic-light { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

.sb8-util-pct { font-size: 12px; font-weight: 700; vertical-align: middle; }

/* Holiday badge */
.sb8-holiday-tag {
  display: inline-block;
  font-size: 10px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 1px 5px;
  margin: 1px 2px;
  white-space: nowrap;
}

/* Utilization progress bar */
.sb8-util-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.sb8-util-fill {
  height: 8px;
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.3s;
}
.sb8-util-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Chart pair */
.sb8-chart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.sb8-chart-card h3 { margin-top: 0; margin-bottom: 12px; font-size: 15px; }

/* Detail panel KPI */
.sb8-detail-kpi { margin-bottom: 20px; }

/* Responsive */
@media (max-width: 900px) {
  .sb8-chart-pair { grid-template-columns: 1fr; }
  .sb8-header { flex-direction: column; align-items: flex-start; }
}