/* ============================================================================
   OPEN SANS – LOCALES LOADING (WOFF2, FONT-DISPLAY: OPTIONAL)
   ========================================================================== */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src:
    local('Open Sans Light'),
    local('OpenSans-Light'),
    local('Open Sans 300'),
    url('../fonts/open-sans-v44-latin-300.woff2') format('woff2');
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2212,
    U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    local('Open Sans'),
    local('Open Sans Regular'),
    local('OpenSans-Regular'),
    url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src:
    local('Open Sans Medium'),
    local('OpenSans-Medium'),
    local('Open Sans 500'),
    url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src:
    local('Open Sans Bold'),
    local('OpenSans-Bold'),
    local('Open Sans 700'),
    url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* ============================================================================
   ROOT VARIABLES / THEME BASIS
   ========================================================================== */

:root {
  color-scheme: light dark;

  --control-h: calc(2.5rem + 2px);
  --sks-ci-red: #e40613;
  --sks-ci-red-rgb: 228, 6, 19;
  --sks-ci-black: #000000;
  --sks-accent: var(--sks-ci-red);
  --sks-accent-soft: rgba(var(--sks-ci-red-rgb), .14);
  --sks-accent-border: rgba(var(--sks-ci-red-rgb), .34);
  --sks-radius: .5rem;
  --sks-radius-sm: .375rem;
  --sks-focus-ring: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .18);
  --sks-motion: 160ms ease;
  --sks-layout-max-width: 1440px;

  --pin-r: 4;
  --pin-font: 4.5px;

  --mf-switch-w: 1.5rem;
  --mf-switch-h: .9rem;
  --mf-gap: .4rem;
  --mf-gap-y: .35rem;
  --mf-gap-x: .9rem;
}

/* ============================================================================
   THEME: LIGHT MODE
   ========================================================================== */

html:not([data-bs-theme="dark"]) {
  --bs-body-bg: #edf3f4;
  --bs-body-color: #111827;
  --bs-secondary-color: #64748b;
  --bs-tertiary-bg: #f6f9f8;
  --bs-border-color: #d5dee4;
  --bs-danger: var(--sks-accent);
  --bs-danger-rgb: var(--sks-ci-red-rgb);

  --sks-page-bg:
    linear-gradient(180deg, #f8faf9 0%, #edf3f4 48%, #e7eef1 100%);
  --sks-page-bg-size: auto;
  --sks-surface: #ffffff;
  --sks-surface-2: #f6f9f8;
  --sks-surface-3: #ebf1f2;
  --sks-border: #d8e1e5;
  --sks-border-strong: #bdcbd3;
  --sks-text-muted: #64748b;
  --sks-danger-text: #c1121f;
  --sks-footer-muted: #475569;
  --sks-hover: rgba(15, 23, 42, .045);
  --sks-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --sks-shadow-md: 0 14px 34px rgba(30, 41, 59, .11);

  --card-bg-elevated: var(--sks-surface);
  --card-border-elevated: rgba(30, 41, 59, .07);
  --card-shadow-elevated: var(--sks-shadow-sm);
}

/* ============================================================================
   THEME: DARK MODE
   ========================================================================== */

html[data-bs-theme="dark"] {
  --bs-body-bg: #0a0d13;
  --bs-body-color: #e7eaf0;
  --bs-secondary-color: #9aa4b2;
  --bs-tertiary-bg: #151922;
  --bs-border-color: #2a303b;
  --bs-danger: var(--sks-accent);
  --bs-danger-rgb: var(--sks-ci-red-rgb);

  --sks-accent: var(--sks-ci-red);
  --sks-accent-soft: rgba(var(--sks-ci-red-rgb), .18);
  --sks-accent-border: rgba(var(--sks-ci-red-rgb), .42);
  --sks-focus-ring: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .22);
  --sks-page-bg:
    linear-gradient(180deg, #151922 0%, #0d1118 48%, #090b10 100%);
  --sks-page-bg-size: auto;
  --sks-surface: #151922;
  --sks-surface-2: #11151d;
  --sks-surface-3: #1d2330;
  --sks-border: #2a303b;
  --sks-border-strong: #3a4352;
  --sks-text-muted: #9aa4b2;
  --sks-danger-text: #ff6b6b;
  --sks-footer-muted: #b6c0ce;
  --sks-hover: rgba(255, 255, 255, .055);
  --sks-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --sks-shadow-md: 0 16px 42px rgba(0, 0, 0, .42);

  --card-bg-elevated: var(--sks-surface);
  --card-border-elevated: rgba(255, 255, 255, .08);
  --card-shadow-elevated: var(--sks-shadow-sm);
}

/* ============================================================================
   GLOBAL TYPOGRAPHY / BODY
   ========================================================================== */

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: .95rem;
  font-weight: 400;
  position: relative;
  min-height: 100vh;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sks-page-bg, var(--bs-body-bg));
  background-size: var(--sks-page-bg-size, auto);
  pointer-events: none;
}

.sks-main {
  width: min(calc(100% - clamp(1rem, 3.5vw, 4rem)), var(--sks-layout-max-width));
  max-width: var(--sks-layout-max-width);
  margin-inline: auto;
}

body > footer {
  width: min(calc(100% - clamp(1rem, 3.5vw, 4rem)), var(--sks-layout-max-width));
  max-width: var(--sks-layout-max-width);
  margin-inline: auto;
}

.text-danger {
  color: var(--sks-danger-text, var(--bs-danger)) !important;
}

body > footer.text-secondary {
  color: var(--sks-footer-muted, var(--sks-text-muted, var(--bs-secondary-color))) !important;
}

.sks-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 4000;
  padding: .65rem .9rem;
  border-radius: var(--sks-radius-sm);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--sks-shadow-md);
  transform: translateY(-150%);
  transition: transform var(--sks-motion);
}

.sks-skip-link:focus,
.sks-skip-link:focus-visible {
  transform: translateY(0);
}

.sks-main:focus {
  outline: none;
}

/* Standard: heller Hintergrund */
#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background-color: rgba(255, 255, 255, .98);
}

/* Dark-Mode: abdunkeln */
[data-theme="dark"] #loadingOverlay,
[data-bs-theme="dark"] #loadingOverlay {
  background-color: rgba(5, 6, 8, .98);
}

input,
select,
button,
textarea {
  font: inherit;
  font-weight: 300;
}

h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0;
}

h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}

h4 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
}

h5 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

h6 {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0;
}

strong {
  font-weight: 500;
}

.title-weight {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.fw-semibold {
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================================
   UTILITIES
   ========================================================================== */

.pointer {
  cursor: pointer;
}

.app-scroll-lock {
  overflow: hidden;
}

.toast-layer {
  z-index: 3100;
}

.logger-error-pre {
  color: red;
}

.drag-handle {
  cursor: grab;
}

.download-proxy-link {
  display: none;
}

.chart-canvas-fluid {
  width: 100%;
}

.css-probe-hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.password-strength-progress {
  height: 2px;
}

.pw-strength-0 { width: 0%; }
.pw-strength-13 { width: 12.5%; }
.pw-strength-25 { width: 25%; }
.pw-strength-38 { width: 37.5%; }
.pw-strength-50 { width: 50%; }
.pw-strength-63 { width: 62.5%; }
.pw-strength-75 { width: 75%; }
.pw-strength-88 { width: 87.5%; }
.pw-strength-100 { width: 100%; }

.employee-year-label {
  min-width: 84px;
}

.color-card-col {
  height: 30vh;
}

.color-card-col > .card {
  height: 100%;
}

.color-card-col .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.drag-handle:active {
  cursor: grabbing;
}

.text-no-underline,
a.text-no-underline,
a.text-no-underline:hover {
  text-decoration: none;
}

.badge {
  font-weight: 500;
  font-size: .8rem;
}

/* ============================================================================
   QUALITY REPORTS
   ========================================================================== */

.quality-card {
  min-height: 22rem;
}

.quality-card-description {
  display: -webkit-box;
  min-height: 3.8rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.quality-card .quality-card-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding-top: 3.15rem;
}

.quality-card-badges {
  position: absolute;
  top: .95rem;
  right: 1rem;
  left: 12.5rem;
  min-height: 1.35rem;
  z-index: 4;
}

.quality-card-number {
  min-height: 1.25em;
  color: var(--sks-body-color, var(--bs-body-color));
}

.quality-card-title {
  min-height: 1.55em;
  color: var(--sks-text-muted);
  font-weight: 600;
}

.quality-card-line {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: baseline;
  gap: .65rem;
  min-height: 1.55em;
  color: var(--sks-text-muted);
  line-height: 1.55;
}

.quality-card-line > i {
  color: var(--sks-text-muted);
  opacity: .9;
}

.quality-card-line-value {
  min-width: 0;
  color: var(--sks-body-color, var(--bs-body-color));
}

.quality-card-pill-xs {
  padding: .18rem .42rem;
  font-size: .68rem;
  line-height: 1.05;
}

@media (max-width: 575.98px) {
  .quality-card-badges {
    top: 2.75rem;
    right: 1rem;
    left: 1rem;
    justify-content: flex-start !important;
  }

  .quality-card .quality-card-main {
    padding-top: 4.65rem;
  }

  .quality-card-line {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }
}

.quality-form-section {
  padding: 1.25rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2);
}

.quality-form-section .form-label {
  color: var(--sks-text-muted);
  font-weight: 700;
}

.quality-attachments {
  margin-top: 1.25rem;
}

.quality-file-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.quality-file-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.quality-file-link {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .625rem .75rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
  color: var(--bs-body-color);
  text-align: left;
  text-decoration: none;
}

.quality-file-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-file-link:hover,
.quality-file-link:focus {
  border-color: var(--sks-primary);
  color: var(--bs-body-color);
}

.quality-file-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
}

