/* Datei: style.css - Allgemeine Stylesheets. */

body {background-color: rgba(237,237,237,1.00);}

/* Darkmode Basis */
body.darkmode {
    background-color: #181a1b !important;
    color: #e0e0e0 !important;
}

/* Navbar/Header */
body.darkmode .navbar,
body.darkmode .navbar-light,
body.darkmode .navbar-expand-lg,
body.darkmode .navbar-brand,
body.darkmode .navbar-nav .nav-link,
body.darkmode .navbar-text {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.darkmode .navbar-nav .nav-link.active,
body.darkmode .navbar-nav .nav-link:focus,
body.darkmode .navbar-nav .nav-link:hover {
    color: #fff !important;
    background-color: #2c3035 !important;
}
body.darkmode .navbar-toggler {
    border-color: #444 !important;
}
body.darkmode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(224,224,224,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Dropdown-Menü im Header */
body.darkmode .dropdown-menu {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.darkmode .dropdown-item {
    color: #e0e0e0 !important;
}
body.darkmode .dropdown-item:hover,
body.darkmode .dropdown-item:focus {
    background-color: #2c3035 !important;
    color: #fff !important;
}
body.darkmode .dropdown-divider {
    border-top: 1px solid #444 !important;
}

/* Switch/Checkbox im Dropdown */
body.darkmode .form-check-input {
    background-color: #23272b !important;
    border-color: #888 !important;
}
body.darkmode .form-check-label {
    color: #e0e0e0 !important;
}

/* Buttons im Header/Darkmode */
body.darkmode .btn-link,
body.darkmode .btn-link:focus,
body.darkmode .btn-link:hover {
    color: #e0e0e0 !important;
}

/* ...existing code... */
body.darkmode .card,
body.darkmode .modal-content,
body.darkmode .form-control,
body.darkmode .table,
body.darkmode .dropdown-menu {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
}
body.darkmode .btn-primary {
    background-color: #375a7f !important;
    border-color: #375a7f !important;
}
body.darkmode .btn-danger {
    background-color: #c9302c !important;
    border-color: #c9302c !important;
}
body.darkmode .btn-success {
    background-color: #00bc8c !important;
    border-color: #00bc8c !important;
}
body.darkmode .form-control,
body.darkmode input,
body.darkmode textarea {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.darkmode .table-bordered,
body.darkmode .table-hover {
    border-color: #444 !important;
}
body.darkmode .modal-content {
    background-color: #23272b !important;
}
body.darkmode .alert {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.darkmode .dropdown-menu {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
}
body.darkmode .dropdown-item {
    color: #e0e0e0 !important;
}
body.darkmode .dropdown-item:hover,
body.darkmode .dropdown-item:focus {
    background-color: #2c3035 !important;
    color: #fff !important;
}
.tooltip .tooltip-inner {
  text-align: left;
}

/* Tooltip-Inhalt anpassen */
.tooltip .tooltip-inner {
  background-color: #f8f9fa;   /* hellgrauer Hintergrund */
  color: #000;                 /* schwarzer Text */
  border: 1px solid #ccc;      /* feiner grauer Rahmen */
  border-radius: 0.25rem;      /* leichte Rundung */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); /* dezenter Schatten */
  text-align: left;            /* optional: linksbündig */
  padding: 0.5rem 0.75rem;     /* etwas mehr Platz */
}

/* ====================================================================
   Datei: edit_user_permissions.css
   Enthält alle Styles für die Berechtigungs-Matrix-Seite
   ==================================================================== */

/* ---------- 1. Tri-State Checkbox ---------------------------------- */
.tri-state           { position:relative; width:20px; height:20px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.tri-state-display   { width:20px; height:20px; border:1px solid #dee2e6; background:#fff; border-radius:3px; display:flex; align-items:center; justify-content:center; }
.tri-state[data-state="1"] .tri-state-display { background:#198754; border-color:#198754; }
.tri-state[data-state="1"] .tri-state-display::after { content:"✓"; color:#fff; }
.tri-state[data-state="0"] .tri-state-display { background:#dc3545; border-color:#dc3545; }
.tri-state[data-state="0"] .tri-state-display::after { content:"×"; color:#fff; }
.tri-state[data-state=""] .tri-state-display::after { content:"×"; color:white; opacity: 0; }
.tri-state[data-disabled] .tri-state-display { background:#ccc; border-color:#ccc; opacity:.6; cursor:not-allowed; }

/* ---------- 2. Tabellen-Layout ------------------------------------- */
.permissions-table td.permission-cell { 
    position: relative; 
    white-space: nowrap; 
    text-align: center; 
    vertical-align: middle; 
}

/* ---------- 3. Header-Spalten -------------------------------------- */
.permissions-table th { position:relative; }
.permissions-table th .color-overlay { position:absolute; inset:0; opacity:.3; z-index:1; pointer-events:none; }

/* Permission-Header-Text - standardmäßig gedreht */
.perm-header-text { 
    font-size:.95em; 
    font-weight:500; 
    line-height:1.1; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    letter-spacing:.02em; 
    position:relative; 
    z-index:2; 
}

/* Nur in normaler Ansicht gedreht - ABER NICHT die Gruppen-Header */
.permissions-table:not(.transposed) .perm-header-text {
    writing-mode:sideways-lr; 
    text-orientation:mixed; 
}

/* Gruppen-Header bleiben IMMER normal (auch in normaler Ansicht) */
.permissions-table .group-header .perm-header-text,
.permissions-table .group-header th {
    writing-mode: normal !important;
    text-orientation: initial !important;
}

/* In transponierter Ansicht (Permission × User): Header normal */
.permissions-table.transposed .perm-header-text {
    writing-mode: normal !important;
    text-orientation: initial !important;
}

/* In transponierter Ansicht: Checkboxen und Shields nebeneinander */
.permissions-table.transposed .permission-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.permissions-table.transposed .permission-cell .tri-state {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.permissions-table.transposed .permission-cell .role-permission-indicator {
    display: inline-block;
    vertical-align: middle;
}

/* In transponierter Ansicht: Username und Name untereinander */
.permissions-table.transposed th {
    writing-mode: initial;
    text-orientation: initial;
    min-width: 80px;
    padding: 8px 4px;
    vertical-align: top;
}

.permissions-table.transposed th small {
    display: block;
    margin-top: 4px;
    font-size: 0.75em;
    line-height: 1.2;
}

/* Admin-Icon inline vor Username */
.permissions-table.transposed .admin-label {
    display: inline;
    margin-top: 0;
    margin-right: 4px;
    margin-left: 0;
    padding: 0;
    font-size: 0.9em;
}

/* ====================================================================
   ZEBRA-STREIFEN + GRUPPENFÄRBUNG SYSTEM
   ==================================================================== */

/* NORMALE ANSICHT: Vertikale Zebra-Streifen (spaltenweise) */
.permissions-table:not(.transposed) th,
.permissions-table:not(.transposed) td {
    background-color: #e9ecef !important; /* Standard: dunkleres Grau */
}

.permissions-table:not(.transposed) th:nth-child(odd),
.permissions-table:not(.transposed) td:nth-child(odd),
.permissions-table:not(.transposed) th:first-child,
.permissions-table:not(.transposed) td:first-child {
    background-color: #ffffff !important; /* Ungerade Spalten und erste Spalte: Weiß */
}

/* TRANSPONIERTE ANSICHT: Horizontale Zebra-Streifen (zeilenbasiert) */
.permissions-table.transposed tr:nth-child(odd) {
    background-color: #ffffff !important; /* Ungerade Zeilen: Weiß */
}

.permissions-table.transposed tr:nth-child(even) {
    background-color: #e9ecef !important; /* Gerade Zeilen: dunkleres Grau */
}

.permissions-table.transposed th,
.permissions-table.transposed td {
    background-color: inherit !important; /* Zellen erben Zeilen-Hintergrund */
}

/* Gruppenfärbung wird ÜBER die Zebra-Streifen gelegt */
/* TRANSPONIERTE ANSICHT: Zeilenbasierte Gruppenfärbung (behält Zebra-Basis) */

/* Page Access Gruppe - Grün */
.permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(odd) {
    background: linear-gradient(rgba(144, 238, 144, 0.15), rgba(144, 238, 144, 0.15)), #ffffff !important;
}

.permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(even) {
    background: linear-gradient(rgba(144, 238, 144, 0.2), rgba(144, 238, 144, 0.2)), #e9ecef !important;
}

/* API Gruppe - Blau */
.permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(odd) {
    background: linear-gradient(rgba(135, 206, 235, 0.15), rgba(135, 206, 235, 0.15)), #ffffff !important;
}

.permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(even) {
    background: linear-gradient(rgba(135, 206, 235, 0.2), rgba(135, 206, 235, 0.2)), #e9ecef !important;
}

/* Allow Change Gruppe - Orange */
.permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(odd) {
    background: linear-gradient(rgba(255, 165, 0, 0.15), rgba(255, 165, 0, 0.15)), #ffffff !important;
}

.permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(even) {
    background: linear-gradient(rgba(255, 165, 0, 0.2), rgba(255, 165, 0, 0.2)), #e9ecef !important;
}

/* NORMALE ANSICHT: Gruppenfärbung nur für die erste Spalte (Permission-Namen) */
/* In normaler Ansicht werden nur die Permissions-Zellen in der ersten Spalte eingefärbt */

/* Page Access Gruppe - erste Spalte */
.permissions-table:not(.transposed) tr[data-perm-group^="page_access_"] th:first-child,
.permissions-table:not(.transposed) tr[data-perm-group^="page_access_"] td:first-child {
    background: linear-gradient(rgba(144, 238, 144, 0.25), rgba(144, 238, 144, 0.25)), #ffffff !important;
}

/* API Gruppe - erste Spalte */
.permissions-table:not(.transposed) tr[data-perm-group^="api_"] th:first-child,
.permissions-table:not(.transposed) tr[data-perm-group^="api_"] td:first-child {
    background: linear-gradient(rgba(135, 206, 235, 0.25), rgba(135, 206, 235, 0.25)), #ffffff !important;
}

/* Allow Change Gruppe - erste Spalte */
.permissions-table:not(.transposed) tr[data-perm-group^="allow_change_"] th:first-child,
.permissions-table:not(.transposed) tr[data-perm-group^="allow_change_"] td:first-child {
    background: linear-gradient(rgba(255, 165, 0, 0.25), rgba(255, 165, 0, 0.25)), #ffffff !important;
}

/* Checkbox-Zellen erben ihre Hintergrundfarbe (Zebra-Streifen bleiben erhalten) */
.permissions-table td.permission-cell {
    background-color: inherit !important;
}

/* TRANSPONIERTE ANSICHT: Leichte Gruppenfärbung für Checkbox-Zellen */
/* Page Access Checkbox-Zellen - leichte Grünfärbung */
.permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(odd) td.permission-cell {
    background: linear-gradient(rgba(144, 238, 144, 0.15), rgba(144, 238, 144, 0.15)), #ffffff !important;
}

.permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(even) td.permission-cell {
    background: linear-gradient(rgba(144, 238, 144, 0.18), rgba(144, 238, 144, 0.18)), #e9ecef !important;
}

/* API Checkbox-Zellen - leichte Blaufärbung */
.permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(odd) td.permission-cell {
    background: linear-gradient(rgba(135, 206, 235, 0.15), rgba(135, 206, 235, 0.15)), #ffffff !important;
}

.permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(even) td.permission-cell {
    background: linear-gradient(rgba(135, 206, 235, 0.18), rgba(135, 206, 235, 0.18)), #e9ecef !important;
}

/* Allow Change Checkbox-Zellen - leichte Orangefärbung */
.permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(odd) td.permission-cell {
    background: linear-gradient(rgba(255, 165, 0, 0.15), rgba(255, 165, 0, 0.15)), #ffffff !important;
}

.permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(even) td.permission-cell {
    background: linear-gradient(rgba(255, 165, 0, 0.18), rgba(255, 165, 0, 0.18)), #e9ecef !important;
}

/* Header-Gruppenfärbung ist jetzt in den Zebra-Regeln oben integriert */

/* ---------- 4. Kollabierbare Gruppen ------------------------------- */
.group-header {
    background: #ffffff !important; /* Weiß statt grau */
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    position: sticky;
    z-index: 10;
    /* Zellenränder für Gruppen-Header */
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

.group-header:hover {
    background: #f8f9fa !important;
}

.group-header .group-toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    margin-right: 8px;
    transform: rotate(0deg); /* Standard: nach unten zeigender Pfeil (ausgeklappt) */
}

.group-header.collapsed .group-toggle-icon {
    transform: rotate(-90deg); /* Eingeklappt: nach rechts zeigender Pfeil */
}

.group-header .group-description {
    font-size: 0.9em;
    font-weight: normal;
    color: #6c757d;
    margin-left: 8px;
}

/* Gruppen-Header bekommen auch Pseudo-Element für Zellenränder */
.group-header th {
    position: relative;
}

.group-header th::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
    z-index: 3 !important;
    pointer-events: none;
}

/* Gruppen-Zeilen/Spalten verstecken wenn eingeklappt */
.permissions-table tr[data-perm-group].group-collapsed,
.permissions-table th[data-perm-group].group-collapsed,
.permissions-table td[data-perm-group].group-collapsed {
    display: none;
}

/* Transponierte Ansicht: Gruppen-Header als Zeilen */
.permissions-table.transposed .group-header th {
    text-align: left;
    padding: 8px 12px;
}

/* Normale Ansicht: Gruppen-Header als Spalten - NICHT GEDREHT */
.permissions-table:not(.transposed) .group-header th {
    writing-mode: normal !important;
    text-orientation: initial !important;
    text-align: center;
    padding: 12px 8px;
}

/* Dark Mode Unterstützung für Gruppen-Header */
body.darkmode .group-header {
    background: #23272b !important; /* Dunkler im Dark Mode */
    border-color: #495057;
    color: #e0e0e0;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4) !important;
}

body.darkmode .group-header:hover {
    background: #2c3035 !important;
}

body.darkmode .group-header .group-description {
    color: #adb5bd;
}

body.darkmode .group-header th::after {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5) !important;
}

/* ====================================================================
   Toastr Anpassungen - Abstand zum oberen Browserrand
   ==================================================================== */

/* Toast-Container nach unten verschieben, damit Navbar nicht überdeckt wird */
#toast-container {
    top: 70px !important; /* Standard navbar height + margin */
}

/* Für kleinere Bildschirme (Mobile) */
@media (max-width: 768px) {
    #toast-container {
        top: 120px !important; /* Mehr Abstand für mobile navbar */
    }
}

/* Spezifische Anpassung für toast-top-right Position */
#toast-container.toast-top-right {
    top: 70px !important;
    right: 12px !important;
}

/* Darkmode Anpassungen für Toasts */
body.darkmode #toast-container .toast {
    background-color: #23272b !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

body.darkmode #toast-container .toast-success {
    background-color: #00bc8c !important;
}

body.darkmode #toast-container .toast-error {
    background-color: #c9302c !important;
}

body.darkmode #toast-container .toast-warning {
    background-color: #f39c12 !important;
}

body.darkmode #toast-container .toast-info {
    background-color: #375a7f !important;
}

/* ====================================================================
   UNGENUTZTE / DOPPELTE REGELN – zur Kontrolle vorerst behalten
   --------------------------------------------------------------------
Bereinigt: Zebra-Streifen und Gruppenfärbung sind jetzt kombiniert
===================================================================== */

/* ====================================================================
   ZELLEN-INNENRAND FÜR BESSERE OPTIK
   ==================================================================== */

/* Weißer 2px Innenrand für alle Tabellenzellen und Header */
.permissions-table th,
.permissions-table td {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* Spezielle Behandlung für Header mit color-overlay - höhere z-index */
.permissions-table th {
    position: relative;
}

.permissions-table th::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
    z-index: 3 !important; /* Über dem color-overlay (z-index: 1) und perm-header-text (z-index: 2) */
    pointer-events: none;
}

/* Zusätzlich: Header bekommen den gleichen Innenrand */
.permissions-table thead th,
.permissions-table tbody th,
.permissions-table th:first-child {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* Alternativ: Für noch subtileren Effekt können Sie auch border verwenden */
/* 
.permissions-table th,
.permissions-table td {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
*/

/* Darkmode-Anpassungen für Permissions-Tabelle */
body.darkmode .permissions-table th,
body.darkmode .permissions-table td {
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Darkmode: Zebra-Streifen für normale Ansicht (spaltenbasiert) */
body.darkmode .permissions-table:not(.transposed) th,
body.darkmode .permissions-table:not(.transposed) td {
    background-color: #2c3035 !important; /* Dunkleres Grau */
}

body.darkmode .permissions-table:not(.transposed) th:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) td:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) th:first-child,
body.darkmode .permissions-table:not(.transposed) td:first-child {
    background-color: #23272b !important; /* Dunkler */
}

/* Darkmode: Zebra-Streifen für transponierte Ansicht (zeilenbasiert) */
body.darkmode .permissions-table.transposed tr:nth-child(odd) {
    background-color: #23272b !important; /* Dunkler */
}

body.darkmode .permissions-table.transposed tr:nth-child(even) {
    background-color: #2c3035 !important; /* Dunkleres Grau */
}

/* Darkmode: Gruppenfärbung für transponierte Ansicht */
body.darkmode .permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(odd) {
    background: linear-gradient(rgba(144, 238, 144, 0.2), rgba(144, 238, 144, 0.2)), #23272b !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(even) {
    background: linear-gradient(rgba(144, 238, 144, 0.25), rgba(144, 238, 144, 0.25)), #2c3035 !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(odd) {
    background: linear-gradient(rgba(135, 206, 235, 0.2), rgba(135, 206, 235, 0.2)), #23272b !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(even) {
    background: linear-gradient(rgba(135, 206, 235, 0.25), rgba(135, 206, 235, 0.25)), #2c3035 !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(odd) {
    background: linear-gradient(rgba(255, 165, 0, 0.2), rgba(255, 165, 0, 0.2)), #23272b !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(even) {
    background: linear-gradient(rgba(255, 165, 0, 0.25), rgba(255, 165, 0, 0.25)), #2c3035 !important;
}

/* Darkmode: Gruppenfärbung für normale Ansicht (erste Spalte) */
body.darkmode .permissions-table:not(.transposed) tr[data-perm-group^="page_access_"] th:first-child,
body.darkmode .permissions-table:not(.transposed) tr[data-perm-group^="page_access_"] td:first-child {
    background: linear-gradient(rgba(144, 238, 144, 0.3), rgba(144, 238, 144, 0.3)), #23272b !important;
}

body.darkmode .permissions-table:not(.transposed) tr[data-perm-group^="api_"] th:first-child,
body.darkmode .permissions-table:not(.transposed) tr[data-perm-group^="api_"] td:first-child {
    background: linear-gradient(rgba(135, 206, 235, 0.3), rgba(135, 206, 235, 0.3)), #23272b !important;
}

body.darkmode .permissions-table:not(.transposed) tr[data-perm-group^="allow_change_"] th:first-child,
body.darkmode .permissions-table:not(.transposed) tr[data-perm-group^="allow_change_"] td:first-child {
    background: linear-gradient(rgba(255, 165, 0, 0.3), rgba(255, 165, 0, 0.3)), #23272b !important;
}

/* Darkmode: Leichte Gruppenfärbung für Checkbox-Zellen in transponierter Ansicht */
body.darkmode .permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(odd) td.permission-cell {
    background: linear-gradient(rgba(144, 238, 144, 0.18), rgba(144, 238, 144, 0.18)), #23272b !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="page_access_"]:nth-child(even) td.permission-cell {
    background: linear-gradient(rgba(144, 238, 144, 0.22), rgba(144, 238, 144, 0.22)), #2c3035 !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(odd) td.permission-cell {
    background: linear-gradient(rgba(135, 206, 235, 0.18), rgba(135, 206, 235, 0.18)), #23272b !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="api_"]:nth-child(even) td.permission-cell {
    background: linear-gradient(rgba(135, 206, 235, 0.22), rgba(135, 206, 235, 0.22)), #2c3035 !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(odd) td.permission-cell {
    background: linear-gradient(rgba(255, 165, 0, 0.18), rgba(255, 165, 0, 0.18)), #23272b !important;
}

body.darkmode .permissions-table.transposed tr[data-perm-group^="allow_change_"]:nth-child(even) td.permission-cell {
    background: linear-gradient(rgba(255, 165, 0, 0.22), rgba(255, 165, 0, 0.22)), #2c3035 !important;
}

/* Darkmode: Schwarze/dunkle Innenränder statt weiße */
body.darkmode .permissions-table th,
body.darkmode .permissions-table td {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4) !important;
}

body.darkmode .permissions-table th::after {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5) !important;
}

body.darkmode .permissions-table thead th,
body.darkmode .permissions-table tbody th,
body.darkmode .permissions-table th:first-child {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4) !important;
}

