/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for ArchiveRequest component */
@layer components {
    .archive-request {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
        margin: auto;

        @media (max-width: 768px) {
            padding: 1rem;
        }

        &[data-active="true"] {
            opacity: 1;
            pointer-events: auto;

        }

        & .archive-request__paper {
            background: #fdfdfd;
            width: 80%;
            max-width: 500px;
            min-height: 400px;
            padding: 2rem;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            color: #222;
            font-family: 'Special Elite', cursive;
            position: relative;
            border-radius: 1px;

            @media (max-width: 768px) {
                width: 95%;
                max-height: none;
                padding: 1.5rem;
                overflow-y: auto;
            }

            /* Textúra papiera */
            background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
            background-size: 20px 20px;

            & .archive-request__paper-header {
                border-bottom: 2px solid #222;
                padding-bottom: 1rem;
                margin-bottom: 2rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;

                & .archive-request__paper-ministry {
                    font-size: 1.2rem;
                    font-weight: bold;
                }

                & .archive-request__paper-department {
                    font-size: 0.8rem;
                }
            }

            & .archive-request__paper-content {
                flex-grow: 1;
                font-size: 1rem;
                line-height: 1.5;
                margin-bottom: 2rem;
            }

            & .archive-request__paper-footer {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                & .archive-request__paper-stamp {
                    border: 3px solid #8b2a2a;
                    color: #8b2a2a;
                    padding: 5px 15px;
                    font-weight: bold;
                    transform: rotate(-15deg);
                    opacity: 0.7;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 4px;
                    font-size: 0.9rem;
                }

                & .archive-request__paper-signature {
                    font-size: 1.5rem;
                    font-style: italic;
                    border-bottom: 1px solid #222;
                }
            }

            & .archive-request__paper-close {
                position: absolute;
                top: 10px;
                right: 10px;
                background: #333;
                color: #fff;
                border: none;
                padding: 5px 10px;
                font-size: 0.7rem;
                cursor: pointer;
                font-family: var(--font-retro);
                border-radius: 2px;

                &:hover {
                    background: #000;
                }
            }

            & .archive-request__archive-button {
                background: #8b2a2a;
                color: #fff;
                text-decoration: none;
                padding: 10px 20px;
                font-family: var(--font-retro);
                font-weight: bold;
                border-radius: 2px;
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
                transition: transform 0.1s;

                &:hover {
                    background: #a03030;
                    transform: scale(1.05);
                }

                &:active {
                    transform: scale(0.95);
                }
            }
        }

        & .archive-request__flash {
            position: absolute;
            inset: 0;
            z-index: 10;
            background: #fff;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.1s ease-in;

            &[data-active="true"] {
                opacity: 1;
                transition: opacity 0.05s ease-out;
            }
        }
    }
}

/* Dialog-specific adjustments for top-layer behavior */
@layer components {
    .archive-request {
        /* Remove default dialog chrome and make it transparent; we handle overlay styling ourselves */
        border: none;
        padding: 0;
        background: transparent;
    }

    .archive-request::backdrop {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
    }
}