.kpi-card {
      border: 0;
      border-radius: 1rem;
  }

  .kpi-icon {
      background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  }

  .soft-shadow {
      box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .06);
  }

  .badge-chip {
      font-weight: 600;
      letter-spacing: .2px;
  }

  .sticky-top-offset {
      position: sticky;
      top: .75rem;
      z-index: 10;
  }

  .cont-title {
      font-size: .85rem;
      text-transform: uppercase;
      letter-spacing: .08em;
  }

  #themeToggle .bi {
      color: #fff;
  }

  /* =========================
   PREMIUM DARK PACK (Bootstrap 5.3 data-bs-theme)
   ========================= */

  /* --- Navbar / dropdown --- */
  html[data-bs-theme="dark"] .navbar.bg-dark {
      box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .55);
  }

  html[data-bs-theme="dark"] .dropdown-menu {
      background: rgba(25, 29, 35, .98);
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .65);
  }

  html[data-bs-theme="dark"] .dropdown-item {
      color: rgba(255, 255, 255, .85);
  }

  html[data-bs-theme="dark"] .dropdown-item:hover,
  html[data-bs-theme="dark"] .dropdown-item:focus {
      background: rgba(255, 255, 255, .06);
      color: #fff;
  }

  html[data-bs-theme="dark"] .dropdown-divider {
      border-top-color: rgba(255, 255, 255, .10);
  }

  /* --- Cards (jeśli już masz, zostaw; to jest bezpieczne dopięcie) --- */
  html[data-bs-theme="dark"] .card,
  html[data-bs-theme="dark"] .kpi-card {
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .03);
      box-shadow:
          0 .35rem 1.2rem rgba(0, 0, 0, .55),
          inset 0 1px 0 rgba(255, 255, 255, .06);
  }

  /* --- Badge-chip (ładniejsze w dark) --- */
  html[data-bs-theme="dark"] .badge-chip {
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .88);
  }

  /* --- KPI ikonki (żeby nie waliły niebieskim “plackiem”) --- */
  html[data-bs-theme="dark"] .kpi-icon {
      background: rgba(13, 110, 253, .18);
      border: 1px solid rgba(13, 110, 253, .18);
  }

  /* --- Tables: czytelne linie + hover + nagłówek --- */
  html[data-bs-theme="dark"] .table {
      --bs-table-bg: transparent;
      --bs-table-striped-bg: rgba(255, 255, 255, .03);
      --bs-table-hover-bg: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .85);
  }

  html[data-bs-theme="dark"] .table thead th {
      border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
      color: rgba(255, 255, 255, .78);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: .78rem;
  }

  html[data-bs-theme="dark"] .table td,
  html[data-bs-theme="dark"] .table th {
      border-color: rgba(255, 255, 255, .08) !important;
  }

  html[data-bs-theme="dark"] .table-hover tbody tr:hover {
      outline: 1px solid rgba(255, 255, 255, .08);
  }

  /* --- Forms: inputy, selecty, textarea (bardziej “soft”) --- */
  html[data-bs-theme="dark"] .form-control,
  html[data-bs-theme="dark"] .form-select {
      background-color: rgba(255, 255, 255, .03);
      border-color: rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .88);
  }

  html[data-bs-theme="dark"] .form-control:focus,
  html[data-bs-theme="dark"] .form-select:focus {
      border-color: rgba(13, 110, 253, .55);
      box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18);
  }

  html[data-bs-theme="dark"] .form-control::placeholder {
      color: rgba(255, 255, 255, .40);
  }

  /* --- Buttons outline w dark: delikatniejsza obwódka --- */
  html[data-bs-theme="dark"] .btn-outline-light {
      border-color: rgba(255, 255, 255, .35);
  }

  html[data-bs-theme="dark"] .btn-outline-light:hover {
      background: rgba(255, 255, 255, .10);
      border-color: rgba(255, 255, 255, .45);
  }

  /* --- Alerts w dark (jak używasz) --- */
  html[data-bs-theme="dark"] .alert {
      border-color: rgba(255, 255, 255, .12);
  }

  #qsoTable td .bi-send-check-fill,
  #qsoTable td .bi-patch-check-fill {
    font-size: .92rem;
    vertical-align: -0.05em;
  }

  /* DataTables - select ilości wierszy */
  div.dataTables_length select,
  div.dataTables_length select.form-select,
  div.dataTables_length select.form-select-sm {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #6c757d !important;
  }

  div.dataTables_length select option {
    color: #212529 !important;
    background-color: #fff !important;
  }