:root {
  --dc-bg:         #0d1117;
  --dc-surface:    #161b22;
  --dc-surface-2:  #1c2431;
  --dc-elev:       #212b3a;
  --dc-border:     #2a3342;
  --dc-border-soft:#222a37;
  --dc-text:       #c9d4e3;
  --dc-heading:    #eef3fb;
  --dc-muted:      #8592a6;
  --dc-primary:    #0d9488;
  --dc-primary-rgb:13,148,136;
  --dc-primary-2:  #2dd4bf;
  --dc-amber:      #f5a623;
  --dc-danger:     #e5484d;
  --dc-success:    #3fb950;
  --dc-info:       #3fb6e5;

  --dc-sans:    'IBM Plex Sans', system-ui, sans-serif;
  --dc-display: 'Saira', 'IBM Plex Sans', sans-serif;
  --dc-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ---- Bootstrap 5.3 Dark-Variablen ---- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--dc-bg);
  --bs-body-color: var(--dc-text);
  --bs-emphasis-color: var(--dc-heading);
  --bs-emphasis-color-rgb: 238,243,251;
  --bs-secondary-bg: var(--dc-surface);
  --bs-secondary-bg-rgb: 22,27,34;
  --bs-tertiary-bg: var(--dc-surface-2);
  --bs-secondary-color: var(--dc-muted);
  --bs-tertiary-color: var(--dc-muted);
  --bs-border-color: var(--dc-border);
  --bs-border-color-translucent: rgba(255,255,255,.08);
  --bs-primary: var(--dc-primary);
  --bs-primary-rgb: var(--dc-primary-rgb);
  --bs-link-color: var(--dc-primary-2);
  --bs-link-color-rgb: 45,212,191;
  --bs-link-hover-color: #5eead4;
  --bs-body-font-family: var(--dc-sans);
  --bs-font-monospace: var(--dc-mono);
  --bs-heading-color: var(--dc-heading);
  --bs-emphasis-color: var(--dc-heading);
}

/* ---- Body-Atmosphaere ---- */
body {
  background-color: var(--dc-bg);
  font-family: var(--dc-sans);
  letter-spacing:.1px;
}
h1,h2,h3,h4,h5,h6,.brand-text,.card-title,.app-content-header h1 {
  font-family: var(--dc-display); color: var(--dc-heading); letter-spacing:.4px;
}

/* ---- Content-Abstände (v4-Default 0.5rem ist auf breiten Screens zu knapp) ---- */
.app-main .app-content-header { padding: 1.25rem 1.5rem .35rem; }
.app-content { padding: .75rem 1.5rem 1.5rem; }
.app-content > .container-fluid,
.app-content-header > .container-fluid { --bs-gutter-x: 0; padding-left: 0; padding-right: 0; }

