/* ═══════════════════════════════════════════════════════════
   Controlling App – Design System (Qonto-Inspired)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. CSS Custom Properties (Design Tokens) ──────────── */
:root {
  /* Primärfarbe */
  --ca-primary: #76b5c5;
  --ca-primary-hover: #5fa0b0;
  --ca-primary-light: #e8f4f8;
  --ca-primary-rgb: 118, 181, 197;

  /* Hintergründe */
  --ca-bg: #F5F5F7;
  --ca-surface: #FFFFFF;
  --ca-surface-alt: #FAFAFA;

  /* Rahmen */
  --ca-border: #E8E8ED;
  --ca-border-strong: #D1D1D6;

  /* Text */
  --ca-text: #1A1A2E;
  --ca-text-muted: #6B7280;
  --ca-text-light: #9CA3AF;

  /* Semantische Farben */
  --ca-success: #2ecc71;
  --ca-success-light: #d5f5e3;
  --ca-success-dark: #27ae60;
  --ca-danger: #f26d6d;
  --ca-danger-light: #fde8e8;
  --ca-danger-dark: #e05555;
  --ca-warning: #F59E0B;
  --ca-warning-light: #FEF3C7;
  --ca-info: #3B82F6;
  --ca-info-light: #DBEAFE;

  /* Navigation */
  --ca-nav-bg: #2c3e50;
  --ca-nav-text: rgba(255, 255, 255, 0.7);
  --ca-nav-text-active: #FFFFFF;

  /* Schatten */
  --ca-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ca-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ca-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --ca-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* Radien */
  --ca-radius-sm: 6px;
  --ca-radius: 8px;
  --ca-radius-lg: 12px;
  --ca-radius-xl: 16px;

  /* Übergänge */
  --ca-transition: 0.15s ease;
}


/* ── 2. Base / Reset ───────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--ca-bg) !important;
  color: var(--ca-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--ca-primary-light);
  color: var(--ca-text);
}

a { color: var(--ca-primary); }
a:hover { color: var(--ca-primary-hover); }


/* ── 3. Navigation & Layout ─────────────────────────────── */

/* ── Desktop Top-Nav (≥992px) ── */
.ca-topnav {
  background: var(--ca-nav-bg);
  padding: 0.6rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin-bottom: 1.5rem;
}
.ca-topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  gap: 1rem;
}
.ca-topnav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ca-topnav-brand img { height: 82px; transition: height var(--ca-transition); }

.ca-brand-divider {
  display: block; width: 1px; height: 40px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 1rem; flex-shrink: 0;
}
.ca-brand-title {
  display: flex; flex-direction: column;
  line-height: 1; gap: 0.3rem;
}
.ca-brand-main {
  font-size: 1.9rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: linear-gradient(135deg, #ffffff 0%, #a8d8e4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ca-brand-sub {
  font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ca-primary);
  text-align: center;
}

/* Horizontale Tab-Navigation */
.ca-nav-tabs {
  gap: 0.25rem;
  flex-wrap: nowrap;
}
.ca-nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ca-radius) !important;
  padding: 0.5rem 1rem;
  font-size: 0.9rem; font-weight: 500;
  transition: all var(--ca-transition);
  white-space: nowrap;
}
.ca-nav-tabs .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}
.ca-nav-tabs .nav-link.active {
  color: #fff !important;
  background: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important;
  box-shadow: 0 2px 8px rgba(118, 181, 197, 0.35);
}

/* Inkognito- & Preview-Buttons (im Top-Nav und Offcanvas) */
#btnInkognito {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--ca-radius);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem; font-weight: 500;
  transition: all var(--ca-transition);
  display: flex; align-items: center; gap: 0.4rem;
  cursor: pointer;
}
#btnInkognito:hover {
  background: rgba(255, 255, 255, 0.08); color: #fff;
}
#btnInkognito.active {
  background-color: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important; color: #fff;
}

/* Hauptbereich */
.ca-main {
  padding: 1.5rem;
  min-height: 100vh;
}