/* NORMALE ANSICHT: Spaltenbasierte Gruppenfärbung (Permission-Spalten) */
/* Diese Regeln kommen NACH den Zebra-Streifen und überschreiben sie */

/* Page Access Gruppe - ungerade Spalten (weiße Basis) */
.permissions-table:not(.transposed) th[data-perm-group^="page_access_"]:nth-child(odd),
.permissions-table:not(.transposed) td[data-perm-group^="page_access_"]:nth-child(odd),
.permissions-table:not(.transposed) th[data-perm-group^="page_access_"]:first-child,
.permissions-table:not(.transposed) td[data-perm-group^="page_access_"]:first-child {
    background: linear-gradient(rgba(144, 238, 144, 0.12), rgba(144, 238, 144, 0.12)), #ffffff !important;
}

/* Page Access Gruppe - gerade Spalten (graue Basis) */
.permissions-table:not(.transposed) th[data-perm-group^="page_access_"]:nth-child(even):not(:first-child),
.permissions-table:not(.transposed) td[data-perm-group^="page_access_"]:nth-child(even):not(:first-child) {
    background: linear-gradient(rgba(144, 238, 144, 0.12), rgba(144, 238, 144, 0.12)), #e9ecef !important;
}

/* API Gruppe - ungerade Spalten (weiße Basis) */
.permissions-table:not(.transposed) th[data-perm-group^="api_"]:nth-child(odd),
.permissions-table:not(.transposed) td[data-perm-group^="api_"]:nth-child(odd),
.permissions-table:not(.transposed) th[data-perm-group^="api_"]:first-child,
.permissions-table:not(.transposed) td[data-perm-group^="api_"]:first-child {
    background: linear-gradient(rgba(135, 206, 235, 0.12), rgba(135, 206, 235, 0.12)), #ffffff !important;
}

