/* ============================================
   FORM PAGE - Shared layout & theme for form pages
   (new-company, create-position, etc.)
   ============================================ */

@layer components {
    .form-page {
        /* Layout */
        .page-layout {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xl);
            align-items: flex-start;
        }

        .form-area {
            flex: 1;
            min-inline-size: 320px;
        }

        .sidebar {
            flex-shrink: 0;
            inline-size: 100%;
            max-inline-size: 320px;
            display: flex;
            flex-direction: column;
            gap: var(--space-xl);
        }

        /* Error banner */
        .error-banner {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            padding: var(--space-lg);
            border-radius: 12px;
            margin-block-end: var(--space-xl);
            font-size: var(--fs-small);
            line-height: 1.5;

            svg { flex-shrink: 0; margin-block-start: 2px; }

            strong { display: block; margin-block-end: var(--space-3xs); }

            a {
                font-weight: var(--fw-semibold);
                text-decoration: underline;
                text-underline-offset: 2px;
            }
        }

        /* Card */
        .card {
            padding: var(--space-2xl);
            border-radius: 16px;
            transition: border-color 0.3s ease-out;
        }

        .card-header {
            margin-block-end: var(--space-xl);

            h2 {
                font-size: var(--fs-xl);
                font-weight: var(--fw-semibold);
                letter-spacing: -0.01em;
                margin-block-end: var(--space-3xs);
            }

            .card-hint {
                font-size: var(--fs-xsmall);
            }
        }

        /* Form groups */
        .form-group {
            margin-block-end: var(--space-xl);

            label {
                display: flex;
                align-items: center;
                gap: var(--space-xs);
                font-size: var(--fs-small);
                font-weight: var(--fw-medium);
                margin-block-end: var(--space-sm);

                svg {
                    flex-shrink: 0;
                    opacity: 0.6;
                }
            }

            input, select, textarea {
                inline-size: 100%;
                padding: var(--space-compact) var(--space-md);
                border-radius: 10px;
                font-size: var(--fs-body);
                transition: all 0.2s ease-out;
            }

            textarea {
                min-block-size: 100px;
                resize: vertical;
            }

            .field-hint {
                display: block;
                font-size: var(--fs-xsmall);
                color: var(--text-secondary);
                margin-block-start: var(--space-3xs);
            }
        }

        .form-row {
            display: flex;
            gap: var(--space-lg);

            .form-group {
                flex: 1;
                min-inline-size: 140px;
            }
        }

        /* Details / accordion */
        .additional-details {
            margin-block-end: var(--space-xl);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease-out;

            summary {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--space-md) var(--space-lg);
                cursor: pointer;
                list-style: none;
                font-weight: var(--fw-medium);
                font-size: var(--fs-small);
                transition: all 0.2s ease-out;

                &::-webkit-details-marker {
                    display: none;
                }
            }

            .summary-left {
                display: flex;
                align-items: center;
                gap: var(--space-xs);

                svg {
                    transition: transform 0.3s ease-out;
                }
            }

            &[open] .summary-left svg {
                transform: rotate(45deg);
            }

            .field-count {
                font-size: var(--fs-xsmall);
            }

            .details-content {
                padding: var(--space-md) var(--space-lg) var(--space-lg);
            }
        }

        /* Submit button */
        .submit-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            padding: var(--space-compact) var(--space-2xl);
            border-radius: 100px;
            font-size: var(--fs-body);
            font-weight: var(--fw-semibold);
            cursor: pointer;
            transition: all 0.25s ease-out;
            border: none;
            inline-size: 100%;

            svg {
                transition: transform 0.25s ease-out;
            }

            &:hover svg {
                transform: rotate(90deg);
            }
        }

        /* Sidebar cards */
        .sidebar .card {
            h3 {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                font-size: var(--fs-body);
                font-weight: var(--fw-semibold);
                margin-block-end: var(--space-lg);

                svg {
                    flex-shrink: 0;
                    opacity: 0.7;
                }
            }
        }

        /* Steps */
        .steps {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .step {
            display: flex;
            gap: var(--space-md);
            align-items: center;
            padding: var(--space-compact) var(--space-md);
            border-radius: 10px;
            transition: all 0.2s ease-out;

            strong {
                display: block;
                font-size: var(--fs-small);
                margin-block-end: var(--space-4xs);
            }

            p {
                font-size: var(--fs-xsmall);
            }
        }

        .step-number {
            display: flex;
            align-items: center;
            justify-content: center;
            inline-size: 32px;
            block-size: 32px;
            border-radius: 50%;
            font-size: var(--fs-small);
            font-weight: var(--fw-semibold);
            flex-shrink: 0;
            transition: all 0.2s ease-out;
        }

        /* Tips */
        .tips-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);

            li {
                font-size: var(--fs-small);
                line-height: 1.5;
                padding-inline-start: var(--space-md);
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    inset-inline-start: 0;
                    inset-block-start: 0.6em;
                    inline-size: 6px;
                    block-size: 6px;
                    border-radius: 50%;
                }
            }
        }
    }
}

/* --- THEME --- */
@layer theme {
    .form-page {
        .error-banner {
            background: light-dark(oklch(from var(--color-error) l c h / 0.08), oklch(from var(--color-error) l c h / 0.12));
            border: 1px solid light-dark(oklch(from var(--color-error) l c h / 0.2), oklch(from var(--color-error) l c h / 0.25));
            color: light-dark(oklch(from var(--color-error) calc(l - 0.1) c h), oklch(from var(--color-error) calc(l + 0.15) c h));

            a {
                color: inherit;
                &:hover { opacity: 0.8; }
            }
        }

        .form-group {
            input, textarea {
                &::placeholder { color: oklch(50% 0.01 250); }

                &:focus {
                    box-shadow: 0 0 0 3px var(--input-focus-shadow), 0 2px 8px oklch(from var(--accent-primary) l c h / 0.1);
                }
            }
        }

        .additional-details {
            background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

            &:hover {
                border-color: oklch(from var(--accent-primary) l c h / 0.2);
            }

            summary {
                color: var(--text-primary);

                &:hover {
                    background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
                }
            }

            .field-count {
                color: var(--text-secondary);
            }

            .details-content {
                border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
            }

            .summary-left svg {
                color: light-dark(
                    oklch(from var(--accent-primary) l calc(c - 0.03) h),
                    oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h));
            }
        }

        /* Steps */
        .step {
            &:hover {
                background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
            }

            strong { color: var(--text-primary); }
            p { color: var(--text-secondary); }
        }

        .step-number {
            background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.06));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.1));
            color: var(--text-secondary);
        }

        .step--active {
            background: light-dark(
                oklch(from var(--accent-primary) l c h / 0.06),
                oklch(from var(--accent-primary) l c h / 0.08));

            .step-number {
                background: light-dark(
                    oklch(from var(--accent-primary) l c h / 0.12),
                    oklch(from var(--accent-primary) l c h / 0.2));
                border-color: light-dark(
                    oklch(from var(--accent-primary) l c h / 0.2),
                    oklch(from var(--accent-primary) l c h / 0.3));
                color: light-dark(
                    oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
                    oklch(from var(--accent-primary) calc(l + 0.15) calc(c - 0.05) h));
            }

            strong {
                color: light-dark(
                    oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
                    oklch(from var(--accent-primary) calc(l + 0.15) calc(c - 0.05) h));
            }
        }

        /* Tips */
        .tips-list {
            li {
                color: var(--text-secondary);

                strong {
                    color: var(--text-primary);
                }

                &::before {
                    background: var(--accent-primary);
                }
            }
        }
    }
}