html {
  font-size: 14px;
}

.kunde-name-link {
  color: #212529;
}

[data-theme="dark"] .kunde-name-link {
  color: #ffffff;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* =====================================================
   PAGE-HEADER: Wiederverwendbare Seitenüberschrift
   (Icon in primary, Titel, optionaler Untertitel, Action-Button rechts)
   ===================================================== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-header h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-header .subtitle {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}
[data-theme="dark"] .page-header .subtitle {
  color: #909090;
}

/* =====================================================
   TABLE-CARD: Wiederverwendbarer Rahmen um Tabellen
   (wie auf Leistungen/Kunden — deutlich sichtbarer Rahmen
   und Schatten im Hellmodus)
   ===================================================== */
.table-card {
  border: 1px solid #b9c2d0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--bs-body-bg);
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.10),
              0 1px 3px rgba(30, 41, 59, 0.08);
  margin-bottom: 1rem;
}

.table-card > .table,
.table-card > .table-responsive > .table {
  margin-bottom: 0;
  --bs-table-bg: transparent;
  color: #1f2329;
}

/* Header */
.table-card .table thead th,
.table-card .table thead.table-light th {
  background-color: #eef1f6;
  border-bottom: 2px solid #c9d1dc;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3b4453;
  padding: 0.8rem 0.9rem;
  white-space: nowrap;
}

/* Cells */
.table-card .table tbody td {
  padding: 0.75rem 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid #e3e7ee;
  color: #1f2329;
}

/* Row-Striping — überschreibt bootstrap's .table-striped */
.table-card .table tbody tr:nth-of-type(odd) td,
.table-card .table.table-striped > tbody > tr:nth-of-type(odd) > td {
  --bs-table-accent-bg: transparent;
  background-color: #ffffff;
}
.table-card .table tbody tr:nth-of-type(even) td,
.table-card .table.table-striped > tbody > tr:nth-of-type(even) > td {
  --bs-table-accent-bg: transparent;
  background-color: #f6f8fb;
}

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

.table-card .table tbody tr {
  transition: background-color 0.12s ease;
}

/* Hover */
.table-card .table tbody tr:hover td,
.table-card .table.table-hover > tbody > tr:hover > td {
  background-color: #e7eefb !important;
  --bs-table-accent-bg: transparent;
}

/* ============ DARK MODE ============ */
[data-theme="dark"] .table-card {
  background: #2a2a2a;
  border-color: #3a3a3a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .table-card > .table,
[data-theme="dark"] .table-card > .table-responsive > .table {
  --bs-table-bg: transparent;
  color: #f0f0f0;
}

[data-theme="dark"] .table-card .table thead th,
[data-theme="dark"] .table-card .table thead.table-light th {
  background-color: #3a3d44;
  border-bottom: 2px solid #4d525b;
  color: #e8ecf2;
}

[data-theme="dark"] .table-card .table tbody td {
  border-bottom-color: #3a3d44;
  color: #f0f0f0;
}

[data-theme="dark"] .table-card .table tbody tr:nth-of-type(odd) td,
[data-theme="dark"] .table-card .table.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #2c2f36;
  color: #f0f0f0;
}

[data-theme="dark"] .table-card .table tbody tr:nth-of-type(even) td,
[data-theme="dark"] .table-card .table.table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: #34383f;
  color: #f0f0f0;
}

[data-theme="dark"] .table-card .table tbody tr:hover td,
[data-theme="dark"] .table-card .table.table-hover > tbody > tr:hover > td {
  background-color: #4a5161 !important;
  color: #ffffff;
}

/* Mobile-Optimierung: kompakteres Padding, Beschreibungs-Zellen auf 3 Zeilen kappen
   !important, um ID-basierte Overrides einzelner Seiten (#leistungenTable etc.) zu schlagen */
@media (max-width: 768px) {
  .table-card .table thead th,
  .table-card .table tbody td {
    padding: 0.5rem 0.45rem !important;
  }
  .table-card .table .desc-cell > div {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
  }
}

/* =====================================================
   DARK MODE
   ===================================================== */

/* Verhindert Flackern beim Laden – Script im <head> setzt das Theme sofort */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}

/* Dark-Mode-Override für Bootstrap-Klassen die Bootstrap 5.3 nicht automatisch ändert */
/*
  Farbpalette (neutrales Dunkelgrau):
  body bg:      #1e1e1e
  surface:      #2a2a2a  (cards, modals, dropdowns)
  surface-high: #333333  (card-header, table-head, hover)
  border:       #3a3a3a
  text:         #e0e0e0
  text-muted:   #909090
*/

[data-theme="dark"] .navbar {
  background-color: #242424 !important;
  border-bottom-color: #3a3a3a !important;
}