/* API Gruppe - gerade Spalten (graue Basis) */
.permissions-table:not(.transposed) th[data-perm-group^="api_"]:nth-child(even):not(:first-child),
.permissions-table:not(.transposed) td[data-perm-group^="api_"]:nth-child(even):not(:first-child) {
    background: linear-gradient(rgba(135, 206, 235, 0.12), rgba(135, 206, 235, 0.12)), #e9ecef !important;
}

/* Allow Change Gruppe - ungerade Spalten (weiße Basis) */
.permissions-table:not(.transposed) th[data-perm-group^="allow_change_"]:nth-child(odd),
.permissions-table:not(.transposed) td[data-perm-group^="allow_change_"]:nth-child(odd),
.permissions-table:not(.transposed) th[data-perm-group^="allow_change_"]:first-child,
.permissions-table:not(.transposed) td[data-perm-group^="allow_change_"]:first-child {
    background: linear-gradient(rgba(255, 165, 0, 0.12), rgba(255, 165, 0, 0.12)), #ffffff !important;
}

/* Allow Change Gruppe - gerade Spalten (graue Basis) */
.permissions-table:not(.transposed) th[data-perm-group^="allow_change_"]:nth-child(even):not(:first-child),
.permissions-table:not(.transposed) td[data-perm-group^="allow_change_"]:nth-child(even):not(:first-child) {
    background: linear-gradient(rgba(255, 165, 0, 0.12), rgba(255, 165, 0, 0.12)), #e9ecef !important;
}