/* ---- App-Header ---- */
.app-header {
  background: var(--dc-surface) !important;
  border-bottom:1px solid var(--dc-border); position:relative;
}
.app-header .nav-link { color: var(--dc-text); }
.app-header .nav-link:hover { color:#fff; }
.user-menu .nav-link span { font-family: var(--dc-mono); font-size:.82rem; color:var(--dc-muted); }

/* ---- Sidebar ---- */
.app-sidebar {
  background: #0e131b !important;
  border-right:1px solid var(--dc-border);
  --lte-sidebar-color: var(--dc-text);
  --lte-sidebar-hover-bg: rgba(255,255,255,.045);
  --lte-sidebar-hover-color: #ffffff;
  --lte-sidebar-menu-active-bg: rgba(var(--dc-primary-rgb), .16);
  --lte-sidebar-menu-active-color: #ffffff;
  --lte-sidebar-header-color: var(--dc-muted);
}
.sidebar-brand { border-bottom:1px solid var(--dc-border); background:rgba(0,0,0,.25); padding:.85rem 1rem; }
.brand-text { font-weight:700; text-transform:uppercase; letter-spacing:2.5px; font-size:.98rem; color:var(--dc-heading); }
.sidebar-menu .nav-header {
  text-transform:uppercase; letter-spacing:2px; font-size:.66rem; font-weight:600;
  color:var(--dc-muted); font-family:var(--dc-display); margin-top:.35rem;
}
.sidebar-menu > .nav-item > .nav-link { border-radius:7px; margin:2px 8px; position:relative; }
.sidebar-menu > .nav-item > .nav-link.active { box-shadow: inset 3px 0 0 var(--dc-primary); }
.sidebar-menu > .nav-item > .nav-link.active .nav-icon { color: var(--dc-primary-2); }
.nav-icon { color: var(--dc-muted); }

/* ---- Cards ---- */
.card {
  --bs-card-bg: var(--dc-surface);
  --bs-card-border-color: var(--dc-border);
  --bs-card-cap-bg: rgba(255,255,255,.02);
  border:1px solid var(--dc-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 26px rgba(0,0,0,.28);
  margin-bottom: 1rem; /* v4/BS5 hat den v3-Default entfernt -> Element-Abstand wiederherstellen */
}
.card-header { border-bottom:1px solid var(--dc-border); }
.card-header .card-title { text-transform:uppercase; letter-spacing:1px; font-size:.92rem; font-weight:600; }
.card.card-outline { border-top-width:3px; }
.card-primary.card-outline   { border-top-color:var(--dc-primary); }
.card-info.card-outline      { border-top-color:var(--dc-info); }
.card-success.card-outline   { border-top-color:var(--dc-success); }
.card-danger.card-outline    { border-top-color:var(--dc-danger); }
.card-secondary.card-outline { border-top-color:var(--dc-muted); }

/* ---- Tabellen ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dc-text);
  --bs-table-border-color: var(--dc-border-soft);
  --bs-table-striped-bg: rgba(255,255,255,.022);
  --bs-table-striped-color: var(--dc-text);
  --bs-table-hover-bg: rgba(var(--dc-primary-rgb), .09);
  --bs-table-hover-color: #fff;
}
.table thead th {
  text-transform:uppercase; letter-spacing:.6px; font-size:.72rem; font-weight:600;
  color:var(--dc-muted); background:rgba(255,255,255,.015);
  border-bottom:1px solid var(--dc-border) !important;
}
.table td { vertical-align:middle; }
.table td:first-child { font-family:var(--dc-mono); color:var(--dc-muted); }

/* ---- Badges als Status-Pills ---- */
.badge {
  font-weight:600; letter-spacing:.5px; text-transform:uppercase; font-size:.64rem;
  padding:.42em .7em; border-radius:999px;
}

/* ---- Buttons ---- */
.btn { font-weight:600; letter-spacing:.2px; transition: transform .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary   { --bs-btn-bg:var(--dc-primary); --bs-btn-border-color:var(--dc-primary); --bs-btn-hover-bg:#0b8378; --bs-btn-hover-border-color:#0b8378; --bs-btn-active-bg:#0a6c64; }
.btn-secondary { --bs-btn-bg:var(--dc-surface-2); --bs-btn-border-color:var(--dc-border); --bs-btn-color:var(--dc-text); --bs-btn-hover-bg:var(--dc-elev); --bs-btn-hover-border-color:var(--dc-primary); --bs-btn-hover-color:#fff; }
.btn-outline-secondary { --bs-btn-color:var(--dc-text); --bs-btn-border-color:var(--dc-border); --bs-btn-hover-bg:var(--dc-elev); --bs-btn-hover-border-color:var(--dc-primary); }

/* ---- Forms ---- */
.form-control, .form-select, .input-group-text {
  background-color: var(--dc-surface-2); border-color: var(--dc-border); color: var(--dc-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--dc-surface-2); border-color: var(--dc-primary); color:#fff;
  box-shadow: 0 0 0 .2rem rgba(var(--dc-primary-rgb), .25);
}
.form-control::placeholder { color: var(--dc-muted); }
.input-group-text { color: var(--dc-muted); }

/* ---- Callouts ---- */
.callout { background: var(--dc-surface); border:1px solid var(--dc-border); border-left-width:4px; border-radius:8px; margin-bottom: 1rem; }
.callout-info    { border-left-color:var(--dc-info); }
.callout-warning { border-left-color:var(--dc-amber); }
.callout-danger  { border-left-color:var(--dc-danger); }
.callout-success { border-left-color:var(--dc-success); }

/* ---- Dropdown / Modal ---- */
.dropdown-menu {
  --bs-dropdown-bg: var(--dc-surface-2);
  --bs-dropdown-border-color: var(--dc-border);
  --bs-dropdown-link-color: var(--dc-text);
  --bs-dropdown-link-hover-bg: rgba(var(--dc-primary-rgb),.15);
  --bs-dropdown-link-hover-color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.user-header { background: var(--dc-primary) !important; }
.modal-content { background: var(--dc-surface); border:1px solid var(--dc-border); }
.modal-header, .modal-footer { border-color: var(--dc-border); }

/* ---- App-Footer ---- */
.app-footer { background:var(--dc-surface); border-top:1px solid var(--dc-border); color:var(--dc-muted); font-family:var(--dc-mono); font-size:.82rem; }

/* ---- Login ---- */
.login-page {
  background: var(--dc-bg) !important;
  min-height:100vh;
}
.login-logo b, .register-logo b { font-family:var(--dc-display); text-transform:uppercase; letter-spacing:3px; color:var(--dc-heading); }
.login-box .card, .login-card-body { background:var(--dc-surface); border:1px solid var(--dc-border); box-shadow:none; }
.login-box .btn-secondary { --bs-btn-bg:var(--dc-primary); --bs-btn-border-color:var(--dc-primary); --bs-btn-color:#fff; --bs-btn-hover-bg:#0b8378; --bs-btn-hover-border-color:#0b8378; --bs-btn-hover-color:#fff; }
.login-box a { color:var(--dc-primary-2); }

/* =======================================================================
   Plugin-Theming (BS4-jQuery-Plugins unter BS5/Dark)
   ======================================================================= */

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--dc-surface-2) !important; border:1px solid var(--dc-border) !important; color:var(--dc-text) !important; border-radius:6px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate { color: var(--dc-muted) !important; }
.page-link { background:var(--dc-surface-2); border-color:var(--dc-border); color:var(--dc-text); }
.page-link:hover { background:var(--dc-elev); color:#fff; }
.page-item.active .page-link { background:var(--dc-primary); border-color:var(--dc-primary); }
.page-item.disabled .page-link { background:var(--dc-surface); border-color:var(--dc-border); color:var(--dc-muted); }

/* Summernote */
.note-editor.note-frame { border-color:var(--dc-border); background:var(--dc-surface); }
.note-toolbar { background:var(--dc-surface-2) !important; border-bottom:1px solid var(--dc-border); }
.note-editable { background:var(--dc-surface) !important; color:var(--dc-text) !important; }
.note-btn, .note-editor .btn-light { background:var(--dc-surface-2) !important; border-color:var(--dc-border) !important; color:var(--dc-text) !important; }
.note-editor .note-statusbar { background:var(--dc-surface-2); border-top:1px solid var(--dc-border); }
.note-placeholder { color:var(--dc-muted) !important; }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown { background:var(--dc-surface-2) !important; border-color:var(--dc-border) !important; color:var(--dc-text); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color:var(--dc-text); }
.select2-results__option { background:var(--dc-surface-2); color:var(--dc-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--dc-primary); color:#fff; }
.select2-search__field { background:var(--dc-surface) !important; color:var(--dc-text) !important; border-color:var(--dc-border) !important; }

/* daterangepicker / Kalender */
.daterangepicker { background:var(--dc-surface-2); border-color:var(--dc-border); color:var(--dc-text); }
.daterangepicker .calendar-table { background:var(--dc-surface-2); border-color:var(--dc-border); }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background:var(--dc-elev); }
.daterangepicker td.active, .daterangepicker td.active:hover { background:var(--dc-primary); }
.daterangepicker:after { border-bottom-color:var(--dc-surface-2); }
.daterangepicker:before { border-bottom-color:var(--dc-border); }

/* Feste Hell-/Dunkel-Utilities im Dark-Theme lesbar halten
   (uebernommen aus dem ehemaligen v4-compat.css) */
[data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* ==========================================================================
 * Widgets: Notizen & Taschenrechner (Overlay-Popover)
 * ========================================================================== */
.pn-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 340px;
  min-width: 280px;
  min-height: 200px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--dc-surface);
  color: var(--dc-text);
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  z-index: 1035; /* ueber Content, unter Bootstrap-Modals (1055) */
  overflow: hidden;
  font-family: var(--dc-sans);
}
.pn-widget-transitioning { transition: width .2s ease, height .2s ease; }
.pn-widget-wide { width: 750px !important; }
.pn-widget[hidden] { display: none; }
.pn-widget-calc { width: 280px; }

/* Custom Scrollbars for Widget */
.pn-widget ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.pn-widget ::-webkit-scrollbar-track {
  background: transparent;
}
.pn-widget ::-webkit-scrollbar-thumb {
  background: var(--dc-border);
  border-radius: 10px;
}
.pn-widget ::-webkit-scrollbar-thumb:hover {
  background: var(--dc-muted);
}
.pn-widget * {
  scrollbar-width: thin;
  scrollbar-color: var(--dc-border) transparent;
}

.pn-widget-resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--dc-border) 50%);
  z-index: 10;
}

.pn-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--dc-surface-2);
  border-bottom: 1px solid var(--dc-border);
  cursor: move;
  user-select: none;
  touch-action: none;
}
.pn-widget-title {
  font-family: var(--dc-display);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dc-heading);
  font-size: .95rem;
}
.pn-widget-actions { display: flex; gap: 4px; }
.pn-widget-btn {
  border: 0;
  background: transparent;
  color: var(--dc-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.pn-widget-btn:hover { background: var(--dc-elev); color: var(--dc-heading); }

.pn-widget-body {
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- Notizen ---- */
.pn-note-section-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dc-muted);
  margin-bottom: 6px;
}
.pn-note-list { display: flex; flex-direction: column; gap: 8px; }
.pn-note-empty { color: var(--dc-muted); font-size: .85rem; padding: 4px 0; }
.pn-note {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border-soft);
  border-radius: 8px;
  padding: 8px 10px;
}
.pn-note-shared { border-left: 3px solid var(--dc-primary); }
.pn-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.pn-note-title { font-weight: 600; color: var(--dc-heading); font-size: .9rem; word-break: break-word; }
.pn-note-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.pn-note-act {
  border: 0;
  background: transparent;
  color: var(--dc-muted);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
}
.pn-note-act:hover { background: var(--dc-elev); color: var(--dc-heading); }
.pn-note-act.pn-danger:hover { color: var(--dc-danger); }
.pn-note-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .85rem;
  color: var(--dc-text);
  margin-top: 4px;
  max-height: 8em;
  overflow-y: auto;
}
.pn-note-meta { font-size: .72rem; color: var(--dc-muted); margin-top: 6px; }

