/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

:root {
    /* Colors - Softer version matching the logo */
    --color-primary: #c75b39;
    --color-primary-dark: #a84a2f;
    --color-primary-light: #d97b5a;
    --color-secondary: #f4d03f;
    --color-secondary-dark: #d4ac0d;
    --color-success: #27ae60;
    --color-error: #e74c3c;
    --color-warning: #f39c12;

    /* Background colors - more neutral and soothing */
    --bg-body: #f5f5f0;
    --bg-card: #ffffff;
    --bg-hover: #ebebe6;

    /* Text colors - softer */
    --text-primary: #2c3e50;
    --text-secondary: #5d6d7e;
    --text-muted: #85929e;

    /* Border */
    --border-color: #e2e8f0;
    --border-radius: 8px;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Typography */
    --font-sans:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-sans);
    background-color: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

a {
    text-decoration: none;
    color: var(--color-primary);
}

ul {
    list-style: none;
    padding: 0;
}

button {
    cursor: pointer;
}

object,
iframe {
    border: none;
}

label {
    cursor: pointer;
}

input,
textarea,
select,
button {
    font-family: inherit;
}

/* ========== Flash messages ========== */

.flash {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 300px;
    max-width: 90vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    span {
        flex: 1;
    }

    button {
        background: none;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        padding: 0 var(--spacing-sm);
        color: inherit;
        opacity: 0.6;
        transition: opacity 0.2s;

        &:hover {
            opacity: 1;
        }
    }

    a {
        color: inherit;
        text-decoration: underline;
        font-weight: 600;

        &:hover {
            text-decoration: none;
        }
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background-color: currentColor;
        opacity: 0.4;
        animation: flash-progress 5s linear forwards;
    }
}

@keyframes flash-progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.flash-success {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.flash-error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.flash-undo {
    margin-left: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    text-decoration: none !important;

    &:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
}

/* ========== Site header ========== */

.site-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--color-secondary);
    padding: var(--spacing-md) var(--spacing-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        color: var(--color-primary);
        font-weight: 700;
        font-size: var(--font-size-xl);

        &:hover {
            color: var(--color-primary-dark);
        }
    }

    > div {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);

        .logout-link {
            font-size: var(--font-size-xs);
            opacity: 0.7;

            &:hover {
                opacity: 1;
            }
        }
    }
}

/* ========== Page header ========== */

.page-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);

    p {
        color: var(--color-primary);
        font-size: var(--font-size-xl);
        font-weight: 600;
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }
}

/* ========== User section ========== */

.user-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ========== Sections ========== */

section {
    margin-bottom: var(--spacing-2xl);

    h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
        color: var(--text-primary);
    }
}

/* ========== Buttons ========== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius);
    transition:
        background-color 0.2s,
        transform 0.1s;

    &:hover {
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(0);
    }

    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;

    &:hover:not(:disabled) {
        background-color: var(--color-primary-dark);
    }
}

.btn-secondary {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);

    &:hover:not(:disabled) {
        background-color: var(--border-color);
    }
}

.btn-danger {
    background-color: var(--color-error);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn-xs {
    padding: 1px 5px;
    font-size: var(--font-size-xs);
    line-height: 1;
}

/* ========== Forms ========== */

.form {
    background-color: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: var(--spacing-lg);

    label {
        display: block;
        margin-bottom: var(--spacing-sm);
        font-weight: 500;
        color: var(--text-primary);
    }

    input,
    textarea,
    select {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-base);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        background-color: white;
        transition:
            border-color 0.2s,
            box-shadow 0.2s;

        &:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        &.error {
            border-color: var(--color-error);
        }
    }

    > span {
        display: block;
        margin-top: var(--spacing-xs);
        font-size: var(--font-size-sm);
        color: var(--color-error);
    }

    small {
        display: block;
        margin-top: var(--spacing-xs);
        font-size: var(--font-size-sm);
        color: var(--text-muted);
    }
}

input[type="file"] {
    padding: var(--spacing-sm);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-hover);
    cursor: pointer;
    width: 100%;

    &:hover {
        border-color: var(--color-primary);
        background-color: var(--bg-body);
    }
}