/* Darkmode: Spaltenbasierte Gruppenfärbung für normale Ansicht */
/* Page Access Gruppe - ungerade Spalten (dunkle Basis) */
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="page_access_"]:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="page_access_"]:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="page_access_"]:first-child,
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="page_access_"]:first-child {
    background: linear-gradient(rgba(144, 238, 144, 0.15), rgba(144, 238, 144, 0.15)), #23272b !important;
}

/* Page Access Gruppe - gerade Spalten (dunklere Basis) */
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="page_access_"]:nth-child(even):not(:first-child),
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="page_access_"]:nth-child(even):not(:first-child) {
    background: linear-gradient(rgba(144, 238, 144, 0.15), rgba(144, 238, 144, 0.15)), #2c3035 !important;
}

/* API Gruppe - ungerade Spalten (dunkle Basis) */
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="api_"]:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="api_"]:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="api_"]:first-child,
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="api_"]:first-child {
    background: linear-gradient(rgba(135, 206, 235, 0.15), rgba(135, 206, 235, 0.15)), #23272b !important;
}

/* API Gruppe - gerade Spalten (dunklere Basis) */
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="api_"]:nth-child(even):not(:first-child),
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="api_"]:nth-child(even):not(:first-child) {
    background: linear-gradient(rgba(135, 206, 235, 0.15), rgba(135, 206, 235, 0.15)), #2c3035 !important;
}

