/* ==========================================================================
   TOPPERWORK - GLOBAL BASE
   ==========================================================================
   Phase: 1

   Purpose:
   - Global HTML and body foundation
   - Application background system
   - Global text rendering
   - Main application structure
   - Surface foundation
   - Modern gradient background effect
   - Mobile-first and WebView-safe

   Important:
   - Page-specific styles do not belong here
   - Component-specific styles do not belong here
   ========================================================================== */


/* ==========================================================================
   1. HTML FOUNDATION
   ========================================================================== */

html {
    min-height: 100%;

    background:
        var(--color-page-bg);

    color-scheme:
        dark;

    -webkit-text-size-adjust:
        100%;

    text-size-adjust:
        100%;

    scroll-behavior:
        smooth;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   TOPPERWORK — GLOBAL CUSTOM SCROLLBAR CONTRACT
   Theme: Violet / Purple / Blue Gradient

   Applies to:
   - Main document
   - Dashboard
   - Modals
   - Category / skills panels
   - Any other scrollable TopperWork surface
   ========================================================================== */


/* Chrome, Edge, Safari */

html::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


html::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent;
}


html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #8B5CF6 0%,
            #A855F7 45%,
            #3B82F6 100%
        ) !important;

    border:
        2px solid transparent;

    border-radius:
        999px;

    background-clip:
        padding-box !important;
}


html::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #A78BFA 0%,
            #C084FC 45%,
            #60A5FA 100%
        ) !important;

    background-clip:
        padding-box !important;
}


/* Firefox fallback — Firefox does not support gradient scrollbar thumbs. */

@supports (-moz-appearance: none) {

    html,
    * {
        scrollbar-width:
            thin;

        scrollbar-color:
            #8B5CF6
            transparent;
    }

}


/* ==========================================================================
   2. BODY FOUNDATION
   ========================================================================== */

body {
    position: relative;

    min-width: 320px;

    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:
        var(--color-page-bg);

    color:
        var(--color-text);

    font-family:
        var(--font-family-base);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-base);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   3. GLOBAL APPLICATION BACKGROUND
   ========================================================================== */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 20%,
            var(--color-glow-primary),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 30%,
            var(--color-glow-accent),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 80%,
            var(--color-glow-primary-soft),
            transparent 50%
        );
}


/* ==========================================================================
   4. GLOBAL BACKGROUND LAYER
   ========================================================================== */

body::after {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            var(--color-page-gradient-start) 0%,
            var(--color-page-bg) 38%,
            var(--color-page-bg) 100%
        );
}


/* ==========================================================================
   5. ROOT APPLICATION CONTAINER
   ========================================================================== */

#app,
.topperwork-app {
    position: relative;

    z-index:
        var(--z-header);

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    isolation:
        isolate;
}


/* ==========================================================================
   6. MAIN APPLICATION AREA
   ========================================================================== */

main,
.topperwork-main {
    position: relative;

    flex: 1 0 auto;

    min-width: 0;
}


/* ==========================================================================
   7. GLOBAL SURFACE FOUNDATION
   ========================================================================== */

.topperwork-surface {
    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-md);
}


/* ==========================================================================
   8. SECONDARY SURFACE FOUNDATION
   ========================================================================== */

.topperwork-surface-secondary {
    background:
        var(--color-surface-secondary);

    border:
        1px solid
        var(--color-border);
}


/* ==========================================================================
   9. GLOBAL CONTENT CONTAINER
   ========================================================================== */

.topperwork-container {
    width: 100%;

    max-width:
        var(--container-max-width);

    margin-right:
        auto;

    margin-left:
        auto;

    padding-right:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    padding-left:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );
}


/* ==========================================================================
   10. WIDE CONTENT CONTAINER
   ========================================================================== */

.topperwork-container-wide {
    width: 100%;

    max-width:
        var(--container-wide-max-width);

    margin-right:
        auto;

    margin-left:
        auto;

    padding-right:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    padding-left:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );
}


/* ==========================================================================
   11. TEXT SELECTION
   ========================================================================== */

::selection {
    background:
        var(--color-selection-bg);

    color:
        var(--color-selection-text);
}


::-moz-selection {
    background:
        var(--color-selection-bg);

    color:
        var(--color-selection-text);
}


/* ==========================================================================
   12. ACCESSIBILITY - SKIP LINK
   ========================================================================== */

.skip-link {
    position: fixed;

    top:
        calc(
            var(--safe-area-top)
            + var(--space-3)
        );

    left:
        calc(
            var(--safe-area-left)
            + var(--space-3)
        );

    z-index:
        var(--z-critical);

    padding:
        var(--space-3)
        var(--space-4);

    border-radius:
        var(--radius-md);

    background:
        var(--color-primary);

    color:
        var(--color-primary-contrast);

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;

    transform:
        translateY(-150%);

    transition:
        transform
        var(--transition-normal);
}


.skip-link:focus {
    transform:
        translateY(0);
}


/* ==========================================================================
   13. TABLET FOUNDATION
   ========================================================================== */

@media (
    min-width: 641px
) {

    .topperwork-container,
    .topperwork-container-wide {
        padding-right:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            );
    }

}


/* ==========================================================================
   14. DESKTOP FOUNDATION
   ========================================================================== */

@media (
    min-width: 900px
) {

    .topperwork-container,
    .topperwork-container-wide {
        padding-right:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            );
    }

}


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior:
            auto;
    }


    .skip-link {
        transition:
            none;
    }

}

/* ==========================================================================
   TOPPERWORK — GLOBAL REQUIRED FIELD MARKER
   Brand-wide contract:
   Color: Error Red
   Size: 18px
   ========================================================================== */

:root {
    --topperwork-required-star-color:
        var(--color-error, #EF4444);

    --topperwork-required-star-size:
        18px;
}


/* All existing known required-star components */

:is(
    .topperwork-required-star,
    .topperwork-required-marker,
    .form-label__required,
    .topperwork-review-editor__required,
    .topperwork-portfolio__required-mark,
    .topperwork-certifications__required,
    .topperwork-availability__required,
    .topperwork-profile-identity__required
) {
    display: inline-block;

    color:
        var(--topperwork-required-star-color) !important;

    font-size:
        var(--topperwork-required-star-size) !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    vertical-align:
        -2px;

    margin-inline-start:
        3px;
}


/* Consistent edit-modal input typography */

:is(
    .topperwork-profile-editor__dialog,
    .topperwork-review-editor,
    .topperwork-taxonomy-editor__dialog,
    .topperwork-repeating-editor__dialog
)
:is(
    input:not([type="hidden"]),
    select,
    textarea
) {
    font-size:
        0.95rem;
}