/* Single-column permission hierarchy. Native details retain keyboard support. */
#role-menu-access-panel.permission-tree {
    --tree-line: #ccdeda;
    --tree-text: #263d49;
    --tree-surface: #fff;
    --tree-hover: #f1f8f6;
    --tree-off: #e8edf2;
    --tree-off-hover: #dfe6ed;
}
#role-menu-access-panel.permission-tree :is(.permission-group-list, .permission-card-grid,
    .permission-card-submenus, .permission-submenu-actions, .permission-direct-actions-grid) {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}
#role-menu-access-panel.permission-tree .permission-group-list {
    padding: 0;
    background: transparent;
}
#role-menu-access-panel.permission-tree .permission-menu-group {
    padding: 0 !important;
    margin-bottom: 10px;
    background: var(--tree-surface);
    box-shadow: none;
}
#role-menu-access-panel.permission-tree .permission-menu-group-heading {
    grid-template-columns: 18px minmax(0, 1fr) auto 36px;
    gap: 10px;
}
#role-menu-access-panel.permission-tree .permission-group-chevron { grid-column: 1; grid-row: 1; }
#role-menu-access-panel.permission-tree .permission-menu-group-heading > div { grid-column: 2; grid-row: 1; }
#role-menu-access-panel.permission-tree .permission-menu-group-heading > small { grid-column: 3; grid-row: 1; font-weight: 400; }
#role-menu-access-panel.permission-tree .permission-group-switch { grid-column: 4; grid-row: 1; }
#role-menu-access-panel.permission-tree :is(h4, h5) { color: var(--tree-text); font-weight: 600; }
#role-menu-access-panel.permission-tree .permission-menu-group-content.permission-card-grid {
    margin: 0 16px 12px 23px !important;
    padding: 4px 0 0 18px !important;
    border: 0;
    border-left: 1px solid var(--tree-line);
    background: transparent;
}
#role-menu-access-panel.permission-tree .permission-tree-menu {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#role-menu-access-panel.permission-tree .permission-tree-menu::before,
#role-menu-access-panel.permission-tree .permission-submenu-details::before,
#role-menu-access-panel.permission-tree .permission-submenu-actions > .permission-card-row::before,
#role-menu-access-panel.permission-tree .permission-direct-actions-grid > .permission-card-row::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -18px;
    width: 18px;
    border-top: 1px solid var(--tree-line);
}
#role-menu-access-panel.permission-tree .permission-card-header {
    display: flex !important;
    gap: 10px;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    margin: 0;
    border: 0;
    border-radius: 7px;
    background: var(--tree-hover);
    cursor: pointer;
    list-style: none;
}
#role-menu-access-panel.permission-tree .permission-card-header::-webkit-details-marker { display: none; }
#role-menu-access-panel.permission-tree .permission-card-header::marker { content: ""; }
#role-menu-access-panel.permission-tree .permission-card-header::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    flex: 0 0 6px;
    transition: transform .15s ease;
}
#role-menu-access-panel.permission-tree .permission-tree-menu[open] > .permission-card-header::before { transform: rotate(45deg); }
#role-menu-access-panel.permission-tree .permission-card-header > div { flex: 1; min-width: 0; }
#role-menu-access-panel.permission-tree .permission-card-header h5 { margin: 0; font-size: .8rem; }
#role-menu-access-panel.permission-tree :is(.permission-card-submenus, .permission-submenu-actions, .permission-direct-actions-grid) {
    margin: 4px 0 6px 13px !important;
    padding: 0 0 0 18px !important;
    border: 0 !important;
    border-left: 1px solid var(--tree-line) !important;
    background: transparent !important;
}
#role-menu-access-panel.permission-tree .permission-submenu-details {
    position: relative;
    margin: 4px 0;
    padding: 0;
    border: 0;
    background: transparent;
}
#role-menu-access-panel.permission-tree .permission-card-row {
    position: relative;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px !important;
    margin: 3px 0;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 6px;
    background: transparent;
    color: var(--tree-text);
    font-size: .76rem !important;
    font-weight: 400 !important;
}
#role-menu-access-panel.permission-tree .permission-card-row > span { min-width: 0; overflow-wrap: anywhere; }
#role-menu-access-panel.permission-tree .permission-submenu-summary { padding-left: 25px !important; font-weight: 600 !important; }
#role-menu-access-panel.permission-tree .permission-submenu-summary::before { left: 10px; }
#role-menu-access-panel.permission-tree :is(.permission-card-row, summary):hover { background: var(--tree-hover); }
/* Follow the live switch state, including role changes and cascaded toggles.
   Match only the row's own switch, not switches in descendant branches.
   A partially enabled category is indeterminate, not switched off. */
#role-menu-access-panel.permission-tree :is(.permission-menu-group-heading, .permission-card-header, .permission-card-row):has(> .permission-switch > input:not(:checked):not(:indeterminate)) {
    background: var(--tree-off) !important;
}
#role-menu-access-panel.permission-tree :is(.permission-menu-group-heading, .permission-card-header, .permission-card-row):has(> .permission-switch > input:not(:checked):not(:indeterminate)):hover {
    background: var(--tree-off-hover) !important;
}
#role-menu-access-panel.permission-tree .permission-switch { flex-shrink: 0 !important; margin: 0 !important; }
#role-menu-access-panel.permission-tree .permission-card-actions.permission-actions-details {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
/* Explicitly hide closed branches even when legacy grid rules override details. */
#role-menu-access-panel.permission-tree details:not([open]) > :not(summary) { display: none !important; }
#role-menu-access-panel.permission-tree summary:focus-visible,
#role-menu-access-panel.permission-tree input:focus-visible + .permission-switch-track { outline: 2px solid #0d9488; outline-offset: 3px; }
html[data-theme="dark"] #role-menu-access-panel.permission-tree {
    --tree-line: #38545b;
    --tree-text: #e2eef0;
    --tree-surface: #132229;
    --tree-hover: #1c3339;
    --tree-off: #303e4b;
    --tree-off-hover: #3a4a59;
}
@media (max-width: 560px) {
    #role-menu-access-panel.permission-tree .permission-menu-group-heading { grid-template-columns: 12px minmax(0, 1fr) 36px; gap: 8px; }
    #role-menu-access-panel.permission-tree .permission-menu-group-heading > small { display: none; }
    #role-menu-access-panel.permission-tree .permission-group-switch { grid-column: 3; }
    #role-menu-access-panel.permission-tree .permission-menu-group-heading p { white-space: normal; }
    #role-menu-access-panel.permission-tree .permission-menu-group-content.permission-card-grid { margin-right: 8px !important; margin-left: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    #role-menu-access-panel.permission-tree .permission-card-header::before { transition: none; }
}