/* Allow Change Gruppe - ungerade Spalten (dunkle Basis) */
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="allow_change_"]:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="allow_change_"]:nth-child(odd),
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="allow_change_"]:first-child,
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="allow_change_"]:first-child {
    background: linear-gradient(rgba(255, 165, 0, 0.15), rgba(255, 165, 0, 0.15)), #23272b !important;
}

/* Allow Change Gruppe - gerade Spalten (dunklere Basis) */
body.darkmode .permissions-table:not(.transposed) th[data-perm-group^="allow_change_"]:nth-child(even):not(:first-child),
body.darkmode .permissions-table:not(.transposed) td[data-perm-group^="allow_change_"]:nth-child(even):not(:first-child) {
    background: linear-gradient(rgba(255, 165, 0, 0.15), rgba(255, 165, 0, 0.15)), #2c3035 !important;
}

/* Gruppen-Header überschreiben Zebra-Streifen - höhere Spezifität */
.permissions-table .group-header,
.permissions-table tr.group-header {
    background: #ffffff !important; /* Weiß für alle Gruppen-Header */
}

.permissions-table .group-header:hover,
.permissions-table tr.group-header:hover {
    background: #f8f9fa !important;
}

/* Dark Mode für Gruppen-Header - höhere Spezifität */
body.darkmode .permissions-table .group-header,
body.darkmode .permissions-table tr.group-header {
    background: #23272b !important; /* Dunkler im Dark Mode */
}

