/* Kompakte, progressive Administration */
.admin-area-grid,
.admin-compact-list {
    display: grid;
    gap: 1rem;
}

.admin-area-grid {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.admin-area-card,
.admin-compact-row,
.admin-detail-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: var(--surface);
}

.admin-compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-compact-row h2,
.admin-compact-row h3 {
    margin: 0 0 0.35rem;
}

.admin-filter-bar,
.admin-list-search {
    margin-bottom: 1rem;
}

.admin-filter-bar {
    display: flex;
    align-items: end;
    gap: 0.75rem;
}

.admin-link-list {
    display: grid;
    gap: 0.4rem;
}

.managed-workspace-indicator {
    color: var(--accent);
}

.glassware-admin-preview {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    float: left;
    margin-right: 0.75rem;
    border-radius: var(--radius-medium);
}

.glassware-image-preview img {
    width: min(100%, 24rem);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-large);
}

[data-dirty-form].is-dirty::before {
    content: "Ungespeicherte Änderungen";
    display: block;
    margin-bottom: 0.75rem;
    color: var(--warning, #b36b00);
    font-weight: 700;
}

/* Benutzerverwaltung: Bar-/Workspace-Hierarchie mit getrenntem Detailbereich */
.user-admin-page-header {
    align-items: flex-end;
}

.user-hierarchy-filters {
    margin-bottom: 1rem;
}

.user-hierarchy-layout {
    display: grid;
    grid-template-columns: clamp(20rem, 28vw, 23.75rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.user-hierarchy-tree-pane,
.user-hierarchy-detail-pane {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: var(--surface);
}

.user-hierarchy-tree-pane {
    padding: 1rem;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
}

.user-hierarchy-detail-pane {
    padding: clamp(1rem, 2.4vw, 1.5rem);
    overflow-wrap: break-word;
}

.user-hierarchy-pane-header,
.user-hierarchy-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.user-hierarchy-pane-header {
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.user-hierarchy-pane-header h2,
.user-hierarchy-detail-header h2,
.user-hierarchy-permissions h3 {
    margin: 0;
}

.user-tree-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.user-hierarchy-workspace,
.user-hierarchy-workspace-content > details {
    min-width: 0;
    margin: 0;
}

.user-hierarchy-workspace > summary,
.user-hierarchy-workspace-content > details > summary {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.35rem 0.45rem;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-weight: 700;
}

.user-hierarchy-workspace > summary::-webkit-details-marker,
.user-hierarchy-workspace-content > details > summary::-webkit-details-marker {
    display: none;
}

.user-hierarchy-workspace > summary::after,
.user-hierarchy-workspace-content > details > summary::after {
    content: "›";
    color: var(--text-muted);
    transform: rotate(90deg);
    transition: transform 140ms ease;
}

.user-hierarchy-workspace:not([open]) > summary::after,
.user-hierarchy-workspace-content > details:not([open]) > summary::after {
    transform: rotate(0deg);
}

.user-hierarchy-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.user-hierarchy-branches {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding-top: 0.75rem;
}

.user-hierarchy-workspace {
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--surface-soft);
    overflow: hidden;
}

.user-hierarchy-workspace-content {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    border-top: 1px solid var(--border);
    padding: 0.25rem 0.35rem 0.4rem;
    background: var(--surface);
}

.user-hierarchy-items {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    padding: 0 0 0.25rem 0.45rem;
}

.user-hierarchy-node-form {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.user-hierarchy-node {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-medium);
    padding: 0.5rem 0.55rem;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-hierarchy-node:hover,
.user-hierarchy-node:focus-visible {
    background: var(--surface-soft);
}

.user-hierarchy-node.is-selected {
    background: var(--accent);
    color: var(--accent-contrast, #fff);
}

.user-hierarchy-node > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.user-hierarchy-role-icon {
    display: inline-grid;
    place-items: center;
    position: static;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--accent);
}

.user-hierarchy-role-icon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.is-selected .user-hierarchy-role-icon {
    color: inherit;
}

.user-hierarchy-count {
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 0.72rem;
}

.user-hierarchy-empty {
    margin: 0;
    padding: 0.4rem 0.55rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.user-hierarchy-detail-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.user-hierarchy-detail-header > div {
    min-width: 0;
}

.user-hierarchy-detail-header p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
}

.user-hierarchy-stats,
.user-hierarchy-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.user-hierarchy-stats > div,
.user-hierarchy-facts > div {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    padding: 0.75rem;
    background: var(--surface-soft);
}

.user-hierarchy-stats strong,
.user-hierarchy-stats span,
.user-hierarchy-facts dt,
.user-hierarchy-facts dd {
    display: block;
    margin: 0;
}

.user-hierarchy-stats strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.user-hierarchy-stats span,
.user-hierarchy-facts dt {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.user-hierarchy-facts dd {
    margin-top: 0.25rem;
    font-weight: 700;
}

.user-hierarchy-permissions {
    margin: 1rem 0;
}

.user-hierarchy-permissions ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.user-hierarchy-permissions li {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    padding: 0.55rem 0.65rem;
    background: var(--surface-soft);
}

.user-hierarchy-mobile-back {
    display: none;
}

.user-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.user-detail-tabs a {
    flex: 1 1 10rem;
    border-bottom: 3px solid transparent;
    padding: 0.7rem 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
    text-decoration: none;
}

.user-detail-tabs a:hover,
.user-detail-tabs a:focus-visible,
.user-detail-tabs a.is-active {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.user-detail-form,
.user-membership-groups,
.user-effective-permissions,
.user-password-reset {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.user-detail-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    min-width: 0;
}

.user-detail-active-field {
    align-self: end;
    min-height: 2.75rem;
}

.user-password-reset {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.user-password-reset > summary,
.permission-ui-section > summary {
    cursor: pointer;
    font-weight: 700;
}

.user-password-reset form {
    display: grid;
    gap: 0.85rem;
    padding-top: 0.85rem;
}

.user-detail-list {
    display: grid;
    min-width: 0;
    border-top: 1px solid var(--border);
}

.user-detail-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.user-detail-list-row > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.user-detail-list-row span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.user-detail-inline-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.user-effective-permissions ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-effective-permissions li {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    background: var(--surface-soft);
    font-size: 0.8rem;
}

.permission-ui-sections {
    display: grid;
    gap: 0.55rem;
}

.permission-ui-section {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--surface-soft);
}

.permission-ui-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
}

.permission-ui-section > summary .checkbox-row {
    min-width: 0;
}

.permission-ui-details {
    display: grid;
    gap: 0.55rem;
    border-top: 1px solid var(--border);
    padding: 0.75rem 0.8rem;
    background: var(--surface);
}

.permission-ui-details .checkbox-row span {
    display: grid;
    gap: 0.1rem;
}

.permission-ui-details small {
    color: var(--text-muted);
    font-weight: 400;
}

@media (max-width: 980px) {.admin-compact-row,
    .admin-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-compact-row .action-row,
    .admin-compact-row .action-row form {
        width: 100%;
    }

    .user-detail-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 899px) {.user-admin-page-header {
        align-items: stretch;
    }

    .user-hierarchy-layout {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .user-hierarchy-detail-pane {
        display: none;
    }

    .user-hierarchy-layout.has-mobile-selection .user-hierarchy-tree-pane {
        display: none;
    }

    .user-hierarchy-layout.has-mobile-selection .user-hierarchy-detail-pane {
        display: block;
    }

    .user-hierarchy-mobile-back {
        display: inline-flex;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {.user-hierarchy-tree-pane,
    .user-hierarchy-detail-pane {
        padding: 0.75rem;
    }

    .user-hierarchy-pane-header {
        display: grid;
    }

    .user-tree-toggle {
        width: 100%;
    }

    .user-hierarchy-workspace-content {
        padding-inline: 0.2rem;
    }

    .user-hierarchy-items {
        padding-left: 0.25rem;
    }

    .user-hierarchy-stats,
    .user-hierarchy-facts,
    .user-hierarchy-permissions ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-hierarchy-node,
    .user-hierarchy-workspace > summary,
    .user-hierarchy-workspace-content > details > summary {
        max-width: 100%;
    }

    .user-detail-inline-add,
    .user-detail-list-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-detail-list-row {
        display: grid;
        align-items: stretch;
    }

    .user-detail-list-row form,
    .user-detail-list-row button,
    .user-detail-inline-add button {
        width: 100%;
    }
}

.recipe > .advanced-view-section {
    margin: 1.25rem;
}

.icon-action-row,
.table-icon-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.geometric-icon-button,
.table-icon-action {
    --small-badge-edge: var(--border-strong);
    --small-badge-shape: polygon(
        28% 0,
        72% 0,
        100% 28%,
        100% 72%,
        72% 100%,
        28% 100%,
        0 72%,
        0 28%
    );

    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    clip-path: var(--small-badge-shape);
    background: var(--small-badge-edge);
    color: var(--text);
    text-decoration: none;
    transition:
        color 140ms ease,
        background 140ms ease,
        transform 140ms ease;
}

.geometric-icon-button::before,
.table-icon-action::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    clip-path: var(--small-badge-shape);
    background: var(--surface-soft);
}

.geometric-icon-button {
    width: 3rem;
    height: 3rem;
}

.table-icon-action {
    width: 2.45rem;
    height: 2.45rem;
}

.geometric-icon-button .ui-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.table-icon-action .ui-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.geometric-icon-button:hover,
.table-icon-action:hover {
    --small-badge-edge: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.geometric-icon-button-danger,
.table-icon-action-danger {
    color: var(--danger);
}

.geometric-icon-button-danger:hover,
.table-icon-action-danger:hover {
    --small-badge-edge: var(--danger);
    color: var(--danger-hover);
}

.geometric-icon-button:focus-visible,
.table-icon-action:focus-visible {
    outline: none;
    filter: drop-shadow(0 0 0.35rem rgba(215, 164, 82, 0.5));
}

.ingredient-actions-header,
.ingredient-actions-cell {
    min-width: 7rem;
}

.component-breakdown-disclosure {
    margin-top: 0.15rem;
}

.component-breakdown-disclosure > summary {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 750;
}

.component-breakdown-disclosure > summary::-webkit-details-marker {
    display: none;
}

.component-breakdown-disclosure > summary .ui-icon {
    width: 0.95rem;
    height: 0.95rem;
    transition: transform 140ms ease;
}

.component-breakdown-disclosure[open] > summary .ui-icon {
    transform: rotate(180deg);
}

.component-breakdown-disclosure > .component-breakdown {
    margin-top: 0.65rem;
}

@media (max-width: 780px) {.cocktail-characteristic-filter {
        grid-column: 1 / -1;
    }

    .cocktail-card {
        min-height: 0;
    }

    .cocktail-card-name {
        min-height: 0;
    }
}

@media (max-width: 540px) {.cocktail-advanced-filters > summary.cocktail-filter-toggle {
        width: 100%;
    }

    .recipe > .advanced-view-section {
        margin: 0.85rem;
    }

    .recipe-meta-grid > .recipe-meta-item {
        min-width: 0;
    }
}