/* ── Mobile Header (nur <992px) ── */
.ca-mobile-header {
  display: none;
  background: var(--ca-nav-bg);
  padding: 0.65rem 1rem;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  position: sticky; top: 0; z-index: 1020;
  margin-bottom: 1rem;
}
.ca-mobile-header img { height: 54px; }
.ca-mobile-header .ca-brand-main { font-size: 1.4rem; }
.ca-mobile-header .ca-brand-sub { font-size: 0.78rem; }

.ca-hamburger {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--ca-radius);
  padding: 0.35rem 0.6rem; font-size: 1.1rem;
  cursor: pointer; display: flex; align-items: center;
}
.ca-hamburger:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ── Offcanvas (Mobile Sidebar) ── */
#sidebarOffcanvas {
  width: var(--ca-sidebar-width) !important;
  background: var(--ca-nav-bg) !important;
}
#sidebarOffcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem;
}
#sidebarOffcanvas .offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.7;
}

/* Vertikale Nav-Links im Offcanvas */
.ca-sidebar-nav {
  list-style: none; margin: 0;
  padding: 1rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.ca-sidebar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ca-radius) !important;
  padding: 0.65rem 1rem;
  font-size: 0.9rem; font-weight: 500;
  transition: all var(--ca-transition);
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 0.6rem;
}
.ca-sidebar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}
.ca-sidebar-nav .nav-link.active {
  color: #fff !important;
  background: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important;
  box-shadow: 0 2px 8px rgba(118, 181, 197, 0.35);
}
.ca-sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ca-sidebar-footer .btn {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--ca-radius);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem; font-weight: 500;
  width: 100%;
  display: flex; align-items: center; gap: 0.4rem;
}
.ca-sidebar-footer .btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ca-sidebar-footer .btn.active {
  background-color: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important; color: #fff;
}

/* Responsive: <992px → Top-Nav aus, Mobile-Header ein */
@media (max-width: 991.98px) {
  .ca-topnav { display: none; }
  .ca-mobile-header { display: flex; }
  .ca-main { padding: 1rem; }
}
@media (min-width: 992px) {
  .ca-mobile-header { display: none !important; }
}


/* ── 4. Karten ─────────────────────────────────────────── */
.ca-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-xs);
  padding: 1.5rem;
  transition: box-shadow var(--ca-transition);
}

.ca-card:hover {
  box-shadow: var(--ca-shadow-sm);
}

.ca-card-header {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ca-text);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ca-border);
}

/* KPI Karten */
.ca-kpi-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-xs);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all var(--ca-transition);
}

.ca-kpi-card:hover {
  box-shadow: var(--ca-shadow-sm);
  transform: translateY(-1px);
}

.ca-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ca-primary);
}

.ca-kpi-card.kpi-success::before { background: var(--ca-success); }
.ca-kpi-card.kpi-danger::before { background: var(--ca-danger); }
.ca-kpi-card.kpi-warning::before { background: var(--ca-warning); }
.ca-kpi-card.kpi-info::before { background: var(--ca-info); }

.ca-kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ca-text-muted);
  margin-bottom: 0.5rem;
}

.ca-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ca-text);
  line-height: 1.2;
}

.ca-kpi-value.text-success { color: var(--ca-success) !important; }
.ca-kpi-value.text-danger  { color: var(--ca-danger)  !important; }
.ca-kpi-value.text-warning { color: var(--ca-warning) !important; }

.ca-kpi-sub {
  font-size: 0.8rem;
  color: var(--ca-text-muted);
  margin-top: 0.25rem;
}


/* ── 5. Tabellen ───────────────────────────────────────── */
.ca-table {
  font-size: 0.9rem;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.ca-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ca-text-muted);
  background: var(--ca-surface-alt);
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--ca-border);
  border-top: none;
  white-space: nowrap;
}

.ca-table thead th:first-child { border-radius: var(--ca-radius) 0 0 0; }
.ca-table thead th:last-child { border-radius: 0 var(--ca-radius) 0 0; }

.ca-table tbody tr {
  transition: background-color var(--ca-transition);
}

.ca-table tbody tr:nth-child(even):not(.weekend-row) {
  background-color: var(--ca-surface-alt);
}

.ca-table tbody tr:hover:not(.weekend-row) {
  background-color: var(--ca-primary-light);
}

.ca-table tbody td {
  padding: 0.5rem 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--ca-border);
  color: var(--ca-text);
}