[data-theme="dark"] .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28224, 224, 224, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .dropdown-toggle {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .dropdown-toggle:hover {
  color: #ffffff !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
}

[data-theme="dark"] .dropdown-item {
  color: #e0e0e0;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #3a3a3a;
  color: #ffffff;
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: #3a3a3a;
}

[data-theme="dark"] body {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

[data-theme="dark"] .card {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
}

[data-theme="dark"] .card-header {
  background-color: #333333;
  border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .table {
  --bs-table-bg: #2a2a2a;
  --bs-table-striped-bg: #2f2f2f;
  --bs-table-hover-bg: #383838;
  --bs-table-border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .table thead th {
  background-color: #333333;
  color: #c8c8c8;
  border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #2a2a2a;
  border-color: #6a9fd8;
  color: #e0e0e0;
  box-shadow: 0 0 0 0.25rem rgba(106, 159, 216, 0.2);
}

[data-theme="dark"] .form-control::placeholder {
  color: #808080;
}

[data-theme="dark"] .input-group-text {
  background-color: #333333;
  border-color: #3a3a3a;
  color: #c8c8c8;
}

[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border {
  border-color: #3a3a3a !important;
}

[data-theme="dark"] .modal-content {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .modal-footer {
  border-top-color: #3a3a3a;
}

[data-theme="dark"] .alert-info {
  background-color: #1a2a3a;
  border-color: #1e3a5a;
  color: #7fb3d3;
}

[data-theme="dark"] .alert-warning {
  background-color: #2e2200;
  border-color: #5c4500;
  color: #ffc107;
}

[data-theme="dark"] .alert-success {
  background-color: #0d2a1a;
  border-color: #1a4d2e;
  color: #5cb85c;
}

[data-theme="dark"] .alert-danger {
  background-color: #2a1010;
  border-color: #4d1a1a;
  color: #f87171;
}

[data-theme="dark"] .badge.bg-secondary {
  background-color: #484848 !important;
}

[data-theme="dark"] .text-muted {
  color: #909090 !important;
}

[data-theme="dark"] a {
  color: #7bafd4;
}

[data-theme="dark"] a:hover {
  color: #a0c8e8;
}

[data-theme="dark"] .footer {
  border-top-color: #3a3a3a !important;
  color: #909090;
}

[data-theme="dark"] .btn-outline-danger {
  color: #f87171;
  border-color: #f87171;
}

[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #f87171;
  color: #fff;
}

[data-theme="dark"] .btn-outline-primary {
  color: #7bafd4;
  border-color: #7bafd4;
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #7bafd4;
  color: #fff;
}

[data-theme="dark"] .btn-outline-secondary {
  color: #b0b0b0;
  border-color: #b0b0b0;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #b0b0b0;
  color: #1e1e1e;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #a0a0a0;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #2a2a2a;
  border-color: #3a3a3a #3a3a3a #2a2a2a;
  color: #e0e0e0;
}

[data-theme="dark"] .nav-tabs {
  border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .list-group-item {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .list-group-item:hover {
  background-color: #333333;
}

[data-theme="dark"] hr {
  border-color: #3a3a3a;
}

[data-theme="dark"] .choices__inner {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .choices__list--dropdown,
[data-theme="dark"] .choices__list[aria-expanded] {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
}

[data-theme="dark"] .choices__item {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .choices__item--choice:hover,
[data-theme="dark"] .choices__item--choice.is-highlighted {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .choices__item--choice.is-selected {
  background-color: #1a2e3a !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .choices__item--choice.is-selected.is-highlighted {
  background-color: #253d4e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .choices__placeholder {
  color: #808080 !important;
}

/* Design-Auswahl Karten */
.theme-option {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease;
}

.theme-option:hover {
  border-color: #6060a0;
}

.theme-option.active {
  border-color: #1b6ec2;
}

[data-theme="dark"] .theme-option.active {
  border-color: #7b9fd4;
}

/* =====================================================
   DARK MODE – TABELLEN (Bootstrap-Klassen)
   ===================================================== */

/* table-light auf thead → im Dark Mode dunkel machen */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] .table-light > * {
  --bs-table-bg: #333333 !important;
  background-color: #333333 !important;
  color: #c8c8c8 !important;
  border-color: #3a3a3a !important;
}

/* bg-light / bg-white auf beliebigen Elementen */
[data-theme="dark"] .bg-light {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .bg-white {
  background-color: #2a2a2a !important;
}

/* table-active (markierte Zeile) */
[data-theme="dark"] .table-active,
[data-theme="dark"] .table-active > td {
  background-color: #3a3a5a !important;
  color: #e0e0e0 !important;
}

/* Tabellen-Zebra: jede zweite Zeile lesbar halten */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #2f2f2f;
  color: #e0e0e0;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: #2a2a2a;
  color: #e0e0e0;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: #383838;
  color: #ffffff;
}

/* =====================================================
   DARK MODE – FULLCALENDAR (fc-*)
   ===================================================== */

/* Hintergrund des Kalender-Containers */
[data-theme="dark"] #calendar,
[data-theme="dark"] .card-panel,
[data-theme="dark"] .filters,
[data-theme="dark"] .avail-section {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
}

/* FC Basis */
[data-theme="dark"] .fc {
  color: #e0e0e0;
}
[data-theme="dark"] .fc td,
[data-theme="dark"] .fc th {
  border-color: #3a3a3a !important;
}

/* FC Toolbar */
[data-theme="dark"] .fc .fc-toolbar-title {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .fc .fc-button-primary {
  background: #333333 !important;
  border-color: #3a3a3a !important;
  color: #c8c8c8 !important;
}
[data-theme="dark"] .fc .fc-button-primary:hover {
  background: #3a3a3a !important;
  color: #ffffff !important;
  border-color: #4a4a4a !important;
}
[data-theme="dark"] .fc .fc-button-primary.fc-button-active,
[data-theme="dark"] .fc .fc-button-primary:active {
  background: #5a8fa8 !important;
  color: #fff !important;
  border-color: #5a8fa8 !important;
}

/* FC Spalten-Header */
[data-theme="dark"] .fc .fc-col-header-cell {
  background: #333333 !important;
  border-color: #3a3a3a !important;
}
[data-theme="dark"] .fc .fc-col-header-cell-cushion {
  color: #c8c8c8 !important;
}

/* FC Heute-Spalte */
[data-theme="dark"] .fc .fc-day-today,
[data-theme="dark"] .fc .fc-col-header-cell.fc-day-today {
  background: #1e3a28 !important;
}
[data-theme="dark"] .fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
  color: #5cb85c !important;
}
[data-theme="dark"] .fc .fc-day-today .fc-daygrid-day-number {
  background: #22863a !important;
  color: #fff !important;
}

/* FC Tageszahlen */
[data-theme="dark"] .fc .fc-daygrid-day-number {
  color: #c8c8c8 !important;
}

/* FC Zeitachse */
[data-theme="dark"] .fc .fc-timegrid-slot {
  border-color: #333333 !important;
}
[data-theme="dark"] .fc .fc-timegrid-slot-label-cushion {
  color: #808080 !important;
}

/* FC Wochenende */
[data-theme="dark"] .fc .fc-day-sat,
[data-theme="dark"] .fc .fc-day-sun {
  background: #252525 !important;
}

/* FC Mehr-Link */
[data-theme="dark"] .fc .fc-daygrid-more-link {
  color: #7bafd4 !important;
}

/* FC Popover */
[data-theme="dark"] .fc .fc-more-popover {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
}
[data-theme="dark"] .fc .fc-more-popover .fc-popover-header {
  background: #333333 !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .fc .fc-more-popover .fc-popover-body {
  background: #2a2a2a !important;
}

/* FC Scroll-Container */
[data-theme="dark"] .fc .fc-scroller,
[data-theme="dark"] .fc .fc-view-harness {
  background: #2a2a2a !important;
}
[data-theme="dark"] .fc .fc-daygrid-day-frame {
  background: transparent;
}

/* =====================================================
   DARK MODE – ABWESENHEITSKALENDER (custom)
   ===================================================== */

[data-theme="dark"] .kal-legend {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #c8c8c8 !important;
}
[data-theme="dark"] .year-nav {
  background: #333333 !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .year-nav .year-label {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .view-controls {
  border-color: #3a3a3a !important;
}
[data-theme="dark"] .kal-title-group h2 {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .kal-left {
  border-right-color: #3a3a3a !important;
}
[data-theme="dark"] .mitarbeiter-row {
  background: #333333 !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .mitarbeiter-row:hover {
  background: #3a3a3a !important;
}

/* Kalender-Tabelle */
[data-theme="dark"] table.kalender th {
  background: #333333 !important;
  color: #c8c8c8 !important;
  border-color: #3a3a3a !important;
}
[data-theme="dark"] table.kalender td {
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] table.kalender tbody tr:hover td:not(.wochenende):not(.feiertag) {
  background: #2d3d4a !important;
}
[data-theme="dark"] .monat-label {
  background: #333333 !important;
  color: #c8c8c8 !important;
  border-right-color: #4a4a4a !important;
}
[data-theme="dark"] .wd {
  color: #707070 !important;
}
[data-theme="dark"] .feiertagname {
  color: #5cb85c !important;
}

/* Bubbles – sattere Farben für Dark Mode */
[data-theme="dark"] .b-urlaub {
  background: #2d5a2d !important;
  color: #a5d6a7 !important;
}
[data-theme="dark"] .b-krank {
  background: #5a4a00 !important;
  color: #ffe082 !important;
}
[data-theme="dark"] .b-notdienst {
  background: #7a1a1a !important;
  color: #ffb3b3 !important;
}
[data-theme="dark"] .b-sonstiges {
  background: #1a3a5a !important;
  color: #90caf9 !important;
}

/* Wochenende / Feiertag Zellen im Kalender */
[data-theme="dark"] .wochenende {
  background: #252525 !important;
}
[data-theme="dark"] .feiertag {
  background: #1e3520 !important;
}

/* =====================================================
   DARK MODE – EINSATZPLANUNG (legend-pills, av-chips)
   ===================================================== */

/* Legenden-Pills (inline Hintergründe werden via style="" gesetzt → überschreiben) */
[data-theme="dark"] .legend-pill {
  background: #333333 !important;
  color: #e0e0e0 !important;
}

/* Verfügbarkeits-Chips: Pastell → satte Dunkelfarben */
[data-theme="dark"] .av-free {
  background: #1a3a22 !important;
  color: #6fcf8a !important;
}
[data-theme="dark"] .av-low {
  background: #1a3a2a !important;
  color: #56c896 !important;
}
[data-theme="dark"] .av-medium {
  background: #3a3000 !important;
  color: #e6c84a !important;
}
[data-theme="dark"] .av-high {
  background: #3a1e00 !important;
  color: #f0a060 !important;
}
[data-theme="dark"] .av-full {
  background: #3a1010 !important;
  color: #f08080 !important;
}
[data-theme="dark"] .av-urlaub {
  background: #2a1a3a !important;
  color: #c08ae0 !important;
}

/* Avail-Grid */
[data-theme="dark"] .avail-grid thead th {
  background: #333333 !important;
  color: #c8c8c8 !important;
  border-bottom-color: #3a3a3a !important;
}
[data-theme="dark"] .avail-grid tbody td {
  border-bottom-color: #333333 !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .avail-grid tbody tr:hover td {
  background: #333333 !important;
}
[data-theme="dark"] .avail-grid td.name-cell {
  color: #c8c8c8 !important;
}
[data-theme="dark"] .av-weekend td:not(.name-cell) {
  background: #252525 !important;
}
[data-theme="dark"] .avail-meta {
  color: #808080 !important;
}
[data-theme="dark"] .avail-section h4 {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .filter-label {
  color: #a0a0a0 !important;
}

/* =====================================================
   DARK MODE – ÜBERSICHT (Inline-Style Tabellenzellen)
   ===================================================== */

/* tr.weekend und tr.holiday – inline styles überschreiben */
[data-theme="dark"] tr.weekend td {
  background-color: #252525 !important;
  color: #a0a0a0 !important;
}
[data-theme="dark"] tr.holiday td {
  background-color: #1e3520 !important;
  color: #6fcf8a !important;
}
[data-theme="dark"] td.week-hover {
  background-color: #3a3a3a !important;
}

/* Typ-Badges (Urlaub/Abwesenheit) – Pastellfarben → Dunkel */
[data-theme="dark"] .typ-badge-urlaub {
  background: #1a2a4a !important;
  color: #7bafd4 !important;
}
[data-theme="dark"] .typ-badge-krankheit {
  background: #3a1a1a !important;
  color: #f08080 !important;
}
[data-theme="dark"] .typ-badge-berufsschule {
  background: #3a3000 !important;
  color: #e6c84a !important;
}
[data-theme="dark"] .typ-badge-kinderbetreuung {
  background: #3a1a2a !important;
  color: #e080b0 !important;
}
[data-theme="dark"] .typ-badge-fortbildung {
  background: #1a3a28 !important;
  color: #5cb85c !important;
}
[data-theme="dark"] .typ-badge-freizeitausgleich {
  background: #2a1a3a !important;
  color: #c08ae0 !important;
}
[data-theme="dark"] .typ-badge-sonderurlaub {
  background: #2a2a2a !important;
  color: #c8c8c8 !important;
}

/* Übersicht card-headers mit inline style="background:" können wir nicht überschreiben,
   aber die Karten-Typen (rot/grün/gelb) bleiben erkennbar → kein Override nötig */

/* urlaub-card in Übersicht */
[data-theme="dark"] .urlaub-card {
  background: #2a2a2a !important;
}
[data-theme="dark"] .urlaub-card .card-header {
  background: #2a2a2a !important;
  border-bottom-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .urlaub-card .card-header i {
  color: #a090f0 !important;
}

/* Urlaub.cshtml: Hintergrund-Box */
[data-theme="dark"] .p-3.rounded-3[style*="background:#f8f9ff"] {
  background: #1a1a2a !important;
  border-color: #3a3a4a !important;
}

/* Urlaub.cshtml: Berechnungs-Box (Tagesdetails nach „Berechnen") */
.text-indigo { color: #4f46e5; }
[data-theme="dark"] .berechnung-card {
  background: #1f1f2e !important;
  border-color: #3a3a4a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .berechnung-card h6,
[data-theme="dark"] .berechnung-card .fs-6,
[data-theme="dark"] .berechnung-card strong {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .berechnung-card .text-indigo {
  color: #a090f0 !important;
}
[data-theme="dark"] .berechnung-card .text-muted {
  color: #a0a0a0 !important;
}
/* Tabellenzeilen ohne Statusklasse: dunkel mit lesbarem Text */
[data-theme="dark"] .berechnung-card #tageTabelle tbody tr td {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #3a3a3a !important;
}
/* Deaktivierte Tage (Wochenende/Feiertag/außerhalb Zeitraum) */
[data-theme="dark"] .berechnung-card #tageTabelle tbody tr.text-muted td {
  background-color: #262626 !important;
  color: #888 !important;
}
/* Feiertag-Badge bleibt erkennbar */
[data-theme="dark"] .berechnung-card #tageTabelle .badge.bg-secondary {
  background: #484848 !important;
  color: #e0e0e0 !important;
}

/* Rechnungen: bg-light auf Status */
[data-theme="dark"] .badge.bg-light {
  background: #3a3a3a !important;
  color: #e0e0e0 !important;
}

/* text-bg-secondary Badges */
[data-theme="dark"] .text-bg-secondary {
  background-color: #484848 !important;
  color: #e0e0e0 !important;
}

/* =====================================================
   DARK MODE – BUTTONS
   Alle Solid-Buttons sollen identisch zum Hellmodus aussehen.
   Bootstrap's data-bs-theme="dark" ändert deren Textfarbe –
   wir setzen sie explizit zurück.
   ===================================================== */

[data-theme="dark"] .btn-primary {
  background-color: #1b6ec2 !important;
  border-color: #1861ac !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover {
  background-color: #1558a0 !important;
  border-color: #134e8e !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-success {
  background-color: #198754 !important;
  border-color: #157347 !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-success:hover {
  background-color: #146c43 !important;
  border-color: #13603c !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-warning {
  background-color: #ffc107 !important;
  border-color: #ffca2c !important;
  color: #000 !important;
}
[data-theme="dark"] .btn-warning:hover {
  background-color: #ffca2c !important;
  color: #000 !important;
}

[data-theme="dark"] .btn-danger {
  background-color: #dc3545 !important;
  border-color: #bb2d3b !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-danger:hover {
  background-color: #bb2d3b !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background-color: #5c636a !important;
  border-color: #565e64 !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-info {
  background-color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
  color: #000 !important;
}
[data-theme="dark"] .btn-info:hover {
  background-color: #31d2f2 !important;
  color: #000 !important;
}

[data-theme="dark"] .btn-light {
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
  color: #000 !important;
}

/* btn-close (X-Button in Modals) */
[data-theme="dark"] .btn-close {
  filter: invert(0) !important;
}

/* =====================================================
   DARK MODE – ÜBERSICHT (Kalenderwochen-Grid)
   ===================================================== */

/* Tages-Kacheln */
[data-theme="dark"] .kw-day {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
}
[data-theme="dark"] .kw-day.kw-weekend {
  background: #252525 !important;
}
[data-theme="dark"] .kw-day.kw-feiertag {
  background: #1e3520 !important;
}
[data-theme="dark"] .kw-day.kw-today {
  border-color: #5a8fd4 !important;
}

/* Tages-Header */
[data-theme="dark"] .kw-day-header {
  background: #333333 !important;
  border-bottom-color: #3a3a3a !important;
}
[data-theme="dark"] .kw-day.kw-weekend .kw-day-header {
  background: #2d2d2d !important;
}
[data-theme="dark"] .kw-day.kw-feiertag .kw-day-header {
  background: #253a27 !important;
}
[data-theme="dark"] .kw-day.kw-today .kw-day-header {
  background: #1a2a3a !important;
}

/* Texte im Header */
[data-theme="dark"] .kw-weekday {
  color: #909090 !important;
}
[data-theme="dark"] .kw-date-num {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .kw-date-num.kw-today-num {
  background: #5a8fd4 !important;
  color: #fff !important;
}

/* Eintrags-Chips im Kalender */
[data-theme="dark"] .kw-leistung {
  background: #1e3a20 !important;
  color: #a5d6a7 !important;
  border-left-color: #4caf50 !important;
}
[data-theme="dark"] .kw-einsatz {
  background: #1a2a3a !important;
  color: #90caf9 !important;
  border-left-color: #2196f3 !important;
}
[data-theme="dark"] .kw-ab-urlaub {
  background: #1e3a20 !important;
  color: #a5d6a7 !important;
  border-left-color: #4caf50 !important;
}
[data-theme="dark"] .kw-ab-krankheit {
  background: #3a2e00 !important;
  color: #ffe082 !important;
  border-left-color: #ff9800 !important;
}
[data-theme="dark"] .kw-ab-notdienst {
  background: #5a1a1a !important;
  color: #ffb3b3 !important;
  border-left-color: #ef5350 !important;
}
[data-theme="dark"] .kw-ab-sonstiges {
  background: #1a2a3a !important;
  color: #90caf9 !important;
  border-left-color: #2196f3 !important;
}
[data-theme="dark"] .kw-empty-day {
  color: #606060 !important;
}

/* Legenden-Boxen */
[data-theme="dark"] .kw-leg-leistung {
  background: #1e3a20 !important;
  border-color: #4caf50 !important;
}
[data-theme="dark"] .kw-leg-einsatz {
  background: #1a2a3a !important;
  border-color: #2196f3 !important;
}
[data-theme="dark"] .kw-leg-urlaub {
  background: #1e3a20 !important;
  border-color: #4caf50 !important;
}
[data-theme="dark"] .kw-leg-krankheit {
  background: #3a2e00 !important;
  border-color: #ff9800 !important;
}
[data-theme="dark"] .kw-leg-notdienst {
  background: #5a1a1a !important;
  border-color: #ef5350 !important;
}
[data-theme="dark"] .kw-leg-sonstiges {
  background: #1a2a3a !important;
  border-color: #2196f3 !important;
}

/* Info-Karten (Urlaub/Abwesenheit Pills) */
[data-theme="dark"] .urlaub-pill {
  background: #1e3520 !important;
  border-color: #4caf50 !important;
  color: #a5d6a7 !important;
}
[data-theme="dark"] .abwesenheit-pill {
  background: #3a2e00 !important;
  border-color: #ff9800 !important;
  color: #ffe082 !important;
}

/* KW-Nav */
[data-theme="dark"] .kw-nav {
  background: #333333 !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .kw-legend {
  color: #c8c8c8 !important;
}

/* section-divider */
[data-theme="dark"] .section-divider {
  border-top-color: #3a3a3a !important;
}

/* td.name-cell schwarzer Text fix */
[data-theme="dark"] td.name-cell {
  color: #c8c8c8 !important;
}
[data-theme="dark"] td.name-cell:hover {
  background-color: #1a2a3a !important;
}

/* =====================================================
   DARK MODE – EINSATZPLANUNG / KALENDER: Seitentitel
   inline style="color:#1e293b" überschreiben
   ===================================================== */
[data-theme="dark"] .plan-wrapper h2,
[data-theme="dark"] .plan-wrapper h5 {
  color: #e0e0e0 !important;
}

/* =====================================================
   DARK MODE – KALENDER: Mitarbeiterliste (Sidebar)
   ===================================================== */
[data-theme="dark"] .mitarbeiter-list {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
}
[data-theme="dark"] .mitarbeiter-item {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .mitarbeiter-item:hover {
  background: #333333 !important;
}
[data-theme="dark"] .color-box {
  border-color: #5a5a5a !important;
}

/* =====================================================
   DARK MODE – ÜBERSICHT: Wochenend-Zellen (Stundenzettel-Tabelle)
   inline style="background:#fafafa" überschreiben
   ===================================================== */
[data-theme="dark"] td.weekend {
  background: #252525 !important;
  color: #707070 !important;
}

/* kw-day Wochenend-Kacheln – Hintergrund noch etwas dunkler */
[data-theme="dark"] .kw-day.kw-weekend {
  background: #202020 !important;
}
[data-theme="dark"] .kw-day.kw-weekend .kw-day-header {
  background: #282828 !important;
}

/* Feiertags-Kacheln im Wochenkalender */
[data-theme="dark"] .kw-day.kw-feiertag {
  background: #1a2e1a !important;
}
[data-theme="dark"] .kw-day.kw-feiertag .kw-day-header {
  background: #1e3520 !important;
}

/* Stundenzettel-Tabelle: Feiertag/Wochenend-Header (inline style überschreiben) */
[data-theme="dark"] th[style*="#f1f8e9"],
[data-theme="dark"] th[style*="#f1f5e9"],
[data-theme="dark"] td[style*="#f1f8e9"] {
  background: #1a2e1a !important;
  color: #6fcf8a !important;
  border-bottom-color: #1565c0 !important;
}
[data-theme="dark"] th[style*="#f5f5f5"],
[data-theme="dark"] td[style*="#fafafa"] {
  background: #252525 !important;
  color: #707070 !important;
}
/* Heute-Spalte in der Tabelle */
[data-theme="dark"] th[style*="#e3f2fd"] {
  background: #1a2a3a !important;
  color: #90caf9 !important;
  border-bottom-color: #5a8fd4 !important;
}
/* Abwesenheit-Zellen (⛔ Einbahnstraße / Sonstiges) */
[data-theme="dark"] td[style*="#fff8e1"] {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
}

/* =====================================================
   DARK MODE – TABLE-BORDERED
   Bootstrap setzt --bs-table-border-color nicht korrekt
   im Dark Mode → alle Zell- und Außenrahmen überschreiben
   ===================================================== */

[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > :not(caption) > * {
  --bs-table-border-color: #3a3a3a;
  border-color: #3a3a3a !important;
}
[data-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: #3a3a3a !important;
  background-color: var(--bs-table-bg, #2a2a2a);
}
/* thead in bordered table */
[data-theme="dark"] .table-bordered thead th {
  background-color: #333333 !important;
  border-color: #3a3a3a !important;
  color: #c8c8c8 !important;
}
/* table-light + table-bordered Kombination */
[data-theme="dark"] .table-bordered thead.table-light th,
[data-theme="dark"] .table-bordered .table-light th {
  background-color: #333333 !important;
  border-color: #3a3a3a !important;
  color: #c8c8c8 !important;
}
/* tbody Zeilen */
[data-theme="dark"] .table-bordered tbody tr td {
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
/* striped + bordered: beide Zeilen-Typen lesbar */
[data-theme="dark"] .table-striped.table-bordered > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped.table-bordered > tbody > tr:nth-of-type(odd) > th {
  background-color: #2f2f2f !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .table-striped.table-bordered > tbody > tr:nth-of-type(even) > td,
[data-theme="dark"] .table-striped.table-bordered > tbody > tr:nth-of-type(even) > th {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

/* =====================================================
   DARK MODE – NOTDIENST: Farbige Zeilen bleiben wie im
   Light Mode. Bootstrap 5.3 setzt color via
   color:var(--bs-table-color) auf td → Variable direkt
   auf td/th überschreiben, plus background-color.
   ===================================================== */
[data-theme="dark"] .table-bordered tbody tr.table-warning td,
[data-theme="dark"] .table-bordered tbody tr.table-warning th,
[data-theme="dark"] tr.table-warning td,
[data-theme="dark"] tr.table-warning th {
  --bs-table-bg: #fff3cd !important;
  --bs-table-color: #000 !important;
  --bs-table-border-color: #ffc107 !important;
  background-color: #fff3cd !important;
  color: #000 !important;
  border-color: #ffc107 !important;
}
[data-theme="dark"] .table-bordered tbody tr.table-success td,
[data-theme="dark"] .table-bordered tbody tr.table-success th,
[data-theme="dark"] tr.table-success td,
[data-theme="dark"] tr.table-success th {
  --bs-table-bg: #d1e7dd !important;
  --bs-table-color: #000 !important;
  --bs-table-border-color: #198754 !important;
  background-color: #d1e7dd !important;
  color: #000 !important;
  border-color: #198754 !important;
}
[data-theme="dark"] .table-bordered tbody tr.mein-eintrag td,
[data-theme="dark"] .table-bordered tbody tr.mein-eintrag th,
[data-theme="dark"] tr.mein-eintrag td,
[data-theme="dark"] tr.mein-eintrag th {
  --bs-table-bg: #f5c6cb !important;
  --bs-table-color: #000 !important;
  --bs-table-border-color: #dc3545 !important;
  background-color: #f5c6cb !important;
  color: #000 !important;
  border-color: #dc3545 !important;
}
/* Alle Kind-Elemente in diesen Zeilen ebenfalls schwarz */
[data-theme="dark"] tr.table-warning td *,
[data-theme="dark"] tr.table-success td *,
[data-theme="dark"] tr.mein-eintrag td * {
  color: #000 !important;
}
/* form-select/form-control in farbigen Zeilen: heller Hintergrund + schwarze Schrift */
[data-theme="dark"] tr.table-warning td .form-select,
[data-theme="dark"] tr.table-warning td .form-control,
[data-theme="dark"] tr.table-success td .form-select,
[data-theme="dark"] tr.table-success td .form-control,
[data-theme="dark"] tr.mein-eintrag td .form-select,
[data-theme="dark"] tr.mein-eintrag td .form-control {
  background-color: #fff !important;
  border-color: #aaa !important;
  color: #000 !important;
}

/* =====================================================
   DARK MODE – NEUE RECHNUNG / NEUE SCHLUSSRECHNUNG
   ===================================================== */
/* Meta-Box (Kundeninfo) */
[data-theme="dark"] .meta-box {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
/* Ausgewählte Tabellenzeile (NeueSchlussrechnung) */
[data-theme="dark"] tr.selected-row td {
  background-color: #1a2e3a !important;
  color: #e0e0e0 !important;
}
/* Bearbeitungsfelder in Tabellenzeilen */
[data-theme="dark"] .edit-input {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
/* Choices.js – ausgewähltes Item (Pill/Tag) */
[data-theme="dark"] .choices__list--single .choices__item,
[data-theme="dark"] .choices__list--multiple .choices__item--selectable {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}
/* =====================================================
   CHOICES.JS – Fix: Chrome-Rendering-Probleme (alle Themes)

   Problem 1: Chrome rendert input[type="search"] mit -webkit-appearance:searchfield,
   was Padding ignoriert und Text am linken Rand erscheinen lässt.

   Problem 2: Chrome setzt bei color-scheme:dark intern -webkit-text-fill-color
   für Inputs basierend auf dem choices.js-Standard-Hintergrund (#fff).
   Wenn wir den Hintergrund auf dunkel überschreiben, bleibt
   -webkit-text-fill-color dunkel → unsichtbarer Text auf dunklem Grund.
   color: !important greift dabei nicht, da -webkit-text-fill-color Vorrang hat.
   ===================================================== */
.choices__input {
  -webkit-appearance: none;
  appearance: none;
}
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
  width: 100% !important;
  min-width: 100% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
.choices[data-type*='select-multiple'] .choices__inner .choices__input {
  min-width: 8ch !important;
}

/* Choices.js – Single-Select angezeigter Wert */
[data-theme="dark"] .choices__input {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  caret-color: #e0e0e0 !important;
}
[data-theme="dark"] .choices__input::placeholder {
  color: #808080 !important;
  -webkit-text-fill-color: #808080 !important;
}
/* Choices.js – Suchfeld im Dropdown */
[data-theme="dark"] .choices__list--dropdown .choices__input,
[data-theme="dark"] .choices__list[aria-expanded] .choices__input {
  background-color: #333333 !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  caret-color: #e0e0e0 !important;
}
[data-theme="dark"] .choices__list--dropdown .choices__input::placeholder,
[data-theme="dark"] .choices__list[aria-expanded] .choices__input::placeholder {
  color: #808080 !important;
  -webkit-text-fill-color: #808080 !important;
}
/* Light-Mode: Chrome kann auch hier -webkit-text-fill-color überschreiben */
[data-theme="light"] .choices__input,
[data-theme="light"] .choices__list--dropdown .choices__input,
[data-theme="light"] .choices__list[aria-expanded] .choices__input {
  color: #212529 !important;
  -webkit-text-fill-color: #212529 !important;
}

/* =====================================================
   LAYOUT-UMSCHALTUNG (Top-Nav vs. Sidebar)
   Umgeschaltet über html[data-layout="top"|"side"]
   Sidebar nur ab >= 992px aktiv – darunter immer Top-Nav
   ===================================================== */

.werkcloud-sidebar {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #dee2e6;
  overflow: hidden;
  z-index: 1020;
}

.sidebar-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #212529;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.sidebar-brand:hover {
  color: #212529;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem 0.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 0.5rem;
  border-top: 1px solid #dee2e6;
}

.sidebar-footer .dropdown-menu {
  width: calc(100% - 1rem);
}

.sidebar-link,
.sidebar-link:link,
.sidebar-link:visited,
.sidebar-link:focus,
.sidebar-link:active,
.sidebar-link:hover,
.sidebar-link.collapsed,
.sidebar-link[aria-expanded="true"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  color: #212529 !important;
  text-decoration: none !important;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  transition: background-color 0.1s ease;
}

.sidebar-link:hover {
  background-color: #f1f3f5;
}

.sidebar-link > i,
.sidebar-link > span {
  color: inherit !important;
}

.sidebar-link > i:first-child {
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-chev {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-chev {
  transform: rotate(180deg);
}

.sidebar-sub {
  padding-left: 1.75rem;
}

.sidebar-sublink,
.sidebar-sublink:link,
.sidebar-sublink:visited,
.sidebar-sublink:focus,
.sidebar-sublink:active,
.sidebar-sublink:hover {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  color: #212529 !important;
  text-decoration: none !important;
  border-radius: 0.375rem;
  font-size: 0.9rem;
}

.sidebar-sublink:hover {
  background-color: #f1f3f5;
}

.sidebar-sublink > i {
  width: 1rem;
  text-align: center;
  color: inherit !important;
  flex-shrink: 0;
}

/* Aktive Seite: dezenter Akzent (Hintergrund + leicht fetter) */
.sidebar-link.active,
.sidebar-sublink.active {
  background-color: #e9ecef;
  font-weight: 600;
}
.sidebar-link.active:hover,
.sidebar-sublink.active:hover {
  background-color: #dee2e6;
}
/* Elterngruppe mit aktivem Unterpunkt: nur leicht fetter, kein Hintergrund */
.sidebar-link.active-group {
  font-weight: 600;
}

.sidebar-brand,
.sidebar-brand:link,
.sidebar-brand:visited,
.sidebar-brand:focus,
.sidebar-brand:active,
.sidebar-brand:hover {
  color: #212529 !important;
  text-decoration: none !important;
}

/* Side-Modus: Top-Bar komplett ausblenden, Sidebar zeigen, Content nach rechts rücken */
@media (min-width: 992px) {
  html[data-layout="side"] body.has-sidebar > header {
    display: none;
  }
  html[data-layout="side"] .werkcloud-sidebar {
    display: flex;
  }
  html[data-layout="side"] .werkcloud-main-wrapper {
    padding-left: 240px;
    padding-top: 1rem;
  }
}

/* Dark-Mode Sidebar */
[data-theme="dark"] .werkcloud-sidebar {
  background-color: #242424;
  border-right-color: #3a3a3a;
}
[data-theme="dark"] .sidebar-header {
  border-bottom-color: #3a3a3a;
}
[data-theme="dark"] .sidebar-footer {
  border-top-color: #3a3a3a;
}
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .sidebar-brand:link,
[data-theme="dark"] .sidebar-brand:visited,
[data-theme="dark"] .sidebar-brand:focus,
[data-theme="dark"] .sidebar-brand:active,
[data-theme="dark"] .sidebar-brand:hover {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .sidebar-link,
[data-theme="dark"] .sidebar-link:link,
[data-theme="dark"] .sidebar-link:visited,
[data-theme="dark"] .sidebar-link:focus,
[data-theme="dark"] .sidebar-link:active {
  color: #e0e0e0 !important;
}
[data-theme="dark"] .sidebar-link:hover {
  background-color: #333333;
  color: #ffffff !important;
}
[data-theme="dark"] .sidebar-sublink,
[data-theme="dark"] .sidebar-sublink:link,
[data-theme="dark"] .sidebar-sublink:visited,
[data-theme="dark"] .sidebar-sublink:focus,
[data-theme="dark"] .sidebar-sublink:active {
  color: #c8c8c8 !important;
}
[data-theme="dark"] .sidebar-sublink:hover {
  background-color: #333333;
  color: #ffffff !important;
}
[data-theme="dark"] .sidebar-link.active,
[data-theme="dark"] .sidebar-sublink.active {
  background-color: #333333;
}
[data-theme="dark"] .sidebar-link.active:hover,
[data-theme="dark"] .sidebar-sublink.active:hover {
  background-color: #3a3a3a;
}
/* =====================================================
   MOBILE BOTTOM NAV
   ===================================================== */

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  border-top: 1px solid #dee2e6;
  display: flex;
  z-index: 1030;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.mobile-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #6c757d;
  font-size: 0.65rem;
  line-height: 1.1;
  padding: 6px 4px 8px;
  transition: color 0.15s;
}

.mobile-bottom-nav-item i {
  font-size: 1.35rem;
  line-height: 1;
}

.mobile-bottom-nav-item:hover {
  color: #0d6efd;
}

.mobile-bottom-nav-item.active {
  color: #0d6efd;
}

/* Push main content above the bar */
@media (max-width: 575px) {
  .werkcloud-main-wrapper {
    padding-bottom: 65px;
  }
}

/* Dark mode */
[data-theme="dark"] .mobile-bottom-nav {
  background: #242424;
  border-top-color: #3a3a3a;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}

[data-theme="dark"] .mobile-bottom-nav-item {
  color: #909090;
}

[data-theme="dark"] .mobile-bottom-nav-item:hover,
[data-theme="dark"] .mobile-bottom-nav-item.active {
  color: #6ea8fe;
}