.quality-media-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
  color: var(--bs-body-color);
}

.quality-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quality-media-video {
  flex-direction: column;
  gap: .45rem;
  padding: .75rem;
  text-align: center;
}

.quality-media-video span {
  max-width: 100%;
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-lightbox-media {
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--sks-radius-sm);
}

.quality-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quality-detail-hero,
.quality-detail-stat,
.quality-detail-section {
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2);
}

.quality-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}

.quality-detail-kicker,
.quality-detail-stat span,
.quality-detail-label,
.quality-detail-subtitle {
  color: var(--sks-text-muted);
  font-weight: 700;
}

.quality-detail-kicker {
  margin-bottom: .25rem;
}

.quality-detail-number {
  color: var(--bs-body-color);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.quality-detail-stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 5rem;
  padding: 1rem;
}

.quality-detail-stat strong {
  font-size: 1.25rem;
  line-height: 1.15;
}

.quality-detail-section {
  height: 100%;
  padding: 1.25rem;
}

.quality-detail-section h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  color: var(--bs-body-color);
  font-size: 1rem;
}

.quality-detail-section h3 i {
  color: var(--sks-danger, var(--bs-danger));
}

.quality-detail-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .75rem;
  margin-bottom: .9rem;
}

.quality-detail-item > i {
  color: var(--sks-text-muted);
}

.quality-detail-label,
.quality-detail-subtitle {
  margin-bottom: .15rem;
  font-size: .85rem;
}

.quality-detail-value {
  color: var(--bs-body-color);
  font-weight: 600;
}

.quality-detail-text {
  min-height: 2.75rem;
  padding: .85rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
  white-space: pre-wrap;
}

.quality-history {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.quality-history-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
}

.quality-history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--sks-surface-2);
  color: var(--sks-danger, var(--bs-danger));
}

.quality-history-change {
  margin-top: .35rem;
  color: var(--bs-body-color);
  font-weight: 700;
}

.quality-history-change span {
  color: var(--sks-text-muted);
  font-weight: 500;
}

.quality-history-message {
  margin-top: .35rem;
  color: var(--bs-body-color);
  white-space: pre-wrap;
}

.quality-comment-box {
  padding: 1rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
}

/* ============================================================================
   LOGIN SCREEN
   ========================================================================== */

.login-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.login-card {
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--card-border-elevated, var(--sks-border));
}

.card.login-card {
  border: 1px solid var(--card-border-elevated, var(--sks-border));
  box-shadow: 0 14px 34px rgba(30, 41, 59, .08);
}

.card.login-card:hover {
  border-color: var(--card-border-elevated, var(--sks-border));
  box-shadow: 0 14px 34px rgba(30, 41, 59, .08);
}

[data-bs-theme="dark"] .card.login-card {
  border-color: rgba(255, 255, 255, .055);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .card.login-card:hover {
  border-color: rgba(255, 255, 255, .055);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.login-card .login-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.login-turnstile-slot {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login-turnstile-widget {
  width: 100%;
  min-height: 65px;
}

.login-turnstile-widget iframe {
  width: 100% !important;
}

.login-forgot-btn {
  font-size: .8125rem;
  font-weight: 400 !important;
  text-decoration: underline;
}

#loginForm[data-turnstile-enabled="1"] .login-turnstile-gated {
  visibility: hidden;
}

#loginForm[data-turnstile-enabled="1"].is-turnstile-human .login-turnstile-gated {
  visibility: visible;
}

.login-remember-switch {
  display: flex;
  align-items: center;
  margin-top: .35rem;
}

.login-remember-switch-control {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 1.3rem;
  margin: 0;
  border: 1px solid var(--sks-border-strong, var(--bs-border-color));
  border-radius: 999px;
  background-color: var(--bs-body-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02);
  cursor: pointer;
  transition:
    background-color var(--sks-motion),
    border-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.login-remember-switch-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: .18rem;
  width: .82rem;
  height: .82rem;
  border-radius: 50%;
  background: var(--bs-secondary-color);
  transform: translateY(-50%);
  transition:
    background-color var(--sks-motion),
    transform var(--sks-motion);
}

.login-remember-switch-control:checked {
  border-color: var(--bs-success);
  background-color: var(--bs-success);
  box-shadow: var(--sks-focus-ring);
}

.login-remember-switch-control:checked::before {
  background: var(--bs-white);
  transform: translate(1.12rem, -50%);
}

.login-remember-switch-control:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .24);
}

.login-remember-switch-label {
  color: var(--bs-body-color);
  font-weight: 600;
  line-height: 1.25;
  user-select: none;
  cursor: pointer;
}

[data-bs-theme="dark"] .login-remember-switch-control {
  background-color: var(--bs-body-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

[data-bs-theme="dark"] .login-remember-switch-control:checked {
  background-color: var(--bs-success);
}

.production-media-upload-options {
  display: grid;
  gap: .75rem;
}

.production-media-upload-option {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-height: 4.25rem;
  padding: .85rem 1rem;
  text-align: left;
}

.production-media-upload-option > i {
  flex: 0 0 auto;
  width: 2rem;
  color: var(--bs-secondary-color);
  font-size: 1.35rem;
  text-align: center;
}

.production-media-upload-dropzone {
  border: 1px dashed var(--sks-border-strong, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  cursor: pointer;
  transition:
    border-color var(--sks-motion),
    background-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.production-media-upload-dropzone:hover,
.production-media-upload-dropzone:focus-visible {
  border-color: var(--sks-accent-border);
  background: var(--sks-hover);
  box-shadow: var(--sks-focus-ring);
  outline: 0;
}

/* ============================================================================
   LOGO
   ========================================================================== */

.logo-sksroltec-svg {
  display: block;
  margin: 0 auto;
  width: min(100%, 248px);
  height: auto;
  aspect-ratio: 31 / 6;
}

.logo-sksroltec-svg-margin {
  margin: 0;
}

.logo-sksroltec-svg text {
  letter-spacing: .09em;
}

.logo-sksroltec-svg .logo-main {
  fill: #000000;
}

.logo-sksroltec-svg .logo-sub {
  fill: var(--bs-danger, #e40613);
}

html[data-bs-theme="dark"] .logo-sksroltec-svg .logo-main {
  fill: #ffffff;
}

.logo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* linksbündig */
}

.logo-stack .logo-sksroltec-svg {
  margin: 0;    /* kein zentriertes auto mehr */
}

.logo-stack .page-subtitle {
  margin-top: .15rem;
}

/* ============================================================================
   PRINT OVERRIDES
   ========================================================================== */
@media print {
  /* Hintergrund & Text generell */
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Logo: auch im Dark-Mode in schwarz drucken */
  .logo-sksroltec-svg .logo-main {
    fill: #000000 !important;
  }

  /* Optional: Rot leicht dunkler/print-freundlich machen */
  .logo-sksroltec-svg .logo-sub {
    fill: #c82333 !important; /* etwas dunkleres Rot */
  }
}

/* ============================================================================
   THEME SWITCH (LIGHT / DARK)
   ========================================================================== */

.theme-switch {
  position: relative;
  width: 46px;
  height: 24px;
  display: inline-block;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--sks-surface-3, var(--bs-border-color));
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: 34px;
  transition: background-color var(--sks-motion), border-color var(--sks-motion), box-shadow var(--sks-motion);
}

.theme-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--sks-surface, var(--bs-body-bg));
  border-radius: 50%;
  transition: transform var(--sks-motion), background-color var(--sks-motion), box-shadow var(--sks-motion);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.theme-switch input:checked + .slider {
  background: var(--sks-accent);
  border-color: var(--sks-accent-border);
  box-shadow: var(--sks-focus-ring);
}

.theme-switch input:focus-visible + .slider {
  box-shadow: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .32);
}

.theme-switch input:checked + .slider::before {
  transform: translateX(22px);
}

/* ============================================================================
   FORMS / LABELS / BUTTONS
   ========================================================================== */

label {
  font-size: .9em;
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.form-label {
  padding-block: 0px 4px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0;
}

.form-label .text-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: .85rem;
  color: var(--sks-danger-text, var(--sks-accent)) !important;
  font-weight: 700;
}

.btn {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--sks-radius-sm);
  padding-inline: calc(var(--bs-btn-padding-x) + 2px);
  transition:
    transform var(--sks-motion),
    box-shadow var(--sks-motion),
    background-color var(--sks-motion),
    border-color var(--sks-motion),
    color var(--sks-motion);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sks-shadow-sm);
}

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

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--sks-accent-border);
  box-shadow: var(--sks-focus-ring);
}

.btn-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.btn-outline-danger.active {
  background-color: var(--sks-accent);
  border-color: var(--sks-accent);
}