.ca-table tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--ca-border-strong);
  color: var(--ca-text);
  padding: 0.65rem 0.5rem;
}

/* Sortierbare Spalten */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: ' ⇅'; opacity: 0.4; font-size: .75em; }
th.sort-asc::after  { content: ' ▲'; opacity: 1; color: var(--ca-primary); }
th.sort-desc::after { content: ' ▼'; opacity: 1; color: var(--ca-primary); }

/* Weekend-Zeilen */
.weekend-row td {
  background-color: var(--ca-surface-alt) !important;
  color: var(--ca-text-muted);
  border-left: 3px solid var(--ca-border-strong);
}

/* Fehlende Einträge: vergangene Arbeitstage ohne Buchung */
.ca-row-fehlend td {
  background-color: rgba(239, 68, 68, 0.07) !important;
  border-left: 3px solid var(--ca-danger) !important;
}
.ca-row-fehlend:hover td {
  background-color: rgba(239, 68, 68, 0.14) !important;
}

/* Aktionen-Spalte */
.td-actions { white-space: nowrap; text-align: center; }
.td-actions .btn { padding: 0.25rem 0.45rem; font-size: 0.95rem; line-height: 1; }

/* Zeiterfassung-Tabelle Spezifika */
#eintragTabelle { font-size: 0.9rem; border-collapse: separate; border-spacing: 0; }
#eintragTabelle thead th {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ca-text-muted);
  background: var(--ca-surface-alt);
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--ca-border);
}
#eintragTabelle tbody tr { transition: background-color var(--ca-transition); }
#eintragTabelle tbody tr:nth-child(even):not(.weekend-row) { background-color: var(--ca-surface-alt); }
#eintragTabelle tbody tr:hover:not(.weekend-row) { background-color: var(--ca-primary-light); filter: none; }
#eintragTabelle tbody td {
  padding: 0.5rem 0.5rem; vertical-align: middle;
  --bs-table-bg: transparent; background-color: inherit;
  border-bottom: 1px solid var(--ca-border);
}
#eintragTabelle td.td-typ { text-align: center; width: 1%; white-space: nowrap; }
#eintragTabelle th:nth-child(4) { text-align: center; width: 1%; }
#eintragTabelle td:nth-child(6),
#eintragTabelle th:nth-child(6),
#eintragTabelle td:nth-child(7),
#eintragTabelle th:nth-child(7) { text-align: right; }
#eintragTabelle th:last-child {
  text-align: center; width: 1%;
  border-left: 1px solid var(--ca-border);
}
#eintragTabelle tbody td.td-actions {
  border-left: 1px solid var(--ca-border) !important;
  text-align: center;
}
#eintragTabelle tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--ca-border-strong);
}


/* ── 6. Formulare & Inputs ─────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--ca-radius);
  border-color: var(--ca-border);
  font-size: 0.9rem;
  transition: border-color var(--ca-transition), box-shadow var(--ca-transition);
}

.form-control:focus, .form-select:focus {
  border-color: var(--ca-primary);
  box-shadow: 0 0 0 3px rgba(var(--ca-primary-rgb), 0.15);
}

.form-control-sm, .form-select-sm {
  border-radius: var(--ca-radius);
}

.form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ca-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}


/* ── 7. Buttons ────────────────────────────────────────── */
.ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--ca-radius);
  padding: 0.5rem 1rem;
  transition: all var(--ca-transition);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.ca-btn-primary {
  background: var(--ca-primary);
  color: #fff;
  border-color: var(--ca-primary);
}
.ca-btn-primary:hover {
  background: var(--ca-primary-hover);
  border-color: var(--ca-primary-hover);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--ca-primary-rgb), 0.3);
}

.ca-btn-ghost {
  background: transparent;
  color: var(--ca-primary);
  border-color: var(--ca-border);
}
.ca-btn-ghost:hover {
  background: var(--ca-primary-light);
  border-color: var(--ca-primary);
  color: var(--ca-primary-hover);
}

.ca-btn-ghost-danger {
  background: transparent;
  color: var(--ca-danger);
  border-color: var(--ca-border);
}
.ca-btn-ghost-danger:hover {
  background: var(--ca-danger-light);
  border-color: var(--ca-danger);
  color: var(--ca-danger-dark);
}

