/* Workspace presentation only. No workflow, permission, visibility or form state
   is controlled here. Tiny one-shot durations retain animation-end callbacks
   and the final frames of legacy reveal effects. */
@layer skyhr-static-motion {
@media screen {
    html.sky-presentation[data-sky-motion="none"],
    html.sky-presentation[data-sky-motion="none"] *,
    html.sky-presentation[data-sky-motion="none"] *::before,
    html.sky-presentation[data-sky-motion="none"] *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Brief, bounded motion for the workspace. Existing page-specific effects
   remain suppressed, and no animation runs when reduced motion is requested. */
@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes skyhr-workspace-arrival {
        from { opacity: .93; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes skyhr-surface-arrival {
        from { opacity: .94; }
        to { opacity: 1; }
    }
    @keyframes skyhr-tab-arrival {
        from { opacity: .72; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes skyhr-click-feedback {
        from { opacity: .72; }
        to { opacity: 1; }
    }
    html.sky-presentation[data-sky-motion="none"] body .dash-content :is(.ov-hero, .ov-stats > .ov-stat:nth-child(-n+8), .ov-wrap > .ov-card, .sky-page-heading) {
        animation-name: skyhr-workspace-arrival !important;
        animation-duration: 280ms !important;
        animation-timing-function: cubic-bezier(.2, .75, .25, 1) !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: none !important;
    }
    html.sky-presentation[data-sky-motion="none"] body .dash-content > .row > [class*="col-"] > .card,
    html.sky-presentation[data-sky-motion="none"] body .dash-content :is(.lop-panel:nth-of-type(-n+4), .wf-history-shell, .cap-shell) {
        animation-name: skyhr-surface-arrival !important;
        animation-duration: 220ms !important;
        animation-timing-function: ease-out !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: none !important;
    }
    html.sky-presentation[data-sky-motion="none"] body .dash-content .tab-pane.active {
        animation-name: skyhr-tab-arrival !important;
        animation-duration: 300ms !important;
        animation-timing-function: cubic-bezier(.2, .75, .25, 1) !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: none !important;
    }
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-nav-flyout {
        transition-property: opacity, transform !important;
        transition-duration: 180ms !important;
        transition-timing-function: ease-out !important;
    }
    html.sky-presentation[data-sky-motion="none"] body :is(.sky-rail-button, .dash-sidebar .dash-link, .dash-content .ov-activity-link, .dash-content .btn) {
        transition-property: background-color, border-color, box-shadow, color !important;
        transition-duration: 160ms !important;
        transition-timing-function: ease-out !important;
    }
    html.sky-presentation.sky-presentation[data-sky-motion="none"] body :is(.dash-sidebar .dash-link, .sky-nav-flyout a, .sky-rail-button, .dash-content a, .dash-content button:not(:disabled)):active {
        animation-name: skyhr-click-feedback !important;
        animation-duration: 160ms !important;
        animation-timing-function: ease-out !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: none !important;
    }
}
}

/* Animate the content between same-origin pages while the surrounding
   navigation stays in place. Unsupported browsers keep normal navigation. */
@media screen and (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    html.sky-presentation body .dash-content { view-transition-name: skyhr-content; }
    ::view-transition-group(root) { animation-duration: 0s; }
    ::view-transition-old(skyhr-content) {
        animation: skyhr-page-out 120ms ease-in both;
    }
    ::view-transition-new(skyhr-content) {
        animation: skyhr-page-in 300ms cubic-bezier(.2, .75, .25, 1) both;
    }
    @keyframes skyhr-page-out {
        to { opacity: 0; transform: translateY(-8px); }
    }
    @keyframes skyhr-page-in {
        from { opacity: .45; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media screen {
    /* A quiet static tint keeps depth without continuously repainting the
       viewport while the user scrolls or works in a form. */
    html.sky-presentation body:is(.sky-module-page, .sky-overview-page) {
        --sky-canvas-blue: rgba(49, 127, 211, .13);
        --sky-canvas-teal: rgba(32, 159, 172, .09);
        min-height: 100vh;
        isolation: isolate;
        background:
            radial-gradient(ellipse 70% 54% at 100% 0%, var(--sky-canvas-blue), transparent 72%),
            radial-gradient(ellipse 60% 65% at 0% 100%, var(--sky-canvas-teal), transparent 75%),
            var(--sky-ui-page, #f3f6fa) !important;
        background-attachment: scroll !important;
    }
    html.sky-presentation body.sky-dark {
        --sky-canvas-blue: rgba(23, 91, 161, .17);
        --sky-canvas-teal: rgba(12, 105, 125, .13);
    }
    html.sky-presentation body:is(.sky-module-page, .sky-overview-page) :is(.dash-container, .dash-content, .dash-footer) {
        background-color: transparent !important;
    }

    /* Compact company context, sized to its content instead of a page-wide bar. */
    .sky-group-context {
        display: flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin: 0 0 14px;
        padding: 7px 9px;
        border: 1px solid var(--sky-ui-line);
        border-radius: 12px;
        background: linear-gradient(115deg, var(--sky-ui-surface), var(--sky-ui-soft));
        box-shadow: 0 3px 12px rgba(23, 61, 103, .05);
    }
    .sky-group-context-icon {
        display: grid;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        place-items: center;
        border: 1px solid rgba(78, 143, 209, .25);
        border-radius: 9px;
        background: linear-gradient(140deg, #173f73, #357cc1);
        color: #fff;
        font-size: 16px;
    }
    .sky-group-context-copy {min-width: 0}
    .sky-group-context-copy strong {display: block; color: var(--sky-ui-heading); font-size: 13px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere}
    html.sky-presentation body .dash-content .sky-group-context-copy small {display: block; margin-top: 1px; color: var(--sky-ui-muted); font-size: 11px !important; line-height: 1.35}
    .sky-group-context-state {padding: 4px 7px; border-radius: 6px; background: #e3f7ed; color: #19724d; font-size: 10px; font-weight: 700}
    .sky-group-context-state.inactive {background: #fff0f0; color: #ae3434}
    .sky-group-context-actions {display: flex; align-items: center; gap: 6px; margin-inline-start: 4px; padding-inline-start: 10px; border-inline-start: 1px solid var(--sky-ui-line)}
    .sky-group-context-actions form {margin: 0}
    html.sky-presentation body .dash-content .sky-group-context-actions .btn {min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 11px !important; line-height: 1.4; white-space: nowrap}

    /* Retain colour/focus feedback without tiles jumping under the pointer. */
    html.sky-presentation :is(.ssh-stat:hover, .ssh-suggestion:hover, .ssh-suggestion.active, .ssh-history-item:hover, .ssh-action:hover, .ssh-add-button:hover, .ssh-save:hover) {
        transform: none !important;
    }
    html.sky-presentation .ssh-finder {top: 16px}
    html.sky-presentation .sky-rail-backdrop {background: rgba(7, 19, 34, .42)}
}

/* Attach the desktop Windows-style dock to the right screen edge. RTL mirrors
   it so it never covers the main navigation. Mobile keeps its bottom dock. */
@media screen and (min-width: 1025px) {
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail {
        right: 0 !important;
        left: auto !important;
        width: 62px;
        padding: 6px 4px;
        gap: 5px;
        border-radius: 15px 0 0 15px;
        border-right: 0 !important;
        box-shadow: -5px 8px 22px rgba(7, 29, 61, .14) !important;
    }
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-dock-title {height: 23px; flex-basis: 23px}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-dock-title i {display: block; font-size: 15px}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-dock-title span {display: none}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-button {min-height: 54px; padding: 5px 1px; border-radius: 9px}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-button > i {width: 26px; height: 26px; flex-basis: 26px; font-size: 17px}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-button-label {font-size: 8px !important; letter-spacing: -.1px; white-space: nowrap !important; overflow-wrap: normal}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail .sky-rail-button::after {right: 62px}
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-rail-panel {
        right: 72px;
        left: auto;
        width: min(370px, calc(100vw - 92px));
        transform-origin: right center;
    }
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail ~ .dash-container,
    html.sky-presentation[data-sky-motion="none"] body.sky-icon-navigation .sky-action-rail ~ .dash-footer {
        margin-right: 74px !important;
    }
    html.sky-presentation[data-sky-motion="none"][dir="rtl"] body.sky-icon-navigation .sky-action-rail {
        right: auto !important;
        left: 0 !important;
        border-radius: 0 15px 15px 0;
        border-left: 0 !important;
        border-right: 1px solid var(--sky-navigation-rail-border) !important;
    }
    html.sky-presentation[data-sky-motion="none"][dir="rtl"] body.sky-icon-navigation .sky-rail-panel {
        right: auto;
        left: 72px;
        transform-origin: left center;
    }
    html.sky-presentation[data-sky-motion="none"][dir="rtl"] body.sky-icon-navigation .sky-action-rail ~ .dash-container,
    html.sky-presentation[data-sky-motion="none"][dir="rtl"] body.sky-icon-navigation .sky-action-rail ~ .dash-footer {
        margin-left: 74px !important;
        margin-right: calc(var(--sky-rail-left, 12px) + var(--sky-rail-width, 68px) + 14px) !important;
    }
}

@media screen and (max-width: 650px) {
    .sky-group-context {width: 100%; gap: 8px; flex-wrap: wrap}
    .sky-group-context-copy {flex: 1 1 130px}
    .sky-group-context-actions {flex-wrap: wrap; margin-inline-start: 0; padding-inline-start: 0; border: 0}
}