.btn-outline-danger {
  color: var(--sks-accent);
  background-color: transparent;
  border-color: var(--sks-accent);
}

[data-bs-theme="dark"] .btn-outline-danger {
  background-color: transparent;
  border-color: rgba(var(--sks-ci-red-rgb), .72);
  box-shadow: inset 0 0 0 1px rgba(var(--sks-ci-red-rgb), .16);
}

.btn-outline-secondary {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  border-color: var(--sks-border-strong, var(--bs-border-color));
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--sks-surface, var(--bs-body-bg));
  border-color: var(--sks-border, var(--bs-border-color));
  color: var(--bs-body-color);
  border-radius: var(--sks-radius-sm);
  transition:
    border-color var(--sks-motion),
    box-shadow var(--sks-motion),
    background-color var(--sks-motion);
}

.form-control,
.form-select {
  min-height: var(--control-h);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color));
}

.form-control::placeholder {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  opacity: .72;
}

.input-group-text {
  background-color: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  min-width: 2.6rem;
  justify-content: center;
}

.input-group:focus-within .input-group-text {
  border-color: var(--sks-accent-border);
  color: var(--sks-accent);
  background-color: var(--sks-accent-soft);
}

.form-check.form-switch {
  min-height: var(--control-h);
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  padding: .55rem .8rem .55rem 3rem;
  transition:
    border-color var(--sks-motion),
    background-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.form-check.form-switch:hover,
.form-check.form-switch:focus-within {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  box-shadow: var(--sks-shadow-sm);
}

.form-switch .form-check-input {
  width: 2.2em;
  height: 1.15em;
  margin-left: -2.35rem;
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.form-check-label {
  color: var(--bs-body-color);
  font-weight: 600;
}

.dropdown-menu,
.popover,
.toast {
  background-color: var(--sks-surface, var(--bs-body-bg));
  border-color: var(--sks-border, var(--bs-border-color));
  box-shadow: var(--sks-shadow-md);
  border-radius: var(--sks-radius);
}

.dropdown-item {
  transition: background-color var(--sks-motion), color var(--sks-motion);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sks-accent-soft);
  color: var(--bs-body-color);
}

.page-link {
  border-color: var(--sks-border, var(--bs-border-color));
  color: var(--sks-accent);
  transition: background-color var(--sks-motion), border-color var(--sks-motion), color var(--sks-motion);
}

.page-link:hover,
.page-link:focus {
  background-color: var(--sks-accent-soft);
  border-color: var(--sks-accent-border);
  color: var(--sks-accent);
  box-shadow: var(--sks-focus-ring);
}

.alert {
  border-radius: var(--sks-radius);
  border-width: 1px;
}

.invalid-feedback {
  font-size: .82rem;
  border-left: 3px solid var(--sks-accent);
  background: var(--sks-accent-soft);
  border-radius: var(--sks-radius-sm);
  margin-top: .35rem;
  padding: .35rem .55rem;
}

.btn-group .btn + .btn {
  margin-left: -1px;
}

.btn-group .btn:last-child {
  border-left: none;
  border-right-width: 1px;
}

/* ============================================================================
   CARD DESIGN
   ========================================================================== */

.card {
  background-color: var(--card-bg-elevated, var(--bs-card-bg, var(--bs-body-bg)));
  border: 1px solid var(--card-border-elevated, var(--bs-border-color));
  box-shadow: var(--card-shadow-elevated, none);
  border-radius: var(--sks-radius);
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion);
}

.card:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  box-shadow: var(--sks-shadow-md);
}

.card.shadow-sm:hover {
  box-shadow: var(--sks-shadow-md) !important;
}

/* ============================================================================
   MODALS
   ========================================================================== */

.modal .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--sks-surface, var(--bs-body-bg));
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--sks-border, var(--bs-border-color));
}

.modal .modal-title {
  letter-spacing: 0;
}

.modal-content {
  position: relative;
  background-color: var(--sks-surface, var(--bs-body-bg));
  color: var(--bs-body-color);
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  box-shadow: var(--sks-shadow-md);
  overflow: hidden;
}

.modal-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--sks-accent), rgba(var(--bs-primary-rgb), .72));
  pointer-events: none;
  z-index: 3;
}

.modal-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)),
    var(--sks-surface, var(--bs-body-bg));
  scrollbar-gutter: stable;
}

[data-bs-theme="dark"] .modal-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
    var(--sks-surface, var(--bs-body-bg));
}

.modal-footer {
  background-color: var(--sks-surface, var(--bs-body-bg));
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
}

.modal {
  z-index: 3000;
}

.modal-backdrop {
  z-index: 2990;
}

/* Light Mode – Modals in weiss */

html:not([data-bs-theme="dark"]) .modal-content,
html:not([data-bs-theme="dark"]) .modal-header,
html:not([data-bs-theme="dark"]) .modal-footer,
html:not([data-bs-theme="dark"]) .modal-body {
  background-color: #ffffff !important;
  color: var(--bs-body-color);
}

/* Modal Backdrop */

.modal-backdrop {
  --bs-backdrop-bg: #000000;
  --bs-backdrop-opacity: .85;
}

/* Busy Overlays */

.modal-spinner-overlay,
#loadingOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}

.modal-spinner-overlay {
  background-color: rgba(255, 255, 255, .72);
}

#loadingOverlay {
  position: fixed;
  z-index: 1085;
  background-color: rgba(255, 255, 255, .98);
}

[data-bs-theme="dark"] .modal-spinner-overlay {
  background-color: rgba(33, 37, 41, .72);
}

[data-bs-theme="dark"] #loadingOverlay {
  background-color: rgba(5, 6, 8, .98);
}

.modal-spinner-overlay .spinner-border,
#loadingOverlay .spinner-border {
  display: none;
}

.modal-spinner-overlay::before,
.modal-spinner-overlay::after,
#loadingOverlay::before,
#loadingOverlay::after {
  content: "";
  position: absolute;
  top: 0;
  height: 3px;
  pointer-events: none;
}

.modal-spinner-overlay::before,
#loadingOverlay::before {
  right: 0;
  left: 0;
  background: rgba(var(--bs-danger-rgb), .18);
}

.modal-spinner-overlay::after,
#loadingOverlay::after {
  left: -42%;
  width: 42%;
  background: linear-gradient(
    90deg,
    rgba(var(--bs-danger-rgb), 0),
    rgba(var(--bs-danger-rgb), .92),
    rgba(var(--bs-primary-rgb), .85)
  );
  animation: sks-busy-progress 1.15s ease-in-out infinite;
}

.modal-spinner-overlay:not(.is-busy)::after,
#loadingOverlay:not(.is-busy)::after {
  animation-play-state: paused;
}

@keyframes sks-busy-progress {
  0% {
    transform: translateX(0);
  }

  52% {
    transform: translateX(180%);
  }

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

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .modal-spinner-overlay::after,
  #loadingOverlay::after {
    left: 0;
    width: 100%;
    opacity: .65;
    animation: none !important;
  }
}

/* ============================================================================
   TOOLTIP THEME OVERRIDES
   ========================================================================== */

/* ============================================================================
   LIGHT MODE — Tooltip (hellgrau, weiße Schrift größer & fett)
   ========================================================================== */

html:not([data-bs-theme="dark"]) .tooltip .tooltip-inner {
  background-color: rgba(255, 255, 255, .96);
  color: #111827;
  font-weight: 500;
  font-size: .9rem;
  padding: .45rem .65rem;
  border-radius: var(--sks-radius);
  border: 1px solid var(--sks-border);
  box-shadow: var(--sks-shadow-md);
}

/* Pfeile oben */
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-top .tooltip-arrow::before,
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: rgba(255, 255, 255, .96);
}

/* Pfeile unten */
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: rgba(255, 255, 255, .96);
}

/* Pfeile links */
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-start .tooltip-arrow::before,
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: rgba(255, 255, 255, .96);
}

/* Pfeile rechts */
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-end .tooltip-arrow::before,
html:not([data-bs-theme="dark"])
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: rgba(255, 255, 255, .96);
}

/* ============================================================================
   DARK MODE — Tooltip (schwarz, transparent, weiße fette Schrift)
   ========================================================================== */

html[data-bs-theme="dark"] .tooltip .tooltip-inner {
  background-color: rgba(21, 25, 34, .96);
  color: #ffffff;
  font-weight: 500;
  font-size: .9rem;
  padding: .45rem .65rem;
  border-radius: var(--sks-radius);
  border: 1px solid var(--sks-border);
  box-shadow: var(--sks-shadow-md);
}

/* Pfeile – oben */
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-top .tooltip-arrow::before,
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: rgba(21, 25, 34, .96);
}

/* Pfeile – unten */
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: rgba(21, 25, 34, .96);
}

/* Pfeile – links */
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-start .tooltip-arrow::before,
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: rgba(21, 25, 34, .96);
}

/* Pfeile – rechts */
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-end .tooltip-arrow::before,
html[data-bs-theme="dark"]
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: rgba(21, 25, 34, .96);
}

/* ============================================================================
   WHEELCHAIR COLOR UTILITIES
   ========================================================================== */