.ca-btn-success {
  background: var(--ca-success);
  color: #fff;
  border-color: var(--ca-success);
}
.ca-btn-success:hover {
  background: var(--ca-success-dark);
  border-color: var(--ca-success-dark);
  color: #fff;
}

.ca-btn-ghost-success {
  background: transparent;
  color: var(--ca-success);
  border-color: var(--ca-border);
}
.ca-btn-ghost-success:hover {
  background: var(--ca-success-light);
  border-color: var(--ca-success);
  color: var(--ca-success-dark);
}

.ca-btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
}

/* Bootstrap Button Overrides für konsistentes Styling */
.btn-primary {
  background-color: var(--ca-primary);
  border-color: var(--ca-primary);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: var(--ca-primary-hover);
  border-color: var(--ca-primary-hover);
  box-shadow: 0 2px 8px rgba(var(--ca-primary-rgb), 0.3);
}

.btn-success {
  background-color: var(--ca-primary);
  border-color: var(--ca-primary);
}
.btn-success:hover, .btn-success:active, .btn-success:focus {
  background-color: var(--ca-primary-hover);
  border-color: var(--ca-primary-hover);
}

.btn-outline-primary {
  color: var(--ca-primary);
  border-color: var(--ca-primary);
}
.btn-outline-primary:hover {
  background-color: var(--ca-primary);
  border-color: var(--ca-primary);
  color: #fff;
}

.btn {
  border-radius: var(--ca-radius);
}


/* ── 8. Badges ─────────────────────────────────────────── */
.ca-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--ca-radius-sm);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.ca-badge-urlaub { background: #FEF3C7; color: #92400E; }
.ca-badge-krankheit { background: #FEE2E2; color: #DC2626; }
.ca-badge-feiertag { background: #E5E7EB; color: #4B5563; }
.ca-badge-abwesend { background: #DBEAFE; color: #2563EB; }
.ca-badge-reklamation { background: #FEE2E2; color: #991B1B; }
.ca-badge-leerlauf { background: #FEF3C7; color: #B45309; }
.ca-badge-success { background: var(--ca-success-light); color: var(--ca-success-dark); }
.ca-badge-danger { background: var(--ca-danger-light); color: var(--ca-danger-dark); }
.ca-badge-info { background: var(--ca-info-light); color: #1D4ED8; }


/* ── 9. Modals ─────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--ca-radius-xl) !important;
  box-shadow: var(--ca-shadow-lg);
  overflow: hidden;
}

.modal-header {
  background: var(--ca-surface) !important;
  border-bottom: 1px solid var(--ca-border) !important;
  padding: 1.25rem 1.5rem;
  color: var(--ca-text) !important;
}

.modal-header .modal-title,
.modal-header .h5 {
  font-weight: 600;
  color: var(--ca-text) !important;
}

.modal-header .btn-close {
  filter: none;
  opacity: 0.5;
}
.modal-header .btn-close:hover { opacity: 1; }
.modal-header .btn-close-white { filter: none; }

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  background: var(--ca-surface) !important;
  border-top: 1px solid var(--ca-border) !important;
  padding: 1rem 1.5rem;
}


/* ── 10. Diagramme (einklappbar) ───────────────────────── */
.ca-chart-panel {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-xs);
  overflow: hidden;
}

.ca-chart-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ca-text);
  background: var(--ca-surface);
  border: none;
  width: 100%;
  transition: background var(--ca-transition);
  user-select: none;
}

.ca-chart-toggle:hover {
  background: var(--ca-surface-alt);
}

.ca-chart-toggle .bi {
  transition: transform 0.2s ease;
  font-size: 0.85rem;
  color: var(--ca-text-muted);
}

.ca-chart-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.ca-chart-body {
  padding: 1rem 1.25rem 1.25rem;
}


/* ── 11. Utility-Klassen ───────────────────────────────── */
.ca-profit-positive {
  background: var(--ca-success-light) !important;
  color: var(--ca-success-dark) !important;
  font-weight: 600;
  border-left: 3px solid var(--ca-success) !important;
}

.ca-profit-negative {
  background: var(--ca-danger-light) !important;
  color: var(--ca-danger-dark) !important;
  font-weight: 600;
  border-left: 3px solid var(--ca-danger) !important;
}

.ca-profit-zero {
  color: var(--ca-text-muted) !important;
}

.ca-text-success { color: var(--ca-success) !important; }
.ca-text-danger { color: var(--ca-danger) !important; }
.ca-text-muted { color: var(--ca-text-muted) !important; }
.ca-text-primary { color: var(--ca-primary) !important; }

.ca-bg-surface { background: var(--ca-surface) !important; }
.ca-bg-surface-alt { background: var(--ca-surface-alt) !important; }

/* Toggle-Form Arrow */
#btnToggleForm::after { content: ' \u25B2'; }
#btnToggleForm.collapsed::after { content: ' \u25BC'; }

/* Schnellbuchung */
#schnellbuchungGruppe .schnell-btn,
#editSchnellbuchungGruppe .edit-schnell {
  transition: opacity var(--ca-transition), box-shadow var(--ca-transition);
  border-radius: var(--ca-radius);
}
#schnellbuchungGruppe.hat-auswahl .schnell-btn:not(.aktiv-schnell),
#editSchnellbuchungGruppe.hat-auswahl .edit-schnell:not(.aktiv-schnell) { opacity: 0.35; }
#schnellbuchungGruppe .schnell-btn.aktiv-schnell,
#editSchnellbuchungGruppe .edit-schnell.aktiv-schnell {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ca-primary);
}
#schnellbuchungGruppe .schnell-btn.aktiv-schnell::after,
#editSchnellbuchungGruppe .edit-schnell.aktiv-schnell::after { content: ' \u2713'; }

/* Segmented Control (Controlling Sub-Nav) */
.ca-segmented {
  display: inline-flex;
  background: var(--ca-surface-alt);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 3px;
  gap: 2px;
}

.ca-segmented .btn {
  border: none;
  border-radius: calc(var(--ca-radius) - 2px);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
  color: var(--ca-text-muted);
  background: transparent;
  transition: all var(--ca-transition);
}

.ca-segmented .btn:hover {
  color: var(--ca-text);
  background: rgba(var(--ca-primary-rgb), 0.06);
}

.ca-segmented .btn.active {
  color: #fff;
  background: var(--ca-primary);
  box-shadow: 0 1px 3px rgba(var(--ca-primary-rgb), 0.3);
}

/* Avatar-Kreis */
.ca-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ca-primary-light);
  color: var(--ca-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Section Headers */
.ca-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ca-text);
  margin-bottom: 1rem;
}