body.darkmode .permissions-table .group-header:hover,
body.darkmode .permissions-table tr.group-header:hover {
    background: #2c3035 !important;
}

/* Gruppen-Header in transponierten Ansicht - spezifische Regeln */
.permissions-table.transposed .group-header {
    background: #ffffff !important;
}

.permissions-table.transposed .group-header:hover {
    background: #f8f9fa !important;
}

body.darkmode .permissions-table.transposed .group-header {
    background: #23272b !important;
}

body.darkmode .permissions-table.transposed .group-header:hover {
    background: #2c3035 !important;
}

/* Gruppen-Header in der Berechtigungsmatrix - spezifische Regeln */
.permission-matrix-container table tr.group-header td,
.permission-matrix-container table tr.group-header:first-child td {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.permission-matrix-container table tr.group-header td:last-child,
.permission-matrix-container table tr.group-header:first-child td:last-child {
    border-right: 1px solid var(--border-color);
}

.permission-matrix-container table tr.group-header:hover td,
.permission-matrix-container table tr.group-header:first-child:hover td {
    background-color: var(--table-header-hover-bg);
}

.permission-matrix-container table tr.group-header:nth-child(odd) td,
.permission-matrix-container table tr.group-header:first-child:nth-child(odd) td {
    background-color: var(--table-header-bg); /* Override zebra striping */
}

.permission-matrix-container table tr.group-header:hover:nth-child(odd) td,
.permission-matrix-container table tr.group-header:first-child:hover:nth-child(odd) td {
    background-color: var(--table-header-hover-bg); /* Override zebra striping on hover */
}

.permission-matrix-container table {
    width: 100%;
}

/* Gruppen-Header spezifische Regeln für Berechtigungsmatrix */
.permission-matrix th.group-header,
.permission-matrix td.group-header {
    background-color: #f2f2f2 !important; /* Wichtig, um andere Regeln zu überschreiben */
    color: #000;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #ddd !important; /* Sicherstellen, dass Ränder angewendet werden */
}

.dark-mode .permission-matrix th.group-header,
.dark-mode .permission-matrix td.group-header {
    background-color: #333 !important; /* Wichtig, um andere Regeln zu überschreiben */
    color: #fff;
    border-color: #555 !important; /* Sicherstellen, dass Ränder angewendet werden */
}

.permission-matrix tr.group-header:hover th,
.permission-matrix tr.group-header:hover td {
    background-color: #e9e9e9 !important;
}

.dark-mode .permission-matrix tr.group-header:hover th,
.dark-mode .permission-matrix tr.group-header:hover td {
    background-color: #444 !important;
}

/* --- Fix: Einheitliche Gruppenheader-Optik für alle, inkl. erster Header --- */
.permission-matrix-container table tr.group-header td {
    background: #fff !important;
    color: #000 !important;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    border: 1px solid #dee2e6 !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8) !important;
    z-index: 10;
}
.permission-matrix-container table tr.group-header:hover td {
    background: #f8f9fa !important;
}
body.darkmode .permission-matrix-container table tr.group-header td {
    background: #23272b !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4) !important;
}
body.darkmode .permission-matrix-container table tr.group-header:hover td {
    background: #2c3035 !important;
}
/* --- Entferne/überschreibe alle first-child/last-child/odd/hover/var(--table-header-bg) Regeln für group-header --- */
.permission-matrix-container table tr.group-header:first-child td,
.permission-matrix-container table tr.group-header:nth-child(odd) td,
.permission-matrix-container table tr.group-header:first-child:nth-child(odd) td,
.permission-matrix-container table tr.group-header td:last-child,
.permission-matrix-container table tr.group-header:first-child td:last-child,
.permission-matrix-container table tr.group-header:hover:nth-child(odd) td,
.permission-matrix-container table tr.group-header:first-child:hover td,
.permission-matrix-container table tr.group-header:first-child:hover:nth-child(odd) td {
    background: unset !important;
    color: unset !important;
    border: unset !important;
    box-shadow: unset !important;
}

/* --- Fix: Gruppenheader in transponierter Ansicht überschreiben Zebra-Streifen --- */
.permissions-table.transposed tr.group-header,
.permissions-table.transposed tr.group-header th,
.permissions-table.transposed tr.group-header td {
    background: #fff !important;
    color: #000 !important;
    font-weight: bold;
    border: 1px solid #dee2e6 !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8) !important;
    z-index: 10;
}
body.darkmode .permissions-table.transposed tr.group-header,
body.darkmode .permissions-table.transposed tr.group-header th,
body.darkmode .permissions-table.transposed tr.group-header td {
    background: #23272b !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4) !important;
}

/* ====================================================================
   DATATABLES CUSTOM FILTER STYLES
   ==================================================================== */

.table-filters {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.table-filters .filter-group {
    display: flex;
    flex-direction: column;
}

.table-filters .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

.table-filters .filter-input {
    border-radius: 4px;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.table-filters .filter-input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.table-filters .clear-filters {
    margin-top: 1.5rem;
    height: fit-content;
}

/* Dark Mode Support für Filter */
body.darkmode .table-filters {
    background: #2c3035;
    border-color: #495057;
}

body.darkmode .table-filters .form-label {
    color: #e0e0e0;
}

body.darkmode .table-filters .filter-input {
    background-color: #23272b;
    border-color: #495057;
    color: #e0e0e0;
}

body.darkmode .table-filters .filter-input:focus {
    border-color: #4dabf7;
    box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25);
}

body.darkmode .table-filters .filter-input::placeholder {
    color: #adb5bd;
}

/* Responsive Filter */
@media (max-width: 768px) {
    .table-filters {
        flex-direction: column;
        gap: 15px !important;
    }
    
    .table-filters .filter-input {
        width: 100% !important;
    }
    
    .table-filters .clear-filters {
        margin-top: 0;
        align-self: flex-start;
    }
}