.wc_txt_black { color: #000 !important; }
.wc_txt_white { color: #fff !important; }

.wc_bg_white           { background: #f4f4f4 !important; }
.wc_bg_yellow          { background: #f7ba0b !important; }
.wc_bg_curry           { background: #a38c15 !important; }
.wc_bg_orange          { background: #ed760e !important; }
.wc_bg_red             { background: #cc0605 !important; }
.wc_bg_lightpink       { background: #ea899a !important; }
.wc_bg_oldpink         { background: #d36e70 !important; }
.wc_bg_winered         { background: #5e2129 !important; }
.wc_bg_lightlila       { background: #a38995 !important; }
.wc_bg_darklila        { background: #83639d !important; }
.wc_bg_purpleviolet    { background: #4a203b !important; }
.wc_bg_bordeauxviolet  { background: #691639 !important; }
.wc_bg_lightblue       { background: #3b83bd !important; }
.wc_bg_waterblue       { background: #007577 !important; }
.wc_bg_oceanblue       { background: #003b49 !important; }
.wc_bg_darkblue        { background: #1d1f2a !important; }
.wc_bg_lightgreen      { background: #bdecb6 !important; }
.wc_bg_darkgreen       { background: #114232 !important; }
.wc_bg_greyolive       { background: #3c392e !important; }
.wc_bg_olivegreen      { background: #50533c !important; }
.wc_bg_lightbrown      { background: #af8a54 !important; }
.wc_bg_darkbrown       { background: #45322e !important; }
.wc_bg_lightgrey       { background: #cbd0cc !important; }
.wc_bg_middlegrey      { background: #969992 !important; }
.wc_bg_darkgrey        { background: #474a50 !important; }
.wc_bg_black           { background: #18171c !important; }

/* ============================================================================
   APP SHELL / TOOLBARS / FILTER SURFACES
   ========================================================================== */

.sks-main {
  width: min(calc(100% - clamp(1rem, 3.5vw, 4rem)), var(--sks-layout-max-width));
  max-width: var(--sks-layout-max-width);
}

.sks-app-header,
.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: .5rem 0 0;
  backdrop-filter: none;
}

[data-bs-theme="dark"] .sks-app-header,
[data-bs-theme="dark"] .sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1,
[data-bs-theme="dark"] .sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 {
  background: transparent;
}

.sks-app-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 1.25rem !important;
  padding: .65rem 0;
  backdrop-filter: none;
}

[data-bs-theme="dark"] .sks-app-header {
  background: transparent;
}

.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 {
  margin-bottom: 1.5rem !important;
}

.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1 > .d-flex,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 > .d-flex {
  min-height: var(--control-h);
}

.sks-app-header .btn-group,
.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1 .btn-group,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 .btn-group,
.filter-panel-card .btn-group,
[id$="FiltersCard"] .btn-group,
.stock-panel-card .btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sks-app-header .btn-group > .btn,
.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1 .btn-group > .btn,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 .btn-group > .btn,
.filter-panel-card .btn-group > .btn,
[id$="FiltersCard"] .btn-group > .btn,
.stock-panel-card .btn-group > .btn {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-left: 0 !important;
  border-radius: var(--sks-radius-sm) !important;
}

.sks-app-header .btn-group > .btn + .btn,
.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1 .btn-group > .btn + .btn,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 .btn-group > .btn + .btn,
.filter-panel-card .btn-group > .btn + .btn,
[id$="FiltersCard"] .btn-group > .btn + .btn,
.stock-panel-card .btn-group > .btn + .btn {
  margin-left: 0 !important;
}

.sks-app-header .btn-group > .btn:last-child,
.sks-main > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3.mb-1 .btn-group > .btn:last-child,
.sks-main > .d-flex.align-items-center.flex-wrap.justify-content-between.gap-3.mb-1 .btn-group > .btn:last-child,
.filter-panel-card .btn-group > .btn:last-child,
[id$="FiltersCard"] .btn-group > .btn:last-child,
.stock-panel-card .btn-group > .btn:last-child {
  border-left-width: 1px !important;
}

.toolbar-button-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.toolbar-button-row > .btn {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.toolbar-text-label {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bs-body-color);
  white-space: nowrap;
}

.page-subtitle {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .9rem;
  font-weight: 600;
}

.filter-panel-card,
[id$="FiltersCard"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .24)),
    var(--sks-surface, var(--bs-body-bg));
  border-color: rgba(15, 23, 42, .1);
  box-shadow: none;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

[data-bs-theme="dark"] .filter-panel-card,
[data-bs-theme="dark"] [id$="FiltersCard"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01)),
    var(--sks-surface, var(--bs-body-bg));
  border-color: rgba(255, 255, 255, .09);
}

.filter-panel-card .card-body,
[id$="FiltersCard"] .card-body {
  padding: .95rem 1rem;
}

.filter-panel-card .form-label,
[id$="FiltersCard"] .form-label {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-weight: 700;
}

.btn-check:checked + .btn {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), var(--sks-shadow-sm);
}

.card-title,
.title-weight {
  color: var(--bs-emphasis-color);
}

.card-text,
.card .text-muted {
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.card[data-id],
.media-card {
  overflow: hidden;
}

.card .btn-group,
.card .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.card .btn-group .btn,
.card .card-actions .btn {
  display: inline-flex;
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--sks-radius-sm) !important;
  box-shadow: none;
  flex: 0 0 auto;
}

.card .btn-group .btn i,
.card .card-actions .btn i {
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1;
}

.card .btn-group .btn + .btn,
.card .card-actions .btn + .btn {
  margin-left: 0;
}

.card .btn-group .btn:last-child,
.card .card-actions .btn:last-child {
  border-left-width: 1px;
}

.card .btn-group .btn-outline-danger,
.card .btn-group .btn-outline-secondary,
.card .btn-group .btn-outline-success,
.card .card-actions .btn-outline-danger,
.card .card-actions .btn-outline-secondary,
.card .card-actions .btn-outline-success,
.card .btn-group .btn-danger,
.card .btn-group .btn-success,
.card .card-actions .btn-danger,
.card .card-actions .btn-success {
  background: transparent;
  border-color: var(--sks-border, transparent);
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.card .btn-group .btn-warning {
  color: #212529;
  background: var(--bs-warning);
  border-color: var(--bs-warning);
}

.production-card .btn-group .btn-outline-success[data-action="export-pulverei-pdf"] {
  color: var(--bs-success);
  border-color: var(--bs-success);
  background: rgba(var(--bs-success-rgb), .1);
}

.production-card .btn-group .btn-outline-success[data-action="export-pulverei-pdf"]:hover,
.production-card .btn-group .btn-outline-success[data-action="export-pulverei-pdf"]:focus-visible {
  color: var(--bs-white);
  border-color: var(--bs-success);
  background: var(--bs-success);
}

.card .btn-group .btn-outline-danger:hover,
.card .btn-group .btn-outline-danger:focus-visible,
.card .btn-group .btn-outline-secondary:hover,
.card .btn-group .btn-outline-secondary:focus-visible,
.card .btn-group .btn-outline-success:hover,
.card .btn-group .btn-outline-success:focus-visible,
.card .card-actions .btn-outline-danger:hover,
.card .card-actions .btn-outline-danger:focus-visible,
.card .card-actions .btn-outline-secondary:hover,
.card .card-actions .btn-outline-secondary:focus-visible,
.card .card-actions .btn-outline-success:hover,
.card .card-actions .btn-outline-success:focus-visible,
.card .btn-group .btn-danger:hover,
.card .btn-group .btn-danger:focus-visible,
.card .btn-group .btn-success:hover,
.card .btn-group .btn-success:focus-visible,
.card .card-actions .btn-danger:hover,
.card .card-actions .btn-danger:focus-visible,
.card .card-actions .btn-success:hover,
.card .card-actions .btn-success:focus-visible {
  color: var(--bs-body-color);
  background: var(--sks-hover);
  border-color: var(--sks-border-strong, var(--sks-border));
  box-shadow: none;
}

.card .btn-group .btn-warning:hover,
.card .btn-group .btn-warning:focus-visible,
.card .btn-group .btn-warning.active {
  color: #212529;
  background: var(--bs-warning);
  border-color: var(--bs-warning);
}

.card-actions {
  justify-content: flex-end;
  align-items: center;
}

.card-actions .btn {
  margin-left: 0 !important;
}

.entity-card .card-body {
  min-height: 0;
}

.entity-card-main {
  min-height: 0;
  gap: .15rem;
}

.entity-card-head {
  min-width: 0;
}

.entity-card-head .title-weight {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card-meta {
  min-height: 1.45em;
  min-width: 0;
}

.entity-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card-description {
  display: -webkit-box;
  min-height: 3.1em;
  overflow: hidden;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.warehouse-card-info-row {
  margin-bottom: .1rem;
}

.warehouse-card-info-row i {
  color: inherit;
}

.warehouse-card-info-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card-extra {
  min-height: 2.05rem;
  align-content: flex-start;
}

.entity-card-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
}

.entity-card-footer .card-actions {
  justify-content: flex-start;
}

.work-card {
  height: 100%;
  border-color: var(--sks-border, var(--bs-border-color));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .18)),
    var(--sks-surface, var(--bs-body-bg));
}

[data-bs-theme="dark"] .work-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)),
    var(--sks-surface, var(--bs-body-bg));
}

.work-card .card-body {
  min-height: 0;
  gap: .2rem;
}

.work-card .card-body > :not(.mt-auto) {
  min-width: 0;
}

.work-card .fs-3,
.work-card .fs-5 {
  color: var(--bs-emphasis-color);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .card-text {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .card-body > .fw-normal,
.work-card .card-body > .mb-1,
.work-card .card-body > .mb-2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .card-body > .mt-auto {
  flex: 0 0 auto;
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
  margin-top: 1rem !important;
  padding-top: .85rem !important;
  min-width: 0;
}

.work-card .card-body > .mt-auto .fw-normal,
.work-card .card-body > .mt-auto .card-text {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .btn-group {
  max-width: 100%;
}

.work-card .card-body > .mt-auto > .d-flex {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.module-card-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.module-card-line,
.module-card-order {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-card-line {
  min-height: 1.55em;
  line-height: 1.55;
}

.module-card-order {
  min-height: 2.45em;
}

.production-card .production-card-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.production-card .production-card-line,
.production-card .production-card-order {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-card .production-card-line {
  min-height: 1.55em;
  line-height: 1.55;
}

.production-card .production-card-order {
  min-height: 1.25em;
}

.production-card .production-card-note,
.production-card .production-card-note-placeholder {
  min-height: 1.9rem;
  line-height: 1.35;
}

.production-card .production-card-progress {
  min-height: 1.55em;
}

.production-card .production-card-progress-track {
  height: .35rem;
}

.production-progress-p0 { width: 0%; background-color: hsl(0, 72%, 42%); }
.production-progress-p10 { width: 10%; background-color: hsl(12, 72%, 42%); }
.production-progress-p20 { width: 20%; background-color: hsl(24, 72%, 42%); }
.production-progress-p30 { width: 30%; background-color: hsl(36, 72%, 42%); }
.production-progress-p40 { width: 40%; background-color: hsl(48, 72%, 42%); }
.production-progress-p50 { width: 50%; background-color: hsl(60, 72%, 42%); }
.production-progress-p60 { width: 60%; background-color: hsl(72, 72%, 42%); }
.production-progress-p70 { width: 70%; background-color: hsl(84, 72%, 42%); }
.production-progress-p80 { width: 80%; background-color: hsl(96, 72%, 42%); }
.production-progress-p90 { width: 90%; background-color: hsl(108, 72%, 42%); }
.production-progress-p100 { width: 100%; background-color: hsl(120, 72%, 42%); }

.production-card .card-body > .mt-auto {
  width: 100%;
}

.production-status-deceased-filter {
  color: var(--sks-text-muted) !important;
  border-color: var(--sks-border-strong, var(--bs-border-color)) !important;
  border-style: dashed;
  background-color: transparent !important;
}

.btn-check:checked + .production-status-deceased-filter {
  color: var(--sks-body-color, var(--bs-body-color)) !important;
  border-color: var(--sks-text-muted, var(--bs-secondary-color)) !important;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(var(--bs-secondary-rgb), .20) 0,
      rgba(var(--bs-secondary-rgb), .20) 6px,
      rgba(var(--bs-secondary-rgb), .08) 6px,
      rgba(var(--bs-secondary-rgb), .08) 12px
    ) !important;
}

.work-card[data-status="Closed"],
.work-card[data-status="Pickup"] {
  opacity: .9;
}

.work-card[data-status="Planning"]::before {
  background: var(--bs-warning);
  opacity: .65;
}

.production-card::before {
  background: var(--bs-danger);
}

.trading-card::before {
  background: var(--bs-info);
}

.repairs-card::before {
  background: var(--bs-success);
}

.signature-pad {
  display: block;
  width: 100%;
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  touch-action: none;
}

.repair-customer-suggest {
  max-height: 13rem;
  overflow-y: auto;
}

.production-color-stripe {
  display: inline-block;
  width: 1.5rem;
  height: 1.6em;
}

/* ============================================================================
   WORKLOAD TABLE
   ========================================================================== */

.workload-table {
  border-collapse: collapse;
  border: 0 !important;
  box-shadow: none;
}

.workload-table tbody th,
.workload-table tbody td {
  border: 1px solid var(--bs-border-color);
  background: inherit;
  color: inherit;
  font-weight: normal;
  padding: .55rem .9rem;
}

.workload-table thead th,
.workload-table thead td {
  background: var(--bs-table-bg);
  color: var(--bs-body-color);
  border: 0 !important;
  padding: .55rem .9rem;
  font-weight: normal;
}

.workload-table .table-total-row th,
.workload-table .table-total-row td {
  background: var(--bs-table-bg) !important;
  color: var(--bs-body-color);
  font-weight: 500;
  border: 0 !important;
  padding: .65rem .9rem;
}

.workload-table.table-bordered {
  border: 0 !important;
}

.workload-table.table-bordered > :not(caption) > * {
  border-width: 0 !important;
}

.workload-chart-canvas-frame {
  position: relative;
  width: 100%;
  height: 500px;
  min-height: 0;
  flex: 0 0 auto;
}

.workload-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.workload-progress-wrap {
  min-width: 190px;
}

.workload-progress-track {
  height: .35rem;
}

.workload-progress-input-group {
  width: 8rem;
}

.workload-progress-p0 { width: 0%; background-color: hsl(0, 72%, 42%); }
.workload-progress-p10 { width: 10%; background-color: hsl(12, 72%, 42%); }
.workload-progress-p20 { width: 20%; background-color: hsl(24, 72%, 42%); }
.workload-progress-p30 { width: 30%; background-color: hsl(36, 72%, 42%); }
.workload-progress-p40 { width: 40%; background-color: hsl(48, 72%, 42%); }
.workload-progress-p50 { width: 50%; background-color: hsl(60, 72%, 42%); }
.workload-progress-p60 { width: 60%; background-color: hsl(72, 72%, 42%); }
.workload-progress-p70 { width: 70%; background-color: hsl(84, 72%, 42%); }
.workload-progress-p80 { width: 80%; background-color: hsl(96, 72%, 42%); }
.workload-progress-p90 { width: 90%; background-color: hsl(108, 72%, 42%); }
.workload-progress-p100 { width: 100%; background-color: hsl(120, 72%, 42%); }

/* Skills Header Vertical */

.skills-header-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 4px 0;
  display: inline-block;
}

.skills-empty-cell {
  min-height: 120px;
}

.skills-empty-icon {
  font-size: 4rem;
  line-height: 1;
}

.skills-kpi-values {
  line-height: 1.1;
  gap: .25rem;
}

.stats-period-label {
  display: inline-flex;
  min-height: var(--control-h);
  pointer-events: none;
  min-width: 4.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: var(--bs-body-color);
}

.stats-chart-canvas-frame {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
}

.stats-chart-canvas-frame--md {
  height: 215px;
}

.stats-chart-canvas-frame--lg {
  height: 320px;
}

.stats-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stats-kpi-row-break {
  height: 0;
  min-height: 0;
}

.stats-period-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.stats-period-type {
  flex: 0 1 16rem;
}

.stats-period-nav {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
  padding-right: .25rem;
}

.stats-period-nav-inner {
  display: inline-flex;
  align-items: center;
}

.stats-period-nav .btn {
  min-width: 2.35rem;
}

@media (max-width: 575.98px) {
  .stats-period-type,
  .stats-period-nav {
    flex: 1 1 100%;
    width: 100%;
  }

  .stats-period-nav-inner {
    width: 100%;
    justify-content: space-between;
  }

  .stats-period-label {
    flex: 1 1 auto;
  }
}

.warehouse-assign-list {
  overflow-y: auto;
}

.employee-chart-scroll {
  height: 300px;
  overflow-y: auto;
}

/* ============================================================================
   EMPLOYEE DOTS (COLORED CIRCLES)
   ========================================================================== */

.emp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  max-width: 5.8rem;
  height: 1.35rem;
  padding: 0 .45rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  line-height: 1;
  font-size: .68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 9999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 .25rem .8rem rgba(0, 0, 0, .16);
  backdrop-filter: blur(8px) saturate(140%);
  user-select: none;
}

.emp-dot-orange {
  background-color: rgba(var(--bs-warning-rgb), .70);
  color: #212529;
  text-shadow: none;
}

.emp-dot-red {
  background-color: rgba(var(--bs-danger-rgb), .72);
  color: #212529;
  text-shadow: none;
}

.calendar-legend-dot,
.calendar-legend-swatch {
  width: 1rem;
  height: 1rem;
}

.calendar-legend-swatch {
  display: inline-block;
}

.calendar-legend-dot.emp-dot {
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  padding: 0;
  font-size: 0;
}

.calendar-legend {
  padding-top: 2pt;
  font-size: .72rem;
}

.calendar-day-holiday,
.calendar-legend-holiday {
  background-color: rgba(var(--bs-success-rgb), .82) !important;
}

.calendar-day-compensation,
.calendar-legend-compensation {
  background-color: rgba(var(--bs-success-rgb), .24) !important;
}

.calendar-day-weekend {
  background-color: rgba(var(--bs-secondary-rgb), .12) !important;
}

.calendar-popover-row {
  display: grid;
  gap: .25rem;
  min-width: 13rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.calendar-popover-row:first-child {
  padding-top: 0;
}

.calendar-popover-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.calendar-popover-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.calendar-popover-type {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-popover-person {
  flex: 0 0 auto;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .78rem;
  font-weight: 600;
}

.calendar-popover-meta {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .75rem;
  line-height: 1.35;
}

.calendar-popover-separator {
  display: inline-block;
  margin: 0 .4rem;
  color: var(--bs-border-color);
}

.calendar-popover-note {
  color: var(--bs-body-color);
}

.calendar-grid-header {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-grid-days {
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.calendar-month-placeholder,
.calendar-month-day {
  min-height: 120px;
}

.calendar-week-day {
  min-height: 200px;
}

.calendar-day-clickable {
  cursor: pointer;
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion);
}

.calendar-day-clickable:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color)) !important;
  box-shadow: var(--sks-shadow-md);
}

.day-cell.calendar-day-glass {
  overflow: hidden;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .12);
  backdrop-filter: blur(10px) saturate(130%);
}

.day-cell.calendar-day-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 42%, rgba(0, 0, 0, .10));
  pointer-events: none;
}

.day-cell.calendar-day-glass > * {
  position: relative;
  z-index: 1;
}

.day-cell.calendar-day-glass.bg-warning {
  background-color: rgba(var(--bs-warning-rgb), .58) !important;
}

.day-cell.calendar-day-glass.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), .56) !important;
}

.day-cell.calendar-day-glass.bg-info {
  background-color: rgba(var(--bs-info-rgb), .52) !important;
}

.day-cell.calendar-day-glass.bg-secondary {
  background-color: rgba(var(--bs-secondary-rgb), .52) !important;
}

.day-cell.is-drop-target {
  outline: 2px dashed rgba(13, 110, 253, .7);
  outline-offset: -2px;
}

.calendar-week-number {
  font-size: .70rem;
  line-height: 1;
}

.calendar-drag-handle {
  cursor: grab;
}

#sonderbauTagPreset.is-invalid,
#sonderbauEditTagPreset.is-invalid {
  border: 1px solid var(--bs-form-invalid-border-color);
  border-radius: .375rem;
  padding: .375rem;
}

.sonderbau-card-ribbon {
  max-width: calc(100% - 1rem);
  min-width: 0;
}

.sonderbau-card-ribbon-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sonderbau-tag-pill {
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .72rem;
  line-height: 1.15;
}

.sonderbau-tag-pill .bi {
  font-size: .68rem;
}

.representives-email-toggle-btn {
  min-width: 3rem;
  padding-inline: .5rem;
}

.card .card-actions .representives-email-toggle-btn.btn-success,
.card .btn-group .representives-email-toggle-btn.btn-success {
  color: var(--bs-success);
  border-color: rgba(var(--bs-success-rgb), .62);
  background: rgba(var(--bs-success-rgb), .08);
}

.card .card-actions .representives-email-toggle-btn.btn-danger,
.card .btn-group .representives-email-toggle-btn.btn-danger {
  color: var(--bs-danger);
  border-color: rgba(var(--bs-danger-rgb), .62);
  background: rgba(var(--bs-danger-rgb), .08);
}

.card .card-actions .representives-email-toggle-btn.btn-success:hover,
.card .card-actions .representives-email-toggle-btn.btn-success:focus-visible,
.card .btn-group .representives-email-toggle-btn.btn-success:hover,
.card .btn-group .representives-email-toggle-btn.btn-success:focus-visible {
  color: var(--bs-success);
  border-color: var(--bs-success);
  background: rgba(var(--bs-success-rgb), .14);
}

.card .card-actions .representives-email-toggle-btn.btn-danger:hover,
.card .card-actions .representives-email-toggle-btn.btn-danger:focus-visible,
.card .btn-group .representives-email-toggle-btn.btn-danger:hover,
.card .btn-group .representives-email-toggle-btn.btn-danger:focus-visible {
  color: var(--bs-danger);
  border-color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), .14);
}

.representives-email-toggle-visual {
  position: relative;
  display: inline-flex;
  width: 1.9rem;
  height: 1rem;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.representives-email-toggle-visual.is-on {
  color: var(--bs-success);
  border-color: var(--bs-success);
  background: rgba(var(--bs-success-rgb), .18);
}

.representives-email-toggle-visual.is-off {
  color: var(--bs-danger);
  border-color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), .18);
}

.representives-email-toggle-visual__knob {
  width: .68rem;
  height: .68rem;
  margin-inline: .15rem;
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--sks-motion);
}

.representives-email-toggle-visual.is-on .representives-email-toggle-visual__knob {
  transform: translateX(.82rem);
}

.wheelchair-feature-chart {
  display: grid;
  gap: .42rem;
  margin-top: 0;
  padding: .75rem;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: .5rem;
  background: rgba(var(--bs-secondary-rgb), .05);
}

.wheelchair-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.25rem 2.35rem;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  font-size: .82rem;
  line-height: 1.2;
}

.employees-feature-chart .wheelchair-feature-row {
  grid-template-columns: minmax(0, 1fr) 3.25rem minmax(4.75rem, 8rem);
}

.wheelchair-feature-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.wheelchair-feature-meter {
  display: block;
  overflow: hidden;
  height: .38rem;
  border-radius: 999px;
  background: rgba(var(--bs-secondary-rgb), .18);
}

.wheelchair-feature-meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.wheelchair-feature-row.is-on {
  color: var(--bs-success);
}

.wheelchair-feature-row.is-on .wheelchair-feature-meter > span,
.wheelchair-feature-row.is-note .wheelchair-feature-meter > span {
  width: 100%;
}

.wheelchair-feature-row.is-off {
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.wheelchair-feature-row.is-note {
  color: var(--bs-primary);
}

.wheelchair-feature-value {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calendar-events-date {
  width: 30%;
}

.calendar-events-type {
  width: 20%;
}

.calendar-events-employee {
  width: 40%;
}

.calendar-events-action {
  width: 10%;
}

/* ============================================================================
   CALENDAR PAGE EXCEPTIONS
   ========================================================================== */

#calendarContainer .card .card-body {
  justify-content: flex-start !important;
}

#calendarContainer .card .card-body .mt-auto {
  margin-top: auto !important;
}

#empChartSick {
  max-height: 520px;
}

/* ============================================================================
   KPI TILES
   ========================================================================== */

.kpi-tile {
  border: 1px solid var(--sks-border, var(--bs-border-color));
  background: var(--sks-surface, var(--bs-tertiary-bg));
  border-radius: var(--sks-radius);
  padding: 1rem;
  box-shadow: var(--sks-shadow-sm);
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion);
}

.kpi-tile:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  box-shadow: var(--sks-shadow-md);
}

.kpi-tile .kpi-title {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .875rem;
  line-height: 1.2;
}

.kpi-tile .kpi-value {
  color: var(--bs-emphasis-color);
  font-weight: 700;
  font-size: 1.5rem;
}

.kpi-tile .kpi-sub {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .875rem;
}

.metric-card {
  min-height: 100%;
}

.metric-card-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.metric-card-title {
  min-height: 2.75em;
  overflow: hidden;
  line-height: 1.35;
}

.metric-card-value {
  display: flex;
  min-height: 1.2em;
  align-items: center;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card-sub {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chart-panel-card .card-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.chart-panel-title {
  min-height: 1.7em;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-panel-card canvas,
.chart-panel-card .table-responsive {
  flex: 1 1 auto;
}

/* ============================================================================
   DASHBOARD
   ========================================================================== */

.dashboard-graph-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 215px;
  height: 215px;
}

.dashboard-graph-area {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-graph-wrapper .chartjs-legend,
.dashboard-graph-wrapper .chart-legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  z-index: 1;
}

.card-dashboard-footer {
  position: relative;
  z-index: 2;
}

#dashWarehouseRandomStock {
  max-height: 165px;
}

.dashboard-graph-wrapper--warehouse {
  box-sizing: border-box;
  padding-top: 2.45rem;
}

.dashboard-graph-wrapper--warehouse #dashWarehouseRandomStock {
  height: 100% !important;
  max-height: none;
}

.dashboard-canvas-kpi {
  display: flex;
  min-height: 215px;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: stretch;
}

.dashboard-canvas-kpi > a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.card-dashboard-body {
  display: flex;
  flex-direction: column;
}

.card-dashboard-footer {
  border-top: 1px solid var(--sks-border, rgba(0, 0, 0, 0.08));
  padding-top: .75rem;
  margin-top: auto;
}

#dashClockToolbar {
  min-height: 36px;
  white-space: nowrap;
}

#dashClockToolbarDate,
#dashClockToolbarTime {
  display: flex;
  align-items: center;
  min-height: 2.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: .15rem 0;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.card-dashboard {
  min-height: 100%;
}

.card-dashboard-body {
  min-height: 0;
}

.card-dashboard-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-card-main {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: .8rem;
}

.card-dashboard-content > .d-flex:first-child {
  min-width: 0;
}

.card-dashboard-content > .d-flex:first-child .fw-semibold {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-description {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.dashboard-card-action {
  min-height: 2.15rem;
  max-width: 100%;
  gap: .42rem;
  justify-content: center;
  border-radius: var(--sks-radius-sm) !important;
}

.dashboard-card-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-card-action-icon-only {
  width: 2.25rem;
  min-width: 2.25rem;
  padding-right: 0;
  padding-left: 0;
}

.dashboard-card-action-icon {
  margin: 0 !important;
  font-size: .95rem;
  line-height: 1;
}

.dashboard-card-summary {
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  padding: .7rem 0 .85rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.dashboard-graph-area .dashboard-card-summary {
  margin-top: auto;
}

.dashboard-employee-events {
  align-items: stretch;
}

.dashboard-employee-overview {
  align-items: stretch;
}

.dashboard-employee-chart-panel {
  display: flex;
  min-height: 215px;
  flex-direction: column;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

[data-bs-theme="dark"] .dashboard-employee-chart-panel {
  background: transparent;
}

.dashboard-employee-stat-grid {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-employee-stat {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: .1rem .45rem;
  align-items: center;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  padding: .55rem .6rem;
}

.dashboard-employee-stat i {
  grid-row: 1 / span 2;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: 1rem;
}

.dashboard-employee-stat-value {
  color: var(--bs-emphasis-color);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-employee-stat-label {
  min-width: 0;
  overflow: hidden;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .76rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-employee-chart-wrap {
  position: relative;
  min-height: 215px;
  height: 215px;
  flex: 1 1 auto;
}

.dashboard-event-panel {
  min-height: 100%;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .18)),
    var(--sks-surface, var(--bs-body-bg));
  box-shadow: var(--sks-shadow-sm);
  padding: .9rem;
}

[data-bs-theme="dark"] .dashboard-event-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
    var(--sks-surface, var(--bs-body-bg));
}

.dashboard-event-panel .fw-semibold {
  color: var(--bs-emphasis-color);
}

.dashboard-event-panel li {
  border-radius: var(--sks-radius-sm);
}

.dashboard-event-panel > .list-unstyled > li,
.dashboard-event-panel > ul > li {
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  border: 1px solid var(--sks-border, var(--bs-border-color));
  padding: .55rem .65rem;
}

@media (max-width: 575.98px) {
  .dashboard-employee-stat-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-employee-chart-wrap {
    min-height: 160px;
    height: 160px;
  }
}

/* Flex-Layout stabilisieren: Content darf schrumpfen, Footer bleibt sauber unten */
/* optional: ein klein wenig Luft zwischen Content und Footer */
.card-dashboard-footer {
  flex: 0 0 auto;
}

/* Default (lg/desktop) */
#dashMediaActiveKpi,
#dashSonderbauActiveKpi,
#dashTradingOpenPickupKpi,
#dashRepairsStatusKpi,
#dashQualityKpi,
#dashWheelchairModelKpi {
  --dash-kpi-visual-h: 215px;
  --dash-media-h: 215px;
}

#dashMediaActiveKpi,
#dashSonderbauActiveKpi {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-media-kpi-shell {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

#dashTradingOpenPickupKpi,
#dashRepairsStatusKpi,
#dashQualityKpi,
#dashWheelchairModelKpi {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.dashboard-repairs-summary {
  min-height: 1.35rem;
  margin-top: .35rem;
  line-height: 1.25;
  text-align: center;
}

.dashboard-kpi-stack {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
}

.dashboard-kpi-visual {
  display: flex;
  width: 100%;
  min-height: var(--dash-kpi-visual-h, 190px);
  flex: 0 0 var(--dash-kpi-visual-h, 190px);
  align-items: center;
  justify-content: center;
}

.dashboard-number-kpi-shell {
  overflow: hidden;
}

.dashboard-number-kpi {
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--sks-accent);
  font-size: 5.75rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.quality-dashboard-kpi {
  display: flex;
  width: 100%;
  min-height: var(--dash-kpi-visual-h, 215px);
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}

.quality-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  padding: .8rem .9rem;
}

.quality-dashboard-label {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.quality-dashboard-value {
  color: var(--bs-emphasis-color);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.quality-dashboard-icon {
  display: flex;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--sks-ci-red-rgb), .12);
  color: var(--sks-accent);
  font-size: 1.35rem;
}

.quality-dashboard-status {
  display: grid;
  gap: .45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quality-dashboard-status-item {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  border-bottom: 1px solid var(--sks-border, var(--bs-border-color));
  padding: .15rem 0 .35rem;
}

.quality-dashboard-status-item span {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.quality-dashboard-status-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-dashboard-categories {
  display: flex;
  min-height: 2.2rem;
  flex-wrap: wrap;
  gap: .4rem;
  align-content: flex-start;
}

.quality-dashboard-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: .42rem;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface, var(--bs-body-bg));
  color: var(--bs-emphasis-color);
  padding: .28rem .5rem;
  font-size: .78rem;
  line-height: 1.1;
}

.quality-dashboard-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-dashboard-chip strong {
  color: var(--sks-accent);
  font-variant-numeric: tabular-nums;
}

.dashboard-number-kpi-trading {
  transform: translateY(.08em);
}

.dashboard-media-kpi {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.dashboard-media-frame {
  align-items: stretch;
  min-height: calc(var(--dash-media-h, 180px) - 18px);
  flex-basis: calc(var(--dash-media-h, 180px) - 18px);
  margin-top: .15rem;
  margin-bottom: .65rem;
}

.dashboard-sonderbau-tag-cloud {
  align-content: center;
  align-items: center;
  justify-content: center;
  overflow: auto;
  gap: .45rem;
  padding: .85rem .35rem;
  flex-wrap: wrap;
}

#dashSonderbauActiveKpi .dashboard-media-kpi {
  justify-content: center;
}

#dashSonderbauActiveKpi .dashboard-kpi-visual {
  min-height: var(--dash-kpi-visual-h, 190px);
  flex-basis: var(--dash-kpi-visual-h, 190px);
}

.dashboard-sonderbau-chart-panel {
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: .35rem 0 0;
}

.dashboard-sonderbau-chart-scroll {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.dashboard-sonderbau-chart-canvas {
  height: 100%;
  min-width: 300px;
  width: 100%;
}

.dashboard-sonderbau-chart-canvas--md {
  min-width: 420px;
}

.dashboard-sonderbau-chart-canvas--lg {
  min-width: 640px;
}

.dashboard-sonderbau-chart-canvas--xl {
  min-width: 860px;
}

.dashboard-sonderbau-chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.dashboard-sonderbau-chart-canvas canvas.is-clickable {
  cursor: pointer;
}

.dashboard-sonderbau-tag {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(148, 163, 184, .08);
  color: rgba(var(--bs-emphasis-color-rgb), .78);
  letter-spacing: .055em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: none;
  backdrop-filter: blur(8px);
  transition: background-color var(--sks-motion), border-color var(--sks-motion), color var(--sks-motion), transform var(--sks-motion), box-shadow var(--sks-motion);
}

.dashboard-sonderbau-tag:hover,
.dashboard-sonderbau-tag:focus-visible {
  border-color: rgba(148, 163, 184, .48);
  background: rgba(148, 163, 184, .16);
  color: var(--bs-emphasis-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  transform: translateY(-1px);
}

.dashboard-sonderbau-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-tag-xs {
  padding: .28rem .5rem;
  font-size: .62rem;
  font-weight: 800;
}

.dashboard-tag-sm {
  padding: .34rem .62rem;
  font-size: .68rem;
  font-weight: 700;
}

.dashboard-tag-md {
  padding: .4rem .74rem;
  font-size: .76rem;
  font-weight: 600;
}

.dashboard-tag-lg {
  padding: .46rem .86rem;
  font-size: .84rem;
  font-weight: 400;
}

.dashboard-tag-red {
  background: var(--sks-accent-soft);
  border-color: var(--sks-accent-border);
  color: var(--sks-accent);
}

.dashboard-tag-amber {
  background: rgba(245, 158, 11, .2);
  border-color: rgba(245, 158, 11, .48);
  color: #f59e0b;
}

.dashboard-tag-blue {
  background: rgba(14, 165, 233, .18);
  border-color: rgba(14, 165, 233, .46);
  color: #0ea5e9;
}

.dashboard-tag-green {
  background: rgba(34, 197, 94, .18);
  border-color: rgba(34, 197, 94, .46);
  color: #22c55e;
}

.dashboard-tag-violet {
  background: rgba(139, 92, 246, .2);
  border-color: rgba(139, 92, 246, .48);
  color: #8b5cf6;
}

.dashboard-tag-cyan {
  background: rgba(20, 184, 166, .18);
  border-color: rgba(20, 184, 166, .46);
  color: #14b8a6;
}

.dashboard-tag-pink {
  background: rgba(236, 72, 153, .18);
  border-color: rgba(236, 72, 153, .46);
  color: #ec4899;
}

.dashboard-tag-slate {
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .24);
  color: rgba(var(--bs-emphasis-color-rgb), .78);
}

/* xs/sm: kleiner */
@media (max-width: 575.98px) {
  #dashMediaActiveKpi,
  #dashSonderbauActiveKpi,
  #dashWheelchairModelKpi {
    --dash-kpi-visual-h: 160px;
    --dash-media-h: 160px;
  }
}

/* optional: md etwas grösser als xs */
@media (min-width: 576px) and (max-width: 767.98px) {
  #dashMediaActiveKpi,
  #dashSonderbauActiveKpi,
  #dashWheelchairModelKpi {
    --dash-kpi-visual-h: 160px;
    --dash-media-h: 160px;
  }
}

.dashboard-placeholder-media {
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
}

.dashboard-warehouse-picker {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  margin-bottom: .45rem;
}

.dashboard-warehouse-picker .form-select {
  border-color: var(--sks-border, var(--bs-border-color));
  background-color: rgba(148, 163, 184, .08);
  color: var(--bs-body-color);
  min-height: 2rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .55rem;
  font-size: .78rem;
  line-height: 1.2;
}

@media (max-width: 575.98px) {
  .dashboard-graph-wrapper--warehouse {
    padding-top: 0;
  }

  .dashboard-warehouse-picker {
    display: none;
  }

  #dashWarehouseRandomStock {
    max-height: 185px;
  }
}

.dashboard-kpi-media {
  height: calc(var(--dash-media-h, 180px) - 18px);
  object-fit: cover;
}

.dashboard-media-collage {
  display: grid;
  width: 100%;
  height: calc(var(--dash-media-h, 180px) - 18px);
  overflow: hidden;
  gap: .4rem;
  grid-template-columns: 1.25fr .85fr .8fr;
  grid-template-rows: .95fr .75fr .75fr;
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  cursor: pointer;
}

.dashboard-media-collage-tile {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.dashboard-media-collage-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sks-motion);
}

.dashboard-media-collage:hover .dashboard-media-collage-tile img {
  transform: scale(1.025);
}

.dashboard-media-collage-tile-1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.dashboard-media-collage-tile-2 {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.dashboard-media-collage-tile-3 {
  grid-column: 2;
  grid-row: 2;
}

.dashboard-media-collage-tile-4 {
  grid-column: 3;
  grid-row: 2;
}

.dashboard-media-collage-tile-5 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

.dashboard-media-count {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  gap: .35rem;
  margin-top: 0;
}

[data-bs-theme="dark"] .dashboard-placeholder-media,
body.dark .dashboard-placeholder-media {
  background: var(--sks-surface-2);
  color: var(--sks-text-muted);
  border-color: var(--sks-border);
}

/* ============================================================================
   WAREHOUSE
   ========================================================================== */

.warehouseStock-canvas-graph {
  min-height: 350px;
  height: 350px !important;
}

.warehouseStock-canvas-bars {
  min-height: 350px;
  height: 350px !important;
}

.stock-panel-card .card-header,
.stock-panel-header {
  background: transparent;
  border-bottom-color: var(--sks-border, var(--bs-border-color));
  color: var(--bs-emphasis-color);
  letter-spacing: 0;
}

.stock-panel-header strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   MEDIA
   ========================================================================== */

.media-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--sks-radius);
  min-height: 260px;
}

/* Full-bleed background (unter allem) */
.media-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  transform: scale(1.02);
  z-index: 0;              /* <- WICHTIG: unter Inhalt */
  pointer-events: none;    /* <- damit Buttons immer klickbar sind */
}

.media-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.10) 100%
  );
}