/* Pagination */
.ca-pagination .btn {
  border-color: var(--ca-border);
  color: var(--ca-text-muted);
  border-radius: var(--ca-radius);
}
.ca-pagination .btn:hover {
  border-color: var(--ca-primary);
  color: var(--ca-primary);
  background: var(--ca-primary-light);
}

/* Toast Overrides */
.toast {
  border-radius: var(--ca-radius-lg);
  border: none;
  box-shadow: var(--ca-shadow);
}

/* Bootstrap Overrides für Design-System */
.nav-pills .nav-link.active {
  background-color: var(--ca-primary) !important;
}

.card {
  border-radius: var(--ca-radius-lg);
  border-color: var(--ca-border);
  box-shadow: var(--ca-shadow-xs);
}

.card-header {
  background: var(--ca-surface);
  border-bottom-color: var(--ca-border);
}

tbody tr:hover { filter: none; }

/* Alert Overrides */
.alert-info {
  background: var(--ca-info-light);
  border-color: var(--ca-info);
  color: #1E40AF;
  border-radius: var(--ca-radius-lg);
}

/* Progress Bar Override */
.progress {
  border-radius: var(--ca-radius);
  background: var(--ca-surface-alt);
  border: 1px solid var(--ca-border);
}


/* ── 12. Tab: Zeitauswertung – Akte Modal Tabs ─────────── */
#akteTabs .nav-link {
  color: var(--ca-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  transition: all var(--ca-transition);
}

#akteTabs .nav-link:hover {
  color: var(--ca-text);
  border-bottom-color: var(--ca-border-strong);
}

#akteTabs .nav-link.active {
  color: var(--ca-primary) !important;
  border-bottom-color: var(--ca-primary) !important;
  background: transparent !important;
}