/* ========== Radio groups ========== */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

    label {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius);
        transition: background-color 0.2s;

        &:hover {
            background-color: var(--bg-hover);
        }

        input[type="radio"] {
            width: auto;
            margin: 0;
        }
    }
}

/* ========== Badges ========== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: 9999px;
}

.badge-public {
    background-color: #e8d5b5;
    color: #5a3a1a;
}

.badge-private {
    background-color: #d7ccc8;
    color: #3e2723;
}

.badge-role {
    background-color: #e8d5b5;
    color: #5a3a1a;
}

.badge-part {
    background-color: var(--color-secondary);
    color: var(--text-primary);
}

/* ========== Auth section ========== */

.auth-section {
    background-color: var(--bg-card);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;

    div:first-of-type {
        h2 {
            margin-bottom: var(--spacing-md);
        }

        p {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-lg);
        }
    }

    ul {
        margin-bottom: var(--spacing-xl);
        text-align: left;
        display: inline-block;

        li {
            padding: var(--spacing-sm) 0;
            padding-left: 1.5rem;
            position: relative;

            &::before {
                content: "✓";
                position: absolute;
                left: 0;
                color: var(--color-success);
                font-weight: bold;
            }
        }
    }

    div:last-of-type {
        display: flex;
        gap: var(--spacing-md);
        justify-content: center;
    }
}

/* ========== Auth pages ========== */

.auth-page {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--spacing-xl) 0;

    h1 {
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }

    form {
        margin-bottom: var(--spacing-lg);
    }

    div {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;

        a {
            color: var(--color-primary);
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.error-banner {
    background-color: #fee2e2;
    color: #991b1b;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* ========== Groups list ========== */

.groups-section {
    ul {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);

        li {
            background-color: var(--bg-card);
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition:
                box-shadow 0.2s,
                transform 0.2s;

            &:hover {
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            a {
                display: block;
                padding: var(--spacing-lg);
                color: inherit;

                span:first-child {
                    display: block;
                    font-size: var(--font-size-lg);
                    font-weight: 600;
                    color: var(--color-primary);
                    margin-bottom: var(--spacing-xs);
                }

                span:not(:first-child):not(.badge) {
                    display: block;
                    color: var(--text-secondary);
                    font-size: var(--font-size-sm);
                }
            }
        }
    }
}

/* ========== Group header ========== */

.group-header,
.piece-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);

    h1 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-sm);
    }

    p {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
    }

    div {
        display: flex;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
}

.piece-header {
    div {
        margin-top: var(--spacing-md);

        span:last-child {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-xs);
        }
    }
}

/* ========== Group actions ========== */

.group-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

/* ========== Pieces list ========== */

.pieces-section {
    background-color: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    ul {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);

        li {
            background-color: var(--bg-card);
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition:
                box-shadow 0.2s,
                transform 0.2s;

            &:hover {
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            a {
                display: flex;
                align-items: center;
                gap: var(--spacing-sm);
                padding: var(--spacing-lg);
                color: inherit;

                span:first-child {
                    font-size: var(--font-size-lg);
                    font-weight: 600;
                    color: var(--color-primary);
                }

                &:hover span:first-child {
                    color: var(--color-primary);
                }
            }
        }
    }
}

/* ========== Search inputs ========== */

.search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: white;
    margin-bottom: var(--spacing-md);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;

    &:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.1);
    }
}

/* ========== Empty state ========== */

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
    color: var(--text-secondary);

    p + p {
        margin-top: var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}