.media-viewer-error-title {
  font-weight: 700;
  margin-bottom: 8px;
}

/* Card content über dem Background */
.media-card .card-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.media-card .btn-group {
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.media-card .btn-group .btn {
  color: #fff;
  background: rgba(0, 0, 0, .34);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
}

.media-card .btn-group .btn:hover,
.media-card .btn-group .btn:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}

.media-card-bg-video,
.media-card-bg-img {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.media-card-bg-video video,
.media-card-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.media-card-bg-video::after,
.media-card-bg-img::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.10) 100%
  );
}

/* -------- Pure Lightbox (no frame) -------- */
.media-lightbox{
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  background: rgba(0,0,0,.92);
}

.media-lightbox.is-open{ display:block; }

.media-lightbox__wrap{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}

.media-lightbox--with-footer .media-lightbox__wrap {
  padding-bottom: 112px;
}

/* max usable area */
.media-lightbox__content{
  width: min(96vw, 1400px);
  height: min(92vh, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* media scales to screen */
.media-lightbox__content img,
.media-lightbox__content video{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display:block;
  background:#000;
  border-radius: 10px;
}

/* close button like lightbox */
.media-lightbox__close{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 4001;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.media-lightbox__close:hover{ background: rgba(255,255,255,.2); }

.media-lightbox__actions {
  position: fixed;
  top: 14px;
  right: 66px;
  z-index: 4002;
  display: flex;
  gap: .5rem;
}

.media-lightbox__action {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.media-lightbox__action:hover {
  background: rgba(255,255,255,.22);
}

.media-lightbox__action--danger:hover {
  background: rgba(220,53,69,.72);
}

/* optional error text */
.media-lightbox__error{
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  line-height: 1.35;
  text-align: center;
  max-width: 860px;
}

/* --- Lightbox NAV + Counter --- */
.media-lightbox__nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4002;
  border: 0;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px);
}
.media-lightbox__nav:hover{ background: rgba(255,255,255,.26); }
.media-lightbox__nav i{ font-size: 2rem; line-height: 1; }

.media-lightbox__nav--prev{ left: 14px; }
.media-lightbox__nav--next{ right: 14px; }

.media-lightbox__counter{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 4002;
  width: min(96vw, 760px);
  max-width: 760px;
  color: rgba(255,255,255,.9);
  background: transparent;
  padding: 0;
  font-size: .875rem;
  letter-spacing: 0;
}

.media-lightbox--with-footer .media-lightbox__counter {
  bottom: 96px;
  width: auto;
  max-width: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  padding: .25rem .55rem;
  backdrop-filter: blur(8px);
}

.media-lightbox__footer {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 4002;
  width: min(96vw, 760px);
  max-width: 760px;
  color: rgba(255,255,255,.9);
}

.media-lightbox-footer {
  width: 100%;
  max-width: 100%;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  border-radius: var(--sks-radius);
  padding: 0.65rem 0.85rem;
  backdrop-filter: blur(10px);
}

.media-lightbox-footer__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  width: 100%;
}

.media-lightbox-footer__text {
  min-width: 0;
  width: 100%;
}

.media-lightbox-footer__title,
.media-lightbox-footer__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-lightbox-footer__title {
  font-weight: 700;
}

.media-lightbox-footer__meta {
  font-size: .82rem;
  opacity: .72;
}

.media-lightbox-footer__actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

.media-lightbox-footer__details {
  width: 100%;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

@media (max-width: 575.98px) {
  .media-lightbox__nav {
    width: 52px;
    height: 52px;
  }

  .media-lightbox--with-footer .media-lightbox__wrap {
    padding-bottom: 136px;
  }

  .media-lightbox--with-footer .media-lightbox__counter {
    bottom: 116px;
  }

  .media-lightbox-footer__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-lightbox-footer__actions {
    justify-content: flex-end;
  }
}

/* click-to-close hint: pointer cursor on images only */
.media-lightbox__content img{ cursor: pointer; }

/* ============================================================================
   TABLE TRANSPARENT
   ========================================================================== */
   
.table-transparent {
    --bs-table-bg: transparent;
    background-color: transparent !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sks-border, var(--bs-border-color));
  color: var(--bs-body-color);
}

.table-responsive {
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface, var(--bs-body-bg));
  box-shadow: var(--sks-shadow-sm);
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: .72rem .85rem;
  border-bottom-color: var(--sks-border, var(--bs-border-color));
  vertical-align: middle;
}

