/* Kompakte Zutatenansicht und globale erweiterte Ansicht */

.advanced-view-toggle[aria-pressed="true"] {
    border-color: var(--accent);
    background: rgba(225, 170, 82, 0.12);
    color: var(--accent);
}

.advanced-view-icon-open {
    display: none;
}

.advanced-view-toggle[aria-pressed="true"] .advanced-view-icon-open {
    display: block;
}

.advanced-view-toggle[aria-pressed="true"] .advanced-view-icon-closed {
    display: none;
}

.data-table-ingredients {
    min-width: 42rem;
}

.data-table th.advanced-view-column,
.data-table td.advanced-view-column {
    display: none;
}

html.advanced-view-enabled
.data-table th.advanced-view-column,
html.advanced-view-enabled
.data-table td.advanced-view-column {
    display: table-cell;
}

html.advanced-view-enabled
.data-table-ingredients {
    min-width: 54rem;
}

.ingredient-actions-header,
.ingredient-actions-cell {
    position: sticky;
    right: 0;

    min-width: 10.5rem;

    background: var(--surface);
    box-shadow: -1px 0 0 var(--border);
}

.ingredient-actions-header {
    z-index: 3;
}

.ingredient-actions-cell {
    z-index: 2;
}

.data-table-ingredients tbody tr:hover
.ingredient-actions-cell {
    background: var(--surface-raised);
}

@media (max-width: 1040px) {.advanced-view-toggle {
        order: 1;
    }
}

/* Icon Set 3 – Geometric Badge */

.icon-sprite {
    position: absolute;

    width: 0;
    height: 0;
    overflow: hidden;

    pointer-events: none;
}

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

    position: relative;
    isolation: isolate;

    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    margin: 0;
    border: 0;
    padding: 0;

    clip-path: var(--badge-shape);

    background: var(--badge-edge);
    color: var(--text);

    text-decoration: none;

    transition:
        color 140ms ease,
        background-color 140ms ease,
        transform 140ms ease,
        filter 140ms ease;
}

.header-icon-action::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 2px;

    clip-path: var(--badge-shape);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            transparent 55%
        ),
        var(--surface-soft);
}

.header-icon-action:hover {
    --badge-edge: var(--accent);

    color: var(--accent-hover);
    transform: translateY(-1px);
}

.header-icon-action:focus-visible {
    outline: none;

    filter:
        drop-shadow(0 0 0.2rem rgba(215, 164, 82, 0.75))
        drop-shadow(0 0 0.55rem rgba(215, 164, 82, 0.28));
}

.header-icon-action.is-current,
.advanced-view-toggle[aria-pressed="true"] {
    --badge-edge: var(--accent);

    color: var(--accent);
}

.header-icon-action.is-current::before,
.advanced-view-toggle[aria-pressed="true"]::before {
    background:
        linear-gradient(
            145deg,
            rgba(215, 164, 82, 0.14),
            transparent 62%
        ),
        var(--surface-soft);
}

.ui-icon {
    width: 1.45rem;
    height: 1.45rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

@media (max-width: 720px) {.header-icon-action {
        width: 2.85rem;
        height: 2.85rem;
    }
}

/* Desktop-Aufräumen – Icon-Metadaten, globale erweiterte Ansicht und kompakte Aktionen */

.page-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cocktail-advanced-filters {
    border-top: 0;
    padding-top: 0;
}

.cocktail-advanced-filters > summary.cocktail-filter-toggle {
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
}

.cocktail-advanced-filters > summary.cocktail-filter-toggle::-webkit-details-marker {
    display: none;
}

.cocktail-advanced-filters[open] > summary.cocktail-filter-toggle {
    margin-bottom: 0;
}

.cocktail-filter-toggle .ui-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 140ms ease;
}

.cocktail-advanced-filters[open]
.cocktail-filter-toggle .ui-icon {
    transform: rotate(180deg);
}

.filter-count-badge {
    border: 1px solid rgba(23, 18, 10, 0.38);
    border-radius: 999px;
    padding: 0.18rem 0.45rem;
    background: rgba(23, 18, 10, 0.12);
    color: var(--accent-text);
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.cocktail-filter-panel {
    margin-top: 0.9rem;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
}

.cocktail-characteristic-filter {
    grid-column: span 2;
    margin: 0;
    border: 0;
    padding: 0;
}

.cocktail-characteristic-filter legend {
    margin-bottom: 0.2rem;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.field-help {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.characteristic-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.characteristic-filter-option {
    position: relative;
    cursor: pointer;
}

.characteristic-filter-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.characteristic-filter-option span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.45rem 0.72rem;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.characteristic-filter-option:hover span {
    border-color: var(--border-strong);
    color: var(--text);
}

.characteristic-filter-option input:checked + span {
    border-color: var(--accent);
    background: rgba(215, 164, 82, 0.14);
    color: var(--accent);
}

.characteristic-filter-option input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cocktail-grid {
    align-items: stretch;
}

.cocktail-card {
    min-height: 14.5rem;
    gap: 1rem;
}

.cocktail-card-content,
.cocktail-card-heading {
    display: grid;
}

.cocktail-card-content {
    gap: 1rem;
}

.cocktail-card-heading {
    gap: 0.2rem;
}

.cocktail-card-name {
    min-height: 2.4em;
}

.cocktail-card .cocktail-characteristics {
    min-height: 1.85rem;
    align-content: start;
}

.characteristic-chip-more {
    color: var(--text-muted);
    border-color: var(--border);
    background: var(--surface-soft);
}

.cocktail-card-attributes {
    align-content: start;
    margin-top: 0;
}

.cocktail-attribute-chip {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.36rem 0.58rem;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.2;
}

.cocktail-attribute-chip .ui-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--accent);
    stroke-width: 1.85;
}

.cocktail-attribute-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-characteristics {
    margin-top: 1.25rem;
}

.recipe-meta-grid > .recipe-meta-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.recipe-meta-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface);
    color: var(--accent);
    text-transform: none;
    letter-spacing: normal;
}

.recipe-meta-icon .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.recipe-meta-copy {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
    color: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.recipe-meta-copy > span {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.recipe-meta-copy strong {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.advanced-view-section {
    display: none;
}

html.advanced-view-enabled .advanced-view-section {
    display: block;
}