.pn-note-editor, .pn-note-share {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
.pn-share-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pn-share-item {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
}
.pn-share-item:hover { background: var(--dc-elev); }

/* Mode Layouts */
.pn-notes-container { display: flex; flex-direction: column; }
.pn-notes-container.mode-normal { flex-direction: row; gap: 12px; }
.pn-notes-container.mode-normal #notes-list-wrap {
  flex: 0 0 260px;
  overflow-y: auto;
  border-right: 1px solid var(--dc-border);
  padding-right: 12px;
}
.pn-notes-container.mode-normal .pn-notes-editor-wrap {
  flex: 1;
  overflow-y: auto;
}
.pn-notes-container.mode-normal .pn-note-content {
  display: none;
}
.pn-notes-container.mode-compact #notes-list-wrap { order: 2; }
.pn-notes-container.mode-compact .pn-notes-editor-wrap { order: 1; }

/* ---- Taschenrechner ---- */
.pn-calc-display {
  width: 100%;
  text-align: right;
  font-family: var(--dc-mono);
  font-size: 1.6rem;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--dc-bg);
  color: var(--dc-heading);
  border: 1px solid var(--dc-border);
  border-radius: 8px;
  outline: none;
}
.pn-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pn-calc-key {
  border: 1px solid var(--dc-border-soft);
  background: var(--dc-surface-2);
  color: var(--dc-heading);
  font-family: var(--dc-mono);
  font-size: 1.05rem;
  padding: 12px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pn-calc-key:hover { background: var(--dc-elev); }
.pn-calc-key:active { background: var(--dc-border); }
.pn-calc-op { color: var(--dc-primary-2); }
.pn-calc-fn { color: var(--dc-amber); }
.pn-calc-eq {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
}
.pn-calc-eq:hover { background: var(--dc-primary-2); }
.pn-calc-zero { grid-column: span 1; }

/* Collapse-Toggle: Chevron dreht sich beim Aufklappen */
[data-bs-toggle="collapse"] .fa-chevron-down { transition: transform .2s ease; }
[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

@media (max-width: 480px) {
  .pn-widget, .pn-widget-calc {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   Stempeluhr-Panel (partials/duty_panel.php)
   Eigenes Profil und - mit Recht 14 - das Mitgliederprofil.
   ========================================================================== */
.stempel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stempel-stat {
  position: relative;
  overflow: hidden;
  border-radius: .9rem;
  padding: 1.25rem 1.4rem;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.stempel-stat--blue  { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.stempel-stat--green { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.stempel-stat--red   { background: linear-gradient(135deg, #f43f5e 0%, #b91c1c 100%); }
.stempel-stat__value {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.stempel-stat__label {
  font-size: 1rem;
  font-weight: 500;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stempel-stat__bg {
  position: absolute;
  right: -.5rem;
  bottom: -.75rem;
  font-size: 5.5rem;
  opacity: .18;
  transform: rotate(-8deg);
}
.stempel-current {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 4px solid #6c757d;
}
.stempel-current--active {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, .08);
}
.stempel-current__label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
}
.stempel-current--active .stempel-current__label i { color: #22c55e; }
.stempel-current:not(.stempel-current--active) .stempel-current__label i { color: #6c757d; }
.stempel-current__value {
  font-size: 1.9rem;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .stempel-stats { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Modals: <form> darf die Ketten von Bootstrap nicht zerreissen
   --------------------------------------------------------------------------
   modal-dialog-scrollable haengt an ZWEI Ketten, und ein <form> dazwischen
   bricht je nach Position die eine oder die andere:
   
   1. HOEHE.  .modal-dialog-scrollable { height: calc(100% - margin*2) } - also
      Prozent. Bezugspunkt muss .modal sein (height:100%). Sitzt ein <form>
      dazwischen, rechnet 100% gegen height:auto -> der Dialog waechst ueber den
      Bildschirm, und weil .modal selbst overflow-y:auto hat, scrollt die SEITE
      statt des Modal-Inhalts.
   
   2. FLEX.  .modal-content ist eine Flex-Spalte, damit .modal-body schrumpfen
      kann und Kopf/Fuss stehenbleiben. Sitzt das <form> dort drin, ist es das
      einzige Flex-Kind und die Kette endet dort -> der Footer mit dem
      Speichern-Button wird aus dem Bild geschoben.
   
   Beide Regeln zusammen machen jede der beiden Verschachtelungen tragfaehig.
   Betrifft nicht nur den Rechte-Dialog: person.php, directory.php und das
   Fahrzeug-Modal nutzen Variante 1, zwoelf weitere Modals Variante 2.
   ========================================================================== */
.modal > form { height: 100%; }

.modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

/* ==========================================================================
   Rechte-Dialog (#modal-edit-role)
   --------------------------------------------------------------------------
   modal-dialog-scrollable scrollt normalerweise den GANZEN modal-body - dann
   wandern Anzeigename und Beschreibung mit weg. Gewollt ist wie im Vorbild:
   Kopf, Fuss und die Grunddaten links stehen fest, nur die Rechte scrollen.
   Dafuer den Body am Scrollen hindern und die Spalten selbst zu Scrollboxen
   machen. Nur ab lg - darunter stehen die Spalten untereinander und der Body
   scrollt wieder als Ganzes, sonst haette man zwei Scrollbereiche im Handy.
   ========================================================================== */
@media (min-width: 992px) {
  .role-body { overflow: hidden; }
  .role-body > .row { height: 100%; }
  .role-col {
    max-height: 100%;
    overflow-y: auto;
    /* Platz fuer die Scrollleiste, damit die Karten nicht drunterlaufen */
    padding-right: .75rem;
  }
}

/* Ein Recht als kompakte Kachel: Name und Key in EINER Zeile, Beschreibung
   klein darunter. Vorher standen sie dreizeilig - der Dialog wurde doppelt
   so hoch wie noetig. */
.perm-item {
  border: 1px solid var(--dc-border-soft);
  border-radius: .5rem;
  padding: .45rem .6rem .45rem 2rem;
  margin-bottom: 0;
  transition: border-color .12s ease, background-color .12s ease;
}
.perm-item .form-check-input { margin-left: -1.4rem; margin-top: .2rem; }
.perm-item:has(.form-check-input:checked) {
  border-color: rgba(var(--dc-primary-rgb), .5);
  background: rgba(var(--dc-primary-rgb), .07);
}
.perm-item__name { display: block; font-size: .82rem; line-height: 1.3; }
.perm-item__name code { font-size: .72rem; }
.perm-item__desc {
  display: block;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--dc-muted);
  margin-top: .1rem;
}
#modal-edit-role .card-header .form-check-label { font-size: .85rem; }

/* ==========================================================================
   Dashboard: KPI-Kacheln (ruhige Flat-Tiles im Karten-Look)
   --------------------------------------------------------------------------
   Ersetzen die AdminLTE-info-boxes, die als einzige Komponente im Panel
   ungethemt blieben. Border/Schatten spiegeln .card, der Farbakzent sitzt im
   Icon-Chip statt in einer bunten Fortschrittsleiste.
   ========================================================================== */
.dash-stat {
  display: flex; gap: .9rem; align-items: flex-start; height: 100%;
  background: var(--dc-surface); border: 1px solid var(--dc-border);
  border-radius: .6rem; padding: 1rem 1.1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 26px rgba(0,0,0,.28);
}
.dash-stat:hover { border-color: rgba(var(--dc-primary-rgb), .5); }
.dash-stat__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: .55rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
  color: var(--dc-primary-2); background: rgba(var(--dc-primary-rgb), .12);
}
.dash-stat--danger  .dash-stat__icon { color: var(--dc-danger);  background: rgba(229,72,77,.14); }
.dash-stat--info    .dash-stat__icon { color: var(--dc-info);    background: rgba(63,182,229,.14); }
.dash-stat--success .dash-stat__icon { color: var(--dc-success); background: rgba(63,185,80,.14); }
.dash-stat--amber   .dash-stat__icon { color: var(--dc-amber);   background: rgba(245,166,35,.14); }
.dash-stat--muted   .dash-stat__icon { color: var(--dc-muted);   background: rgba(133,146,166,.14); }
.dash-stat__body  { min-width: 0; flex: 1 1 auto; }
.dash-stat__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .8px;
                    color: var(--dc-muted); font-weight: 600; margin-bottom: .15rem; }
.dash-stat__value { font-family: var(--dc-display); font-size: 1.5rem; font-weight: 700;
                    line-height: 1.15; color: var(--dc-heading);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stat__value--sm { font-size: 1.1rem; }        /* Text-Werte (Name, Kennzeichen) */
.dash-stat__value small { font-size: .8rem; color: var(--dc-muted); font-weight: 500; }
.dash-stat__foot { margin-top: .4rem; font-size: .78rem; }
.dash-stat__foot a { text-decoration: none; }
.dash-stat__foot .btn-link { font-weight: 600; }

/* Kopfzeile mit Begruessung */
.dash-greeting { color: var(--dc-muted); font-size: .9rem; margin-top: .35rem; }
@media (min-width: 576px) { .dash-greeting { margin-top: 0; } }
.dash-greeting b { color: var(--dc-text); font-weight: 600; }
.dash-greeting .sep { opacity: .5; margin: 0 .45rem; }

/* Termin-Kacheln (Naechste Termine in voller Breite als Raster) */
.dash-event {
  height: 100%; background: var(--dc-surface-2); border: 1px solid var(--dc-border-soft);
  border-left-width: 3px; border-radius: .5rem; padding: .6rem .75rem;
}
.dash-event__title { font-weight: 600; color: var(--dc-heading); }

/* ==========================================================================
   Systemeinstellungen (/settings)
   --------------------------------------------------------------------------
   Die Tabs sitzen in einer Karte (wie person.php/vehicle.php), die Kacheln
   darin liegen also Karte-in-Karte. Jede .card bringt oben einen kraeftigen
   Schlagschatten mit - zwei uebereinander sehen nach Pappkarton aus. Die
   Kacheln heben sich darum ueber die Flaeche ab statt ueber einen Schatten.
   ========================================================================== */
.settings-tile {
  box-shadow: none;
  background: var(--dc-surface-2);
}

/* Aktionsleiste am Fuss eines Tabs. Ein card-footer waere hier falsch: der
   Pane hat keine eigene Karte mehr, der Footer wuerde die Shell-Karte
   abschliessen statt den Tab. Also die Trennlinie selbst ziehen - buendig
   bis an den Rand des card-body. */
.settings-actions {
  margin: 1rem calc(var(--bs-card-spacer-x) * -1) calc(var(--bs-card-spacer-y) * -1);
  padding: .75rem var(--bs-card-spacer-x);
  border-top: 1px solid var(--dc-border);
  background: rgba(0, 0, 0, .15);
  border-radius: 0 0 .5rem .5rem;
}