/* ========== Breadcrumb ========== */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);

    li {
        display: flex;
        align-items: center;

        &::before {
            content: "/";
            color: var(--text-muted);
            margin-right: var(--spacing-sm);
        }

        &:first-child::before {
            content: none;
        }

        a {
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

/* ========== Site footer ========== */

.site-footer {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    border-top: 1px solid #e0e0e0;
    margin-top: auto;
    background-color: var(--bg-card);
}

/* ========== Piece actions ========== */

.piece-actions {
    margin-bottom: var(--spacing-xl);
}

.upload-hint {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-top: calc(-1 * var(--spacing-md));
    margin-bottom: var(--spacing-xl);
}

/* ========== Medias ========== */

.medias-section {
    h2 {
        span {
            font-size: var(--font-size-sm);
            color: var(--text-muted);
            font-weight: 400;
        }
    }

    ul {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-lg);

        li {
            background-color: var(--bg-card);
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: var(--spacing-md) var(--spacing-lg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-md);
            transition: box-shadow 0.2s;

            &:hover {
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
            }

            div:first-of-type {
                flex: 1;
                min-width: 0;

                a {
                    display: flex;
                    align-items: center;
                    gap: var(--spacing-md);
                    color: inherit;
                    padding: var(--spacing-xs) 0;

                    &:hover {
                        color: var(--color-primary);
                    }
                }

                button {
                    display: flex;
                    align-items: center;
                    gap: var(--spacing-md);
                    text-decoration: none;
                    color: inherit;
                    background: none;
                    border: none;
                    text-align: left;
                    font-size: inherit;
                    padding: 0;
                    width: 100%;

                    &:hover {
                        .media-name {
                            color: var(--color-primary);
                        }
                    }
                }

                div {
                    display: flex;
                    align-items: center;
                    gap: var(--spacing-md);

                    audio {
                        width: 100%;
                        max-width: 300px;
                        margin-top: var(--spacing-xs);
                    }
                }

                .media-icon {
                    font-size: 1.5rem;
                    flex-shrink: 0;
                }

                .media-info {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: var(--spacing-xs);
                    min-width: 0;

                    .media-name {
                        font-size: var(--font-size-base);
                        font-weight: 500;
                        color: var(--text-primary);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    span:last-child {
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--spacing-xs);

                        span {
                            font-size: var(--font-size-xs);
                            padding: 2px 6px;
                            background-color: var(--color-secondary);
                            color: var(--text-primary);
                            border-radius: 4px;
                            white-space: nowrap;
                        }
                    }
                }
            }

            div:last-of-type {
                display: flex;
                align-items: center;
                gap: var(--spacing-sm);
                flex-shrink: 0;

                form {
                    flex-shrink: 0;
                }
            }
        }
    }
}

audio {
    width: 100%;
    max-width: 200px;
}

/* ========== Media viewer page ========== */

.media-viewer-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px);

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);

        h1 {
            font-size: var(--font-size-xl);
            margin: 0;
        }
    }

    div {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #2c3e50;
        border-radius: var(--border-radius);
        overflow: hidden;
        min-height: 500px;

        div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-lg);
            width: 100%;
            height: 100%;

            object {
                width: 100%;
                height: 100%;
                min-height: 70vh;
                border-radius: var(--border-radius);
                background-color: white;
            }

            img {
                max-width: 100%;
                max-height: 80vh;
                object-fit: contain;
                border-radius: var(--border-radius);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }
        }
    }

    footer {
        margin-top: var(--spacing-lg);
        text-align: center;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border-color);
    }
}

/* ========== Dialogs ========== */