/* ── 13. Abwesenheits-Accordion (Akte Modal) ────────────── */
.ca-absence-section {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.ca-absence-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--ca-surface-alt);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ca-text);
  transition: background var(--ca-transition);
}

.ca-absence-toggle:hover {
  background: var(--ca-primary-light);
}

.ca-absence-chevron {
  transition: transform 0.22s ease;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ca-text-muted);
}

.ca-absence-toggle.collapsed .ca-absence-chevron {
  transform: rotate(-90deg);
}

.ca-absence-count {
  display: inline-flex;
  align-items: center;
  background: var(--ca-primary-light);
  color: var(--ca-primary);
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.ca-absence-body {
  padding: 0.75rem 1rem 1rem;
  background: var(--ca-surface);
}

/* KPI-Karten im Abwesenheiten-Header: inline Input-Felder */
.ca-absence-kpi-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ca-absence-kpi-input input,
.ca-absence-kpi-input select {
  flex: 1;
  min-width: 0;
}

/* ── 14. Mobile (max 767px) ────────────────────────────── */
@media (max-width: 767.98px) {
  #eintragSearch { width: 100% !important; }

  .ca-card { padding: 1rem; }
  .ca-kpi-card { padding: 0.85rem; }
  .ca-kpi-value { font-size: 1.2rem; }

  /* Zeiterfassung-Tabelle → kompakte Karten auf Mobile */
  #eintragTabelle thead { display: none; }
  #eintragTabelle tfoot { display: none; }
  #eintragTabelle tbody tr {
    display: grid;
    grid-template-columns: 1fr auto 3.8rem;
    grid-template-rows: auto auto auto;
    column-gap: 0.5rem;
    row-gap: 0.18rem;
    align-items: center;
    margin-bottom: 0.65rem;
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius-lg);
    padding: 0.75rem 0 0.75rem 0.9rem;
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-xs);
    overflow: hidden; /* Aktionsspalte an border-radius binden */
  }
  #eintragTabelle tbody tr.weekend-row {
    border-left: 3px solid var(--ca-border-strong);
    background: var(--ca-surface-alt);
  }
  #eintragTabelle tbody td {
    border: none !important;
    padding: 0.05rem 0;
    font-size: 0.85rem;
  }
  #eintragTabelle tbody td::before { display: none; }
  /* # (lfd. Nr.) ausblenden */
  #eintragTabelle tbody td:nth-child(1) { display: none; }
  /* Mitarbeiter: Zeile 1 links, fett */
  #eintragTabelle tbody td:nth-child(2) {
    grid-row: 1; grid-column: 1;
    font-weight: 600; font-size: 0.9rem;
    color: var(--ca-text);
  }
  /* Stunden: Zeile 1 Mitte-rechts, fett */
  #eintragTabelle tbody td:nth-child(6) {
    grid-row: 1; grid-column: 2;
    font-weight: 700; font-size: 0.9rem;
    white-space: nowrap; text-align: right;
    color: var(--ca-text);
  }
  /* Kunde: Zeile 2 links */
  #eintragTabelle tbody td:nth-child(5) {
    grid-row: 2; grid-column: 1;
    font-size: 0.82rem; color: var(--ca-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Datum: Zeile 2 rechts, klein/gedimmt */
  #eintragTabelle tbody td:nth-child(3) {
    grid-row: 2; grid-column: 2;
    font-size: 0.76rem; color: var(--ca-text-muted);
    text-align: right; white-space: nowrap;
  }
  /* Typ-Badge: Zeile 3, Spalten 1–2 – ausblenden wenn leer */
  #eintragTabelle tbody td:nth-child(4) {
    grid-row: 3; grid-column: 1 / span 2;
    font-size: 0.82rem; padding-top: 0.1rem;
  }
  #eintragTabelle tbody td:nth-child(4):empty { display: none; }
  /* Aktions-Spalte: echte 3. Grid-Spalte, kein position:absolute */
  #eintragTabelle tbody td.td-actions {
    grid-row: 1 / span 3;
    grid-column: 3;
    align-self: stretch;
    margin: -0.75rem 0; /* füllt das vertikale Padding des <tr> aus */
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--ca-border);
    background: var(--ca-surface-alt);
    padding: 0.4rem 0;
    min-width: 3.8rem;
  }
  #eintragTabelle tbody td.td-actions .btn {
    min-height: 40px; min-width: 34px;
    padding: 0.15rem 0.3rem; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
  }
  #eintragTabelle tbody td:nth-child(7) { display: none; }
  #eintragTabelle tbody td:nth-child(8) { display: none; }

  #dateiInfo { flex-wrap: wrap; gap: 0.5rem; }
  #dateiInfo .form-select { width: 100% !important; }
  #dateiInfo .btn { flex: 1 1 auto; }

  .card-body > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .card-body > .d-flex.justify-content-between > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  #chefTbody .btn-sm,
  .btn-group-sm .btn,
  #dateiInfo .btn { min-height: 44px; padding: 0.5rem 0.75rem; }

  .table-sm:not(#eintragTabelle) td,
  .table-sm:not(#eintragTabelle) th { padding: 0.3rem 0.2rem; font-size: 0.8rem; }

  #controllingSubNav { flex-wrap: wrap; gap: 0.25rem; }
  .ca-segmented { flex-wrap: wrap; }

  #akteTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #akteTabs .nav-link { white-space: nowrap; font-size: 0.78rem; padding: 0.35rem 0.6rem; }

  #topSummaryContainer .col-sm-3 { flex: 0 0 50%; max-width: 50%; }

  #detailTabelle th:first-child,
  #detailTabelle td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: inherit;
  }

  .position-relative .small.fw-bold { font-size: 0.65rem; }

  /* Modals auf Mobile: Fullscreen */
  .modal-dialog { margin: 0; max-width: 100%; }
  .modal-content { border-radius: 0 !important; min-height: 100vh; }
}