.table-transparent th,
.table-transparent td {
  background-color: transparent !important;
  border-color: var(--sks-border, rgba(255, 255, 255, 0.15));
}

.table-transparent tbody tr:hover {
  background-color: var(--sks-hover, rgba(255, 255, 255, 0.05));
}

.table-transparent thead th {
  background-color: var(--sks-surface-2, var(--bs-tertiary-bg)) !important;
  border-bottom: 1px solid var(--sks-border-strong, rgba(255, 255, 255, 0.25));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.table-hover > tbody > tr {
  transition: background-color var(--sks-motion);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--sks-hover, rgba(255, 255, 255, 0.05));
}

.table .alert {
  margin: .15rem 0;
}

.alert-danger {
  --bs-alert-bg: rgba(var(--bs-danger-rgb), .1);
  --bs-alert-border-color: rgba(var(--bs-danger-rgb), .24);
  --bs-alert-color: var(--bs-body-color);
  box-shadow: inset 3px 0 0 var(--sks-accent);
}

.alert-danger::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .5rem;
  border-radius: 999px;
  background: var(--sks-accent);
  vertical-align: .05rem;
}

.badge {
  border-radius: var(--sks-radius-sm);
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* ============================================================================
   DARK MODE – WORKLOAD INFO MODAL
   ========================================================================== */

html[data-bs-theme="dark"] #workloadInfoModal pre {
  background: #1b1d22 !important;
  border-color: #2d2f35 !important;
  color: #e5e7eb !important;
}

html[data-bs-theme="dark"] #workloadInfoModal p code {
  background: #1b1d22 !important;
}

.js-used,
.js-stock,
.js-standard {
  cursor: default !important;
  pointer-events: auto; /* Popover bleibt möglich */
}

.js-used:hover,
.js-stock:hover,
.js-standard:hover {
  text-decoration: none;
}