dialog {
    border: none;
    padding: 0;

    &:not(.media-viewer-dialog) {
        border-radius: var(--border-radius);
        max-width: 500px;
        width: 90%;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

        &.part-dialog {
            max-width: 400px;
        }

        > div {
            padding: var(--spacing-xl);

            h2 {
                margin-bottom: var(--spacing-lg);
            }

            form div:last-child {
                display: flex;
                gap: var(--spacing-md);
                justify-content: flex-end;
                margin-top: var(--spacing-xl);
            }
        }

        .form {
            padding: 0;
            box-shadow: none;
            background-color: transparent;
        }

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
}

/* ========== Media Viewer Dialog ========== */

.media-viewer-dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    box-shadow: none;

    > div {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #1a1a2e;

        nav {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-xs) var(--spacing-md);
            background-color: rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            min-height: 36px;

            button,
            a {
                background: none;
                border: none;
                color: #fff;
                cursor: pointer;
                padding: var(--spacing-xs) var(--spacing-sm);
                border-radius: 4px;
                font-size: var(--font-size-lg);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.2s;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }
            }

            button:first-child {
                font-size: var(--font-size-base);
                padding: 2px 8px;
            }

            span {
                flex: 1;
                color: #fff;
                font-size: var(--font-size-sm);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            a:last-child {
                text-decoration: none;
                font-size: var(--font-size-base);
            }
        }

        > div {
            flex: 1;
            display: flex;
            overflow: hidden;

            > div:first-child {
                flex: 1;
                display: flex;
                align-items: stretch;
                justify-content: stretch;
                overflow: auto;
                min-width: 0;

                object {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    display: block;
                    background-color: #fff;

                    p {
                        padding: var(--spacing-xl);
                        text-align: center;
                        color: var(--text-primary);
                    }
                }

                img {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }
            }

            aside {
                width: 280px;
                background-color: rgba(255, 255, 255, 0.03);
                border-left: 1px solid rgba(255, 255, 255, 0.1);
                padding: var(--spacing-md);
                overflow-y: auto;
                flex-shrink: 0;

                h3 {
                    color: #fff;
                    font-size: var(--font-size-sm);
                    margin-bottom: var(--spacing-md);
                    font-weight: 500;
                }

                #viewer-audio-list {
                    > div {
                        margin-bottom: var(--spacing-md);

                        > span {
                            display: block;
                            color: rgba(255, 255, 255, 0.7);
                            font-size: var(--font-size-xs);
                            margin-bottom: var(--spacing-xs);
                        }

                        audio {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.9);
    }
}

/* ========== Parts (Pupitres) ========== */

.parts-filter-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-md);

        h3 {
            margin-bottom: 0;
            font-size: var(--font-size-base);
            color: var(--text-primary);
        }

        button {
            color: var(--color-error);
            border-color: var(--color-error);
            background-color: transparent;

            &:hover {
                background-color: var(--color-error);
                color: white;
            }
        }
    }

    .parts-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);

        > div {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);

            form {
                display: inline-flex;
            }
        }
    }
}

.part-filter-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all 0.2s;

    &:hover {
        background-color: var(--bg-body);
        border-color: var(--color-primary);
    }

    &.active {
        background-color: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }
}

.parts-selection {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    max-height: 250px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    background-color: var(--bg-hover);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);

    p {
        color: var(--text-muted);
        font-size: var(--font-size-sm);
        font-style: italic;
        margin: 0;
        padding: var(--spacing-sm);
    }

    label {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 2px var(--spacing-xs);
        background-color: var(--bg-card);
        border-radius: var(--border-radius);
        font-size: var(--font-size-xs);
        border: 1px solid var(--border-color);
        transition: all 0.2s;

        &:hover {
            border-color: var(--color-primary);
        }

        input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
    }
}

#edit-media-parts.parts-selection {
    max-height: 250px;
}

.add-part-inline {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);

    input[type="text"] {
        flex: 1;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
    }
}

/* ========== Drop zone ========== */

.drop-zone-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(199, 91, 57, 0.15);
    border: 4px dashed var(--color-primary);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    &.active {
        display: flex;
    }

    > div {
        background-color: var(--bg-card);
        padding: var(--spacing-xl) var(--spacing-2xl);
        border-radius: var(--border-radius);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--color-primary);

        span:first-child {
            font-size: 3rem;
        }
    }
}

/* ========== Responsive ========== */

@media (max-width: 640px) {
    main {
        padding: var(--spacing-md);
    }

    .auth-section {
        padding: var(--spacing-xl);
    }

    .form {
        padding: var(--spacing-lg);
    }

    .group-actions {
        flex-direction: column;

        .btn {
            width: 100%;
        }
    }

    .medias-section ul {
        gap: var(--spacing-xs);

        li {
            padding: var(--spacing-sm) var(--spacing-md);
            flex-wrap: wrap;

            div:first-of-type div audio {
                max-width: 200px;
            }
        }
    }

    .media-viewer-dialog > div > div > div:first-child {
        min-height: 300px;
    }

    .parts-filter-section .parts-filter-buttons {
        gap: var(--spacing-xs);

        .part-filter-btn {
            padding: 4px 8px;
            font-size: var(--font-size-xs);
        }
    }

    dialog:not(.media-viewer-dialog) {
        width: 100%;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    dialog:not(.media-viewer-dialog) > div {
        padding: var(--spacing-md);
    }
}