/* ── 14. Tablet (768px – 991px) ────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  #eintragSearch { width: 180px !important; }
  #dateiInfo { flex-wrap: wrap; gap: 0.5rem; }

  #eintragTbody .btn-sm,
  #chefTbody .btn-sm,
  .btn-group-sm .btn { min-height: 44px; padding: 0.4rem 0.65rem; }

  #eintragTabelle th:nth-child(8),
  #eintragTabelle td:nth-child(8) { display: none; }
  #eintragTabelle { font-size: 0.85rem; }
}


/* ── 15. Mitarbeiter-Ansicht (Mobile-First) ───────────── */

.ca-ma-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px;
  background: var(--ca-surface); border-bottom: 1px solid var(--ca-border);
}
.ca-ma-topbar-title {
  font-weight: 700; font-size: 1rem; color: var(--ca-text);
}

.ca-ma-content {
  padding: 60px 12px 80px; max-width: 600px; margin: 0 auto;
}

.ca-ma-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  display: flex; height: 64px;
  background: var(--ca-surface); border-top: 1px solid var(--ca-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.ca-ma-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: none; background: none; color: var(--ca-text-muted);
  font-size: 0.65rem; font-weight: 500; padding: 4px 0; cursor: pointer;
  transition: color 0.15s;
}
.ca-ma-nav-item i { font-size: 1.3rem; }
.ca-ma-nav-item.active { color: var(--ca-primary); }
.ca-ma-nav-item:hover { color: var(--ca-primary); }

.ca-avatar-lg {
  width: 56px; height: 56px; font-size: 1.5rem; line-height: 56px;
}

.ca-ma-rapport-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--ca-radius);
  background: var(--ca-surface); border: 1px solid var(--ca-border);
  cursor: pointer; transition: border-color 0.15s;
}
.ca-ma-rapport-card:hover { border-color: var(--ca-primary); }
.ca-ma-rapport-card .ca-ma-rc-info { flex: 1; min-width: 0; }
.ca-ma-rapport-card .ca-ma-rc-info .fw-bold { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-ma-rapport-card .ca-ma-rc-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── 16. Print ─────────────────────────────────────────── */
@media print {
  .ca-sidebar, .ca-mobile-header, #btnInkognito, .td-actions, .ca-chart-panel,
  .btn, .pagination, .modal { display: none !important; }
  .ca-main { margin-left: 0 !important; padding: 0 !important; }
  .ca-card { box-shadow: none; border: 1px solid #ddd; }
  .ca-kpi-card { box-shadow: none; border: 1px solid #ddd; }
  body { background: #fff !important; }
}