/* ============================================================
   Harmony HR — Brand Tokens
   ============================================================ */
:root {
    --harmony-indigo: #3949ab;  /* Primary: buttons, links, spinners */
    --harmony-teal:   #00acc1;  /* Accent: gradients, highlights */
    --harmony-deep:   #1a237e;  /* Chrome: header, sidebar, dense headings */
    --harmony-ink:    #263238;  /* Body text */
    --harmony-surface: #f6f7fb; /* App background */
    --harmony-border: #e5e7eb;  /* Hairlines */
    --harmony-border-subtle: rgba(0, 0, 0, 0.08); /* Row dividers in profile module cards */

    /* Bridge: map Radzen's primary token to our brand indigo so existing
       `var(--rz-primary)` references and Radzen components pick up the brand
       automatically. See HARMONY_DESIGN.md §2.1. */
    --rz-primary: var(--harmony-indigo);

    /* Semantic theme layer (light values). The brand tokens above are
       theme-invariant; these --hr-* tokens are what flips in dark mode.
       All custom CSS + razor styles should reference these, never literals.
       See docs/architecture/DARK_MODE_PLAN.md §4. */
    --hr-bg: #f6f7fb;
    --hr-surface: #ffffff;
    --hr-surface-2: #f8f9fa;
    --hr-text: #263238;
    --hr-text-secondary: #6c757d;
    --hr-border: #e5e7eb;
    --hr-primary: #3949ab;
    --hr-accent: #00acc1;
    --hr-success: #198754;
    --hr-warning: #ffc107;
    --hr-danger: #dc3545;
    --hr-info: #0dcaf0;
    --hr-on-primary: #ffffff;

    /* Neutral hover overlay. Light overlays darken the surface; the dark block
       inverts this to a light overlay so hovers stay visible on dark surfaces. */
    --hr-hover: rgba(0, 0, 0, 0.04);

    /* Text/icons on saturated status fills (chips, count badges): white in
       light, dark in dark where the status hues lighten. */
    --hr-on-status: #ffffff;
    /* The light info and warning fills are pale: white fails on them, so
       chips on those fills take dark text in both themes. */
    --hr-on-info: #212529;
    --hr-on-warning: #212529;

    /* Brand chrome: the header gradient, auth hero panels and the gradients
       below stay dark in both themes, so text on them is always white. */
    --hr-on-chrome: #ffffff;
    /* Gradient ends deep enough that white text holds 4.5:1 across the fill. */
    --hr-gradient-brand: linear-gradient(135deg, var(--harmony-indigo) 0%, #00838f 100%);
    --hr-gradient-applicant: linear-gradient(135deg, #00796b 0%, #2e7d32 100%);

    /* Elevation (HARMONY_DESIGN.md §2.5 Whisper / Lift) and the modal scrim. */
    --hr-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.04);
    --hr-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --hr-shadow-color: rgba(15, 23, 42, 0.18);
    --hr-scrim: rgba(0, 0, 0, 0.5);

    /* Extra categorical hues for KPI accents beyond success/warning/danger/info. */
    --hr-purple: #6a1b9a;
    --hr-orange: #ef6c00;
    --hr-neutral: #607d8b;

    /* Hierarchy-level identity palette (workgroup tree, org chart, project
       work items, trainings). Each fill has its own badge text colour: dark
       on the light fills (levels 2-5), white on the rest. Every pair is at
       least 4.5:1 (WCAG AA) in both themes; the text tokens do not flip,
       the dark block only deepens the fills that carry white text. */
    --hr-level-1: #dc3545;
    --hr-level-2: #fd7e14;
    --hr-level-3: #ffc107;
    --hr-level-4: #20c997;
    --hr-level-5: #0dcaf0;
    --hr-level-6: #6f42c1;
    --hr-level-7: #d32f80;
    --hr-level-8: #6c757d;
    --hr-level-n: #495057;
    --hr-on-level-1: #ffffff;
    --hr-on-level-2: #212529;
    --hr-on-level-3: #212529;
    --hr-on-level-4: #212529;
    --hr-on-level-5: #212529;
    --hr-on-level-6: #ffffff;
    --hr-on-level-7: #ffffff;
    --hr-on-level-8: #ffffff;
    --hr-on-level-n: #ffffff;

    /* Surfaces that deliberately stay light in both themes: letter previews
       render as paper, and map overlays sit on light map tiles. Not
       overridden in the dark block. */
    --hr-paper: #ffffff;
    --hr-on-paper: #212529;
    --hr-map-control-bg: #ffffff;
    --hr-map-control-fg: #333333;
    --hr-map-control-muted: #555555;
    --hr-map-control-border: rgba(0, 0, 0, 0.2);
    --hr-map-control-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Dark theme overrides. Keyed off <html data-theme="dark"> set by theme.js /
   the pre-paint boot script in index.html. See docs/architecture/DARK_MODE_PLAN.md §4. */
[data-theme="dark"] {
    color-scheme: dark;

    --hr-bg: #121212;
    --hr-surface: #1e1e1e;
    --hr-surface-2: #2a2a2a;
    --hr-text: rgba(255, 255, 255, .87);
    --hr-text-secondary: rgba(255, 255, 255, .60);
    --hr-border: #3a3a3a;
    --hr-primary: #7986cb;
    --hr-accent: #4dd0e1;
    --hr-success: #66bb6a;
    --hr-warning: #ffb74d;
    --hr-danger: #ef5350;
    --hr-info: #4fc3f7;
    /* text/icon color for fills using --hr-primary; dark primary #7986cb is
       light, needs dark text — DARK_MODE_PLAN.md §4. */
    --hr-on-primary: rgba(0, 0, 0, .87);

    --hr-hover: rgba(255, 255, 255, 0.06);

    --hr-on-status: rgba(0, 0, 0, .87);
    --hr-on-info: rgba(0, 0, 0, .87);
    --hr-on-warning: rgba(0, 0, 0, .87);

    /* Darkened like the dark header gradient, to stay AA under white text. */
    --hr-gradient-brand: linear-gradient(135deg, #283593 0%, #00838f 100%);
    --hr-gradient-applicant: linear-gradient(135deg, #00695c 0%, #2e7d32 100%);

    /* Shadows need more weight to read against dark surfaces. */
    --hr-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --hr-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
    --hr-shadow-color: rgba(0, 0, 0, 0.6);
    --hr-scrim: rgba(0, 0, 0, 0.65);

    --hr-purple: #ce93d8;
    --hr-orange: #ffa726;
    --hr-neutral: #90a4ae;

    /* Fills under white text (levels 1, 6-8, n) go one step deeper to sit on
       dark surfaces; levels 2-5 keep their light fills, which carry dark text.
       White on these: 5.6 / 8.8 / 6.5 / 6.1 / 10.0 : 1. */
    --hr-level-1: #c82333;
    --hr-level-6: #59359a;
    --hr-level-7: #ab296a;
    --hr-level-8: #5c636a;
    --hr-level-n: #3d4349;

    /* Re-point the Radzen primary bridge at the bright dark-mode variant.
       app.css loads after the Radzen sheet, so the light :root bridge would
       otherwise stomp the dark sheet's primary and fail contrast (#3949ab on
       #121212 ≈ 2.1:1). See DARK_MODE_PLAN.md §3. */
    --rz-primary: var(--hr-primary);

    /* Dark --rz-primary (#7986cb) and Radzen's dark --rz-secondary (~#01a299)
       are light fills; Radzen's stock white on-primary/on-secondary text
       measures 3.45:1 / 3.17:1 there (contrast audit). Dark text hits ~6:1,
       matching the Material dark spec (dark text on lightened primaries).
       Fixes every Radzen primary/secondary-filled button, badge, and selected
       state in dark mode. */
    --rz-on-primary: rgba(0, 0, 0, .87);
    --rz-on-secondary: rgba(0, 0, 0, .87);

    /* Radzen dark maps tertiary -> #6c6c6c (3.17:1 — input placeholders, grid
       drag-hint) and disabled -> #545454 (2.2:1 — grid filter_alt icons) on
       #1e1e1e surfaces. These lift them to ~5.6:1 and ~3.8:1, keeping the
       muted/disabled affordance while clearing WCAG (4.5:1 text isn't
       required for disabled, but actionable filter icons need >=3:1
       non-text contrast). */
    --rz-text-tertiary-color: rgba(255, 255, 255, .55);
    --rz-text-disabled-color: rgba(255, 255, 255, .42);
}

/* Keep the header gradient in dark mode, darkened to stay AA with white text. */
[data-theme="dark"] .rz-header {
    background: linear-gradient(90deg, #283593 0%, #00838f 100%) !important;
}

/* Page canvas follows the semantic theme so the app background and the pre-Blazor
   boot splash flip with the theme instead of staying light. */
html, body {
    background-color: var(--hr-bg);
    color: var(--hr-text);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* Radzen validator messages placed with Style="position: absolute" (HARMONY_DESIGN §10.2).
   Radzen renders .rz-messages-error as inline-block, so an absolutely positioned one takes its static
   position at the END of the line holding a full-width input - the dialog edge - and wraps one word per
   line, clipped ("Plea / sele / work", RT-02). As a block it starts on the next line, under its field. */
.rz-messages-error[style*="absolute"] {
    display: block;
}

/* ---------- Radzen toast notifications ----------
   Radzen 10.4.3's default places `.rz-notification` at `top: 100px; right: 1rem`.
   Nudge it higher so toasts sit unambiguously at the top of the viewport.
   The `Position` attribute on <RadzenNotification> exists at compile time but
   throws at runtime in 10.4.3, so a CSS override is the safe way to standardize.
   `!important` overrides any per-toast inline Style supplied by older call sites. */
.rz-notification {
    inset-block-start: 1rem !important;
    inset-inline-end: 1rem !important;
}

/* ---------- Radzen data grids: fit the page width ----------
   Radzen renders every grid as `table-layout: fixed` and writes each column's
   Width onto its <col>, <th> and <td>, so the widths are a hard floor. Page
   grids declare 1,050-1,700 px of columns while a grid gets about 1,000 px at
   1366 px wide (300 px sidebar), so the table scrolled sideways and clipped
   the Delete column (QA-0035). Auto layout turns each Width into a preferred
   width: when the columns do not fit, they shrink in proportion to a floor.
   - Left-aligned text cells are size-contained, so long text no longer sets
     the column minimum; it ends in an ellipsis (tooltip: Radzen's cell title,
     or the hover helper in js/app.js) and never narrows below
     --hr-grid-text-col-min, which keeps a yyyy/MM/dd date whole. A column
     with no declared Width still takes an equal share of the room left over,
     as under fixed layout, and never less than that floor.
   - Inline editors (inputs, dropdowns, date pickers, numerics) never narrow
     below --hr-grid-editor-col-min, a usable editing width.
   - Everything else keeps its natural width as the column minimum: right- and
     centre-aligned values (a number is never cut), and cells holding buttons,
     checkboxes, switches, badges or drag handles (Actions columns stay whole).
   - Grids with stacked frozen columns stay fixed: Radzen offsets the second
     and later frozen columns by the declared widths. One frozen column per
     side sits at offset 0 and is safe.
   - A grid whose columns the user resizes returns to fixed layout: js/app.js
     pins every column at its rendered width and adds .hr-grid-manual on the
     first resizer drag, so the dragged width sticks as Radzen intends.
   A grid whose floors still exceed its frame (pay sheets) scrolls inside the
   frame; the page itself does not. HARMONY_DESIGN.md §10.3. */
:root {
    --hr-grid-text-col-min: 4.5rem;
    --hr-grid-editor-col-min: 10rem;
}

.rz-data-grid .rz-grid-table-fixed:not(.hr-grid-manual):not(:has(> thead > tr > th:is(.rz-frozen-cell-left:not(.rz-frozen-cell-left-end), .rz-frozen-cell-right:not(.rz-frozen-cell-right-end), .rz-frozen-cell-left-inner, .rz-frozen-cell-right-inner))) {
    table-layout: auto;

    & > thead > tr > th > div,
    & > tbody > tr.rz-expanded-row-content > td > .rz-expanded-row-template {
        contain: inline-size;
    }

    & > tbody > tr > td:not([style*="text-align:right"], [style*="text-align:center"]) > .rz-cell-data:not(:has(.rz-button, .rz-chkbox, .rz-switch, .rz-badge, [draggable], input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea, .rz-dropdown, .rz-datepicker, .rz-numeric, .rz-autocomplete)) {
        contain: inline-size;
        min-width: var(--hr-grid-text-col-min);
    }

    & > tbody > tr > td > .rz-cell-data:has(input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea, .rz-dropdown, .rz-datepicker, .rz-numeric, .rz-autocomplete) {
        contain: inline-size;
        min-width: var(--hr-grid-editor-col-min);
    }
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--hr-border);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--hr-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.rz-header {
    background: linear-gradient(90deg, var(--harmony-indigo) 0%, var(--harmony-teal) 100%) !important;
}

.rz-menu {
    background-color: transparent !important;
    border: none !important;
}

.rz-menu .rz-navigation-item-link {
    color: white !important;
}

.rz-menu .rz-navigation-item-icon {
    color: white !important;
}

.rz-menu .rz-navigation-item-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.rz-menu .rz-navigation-menu {
    background-color: var(--harmony-deep) !important;
}

.org-selector.rz-link .rzi {
    margin-right: 12px;
}

/*NavMenuItem*/

.nav-scrollable {
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
}

.search-container {
    padding: 8px;
    background-color: var(--hr-surface-2);
    border-bottom: 1px solid var(--hr-border);
}

.search-box-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

::deep .search-box-wrapper .rz-textbox {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--hr-border);
    background-color: var(--hr-surface);
}

::deep .search-box-wrapper .rz-button {
    background-color: transparent;
    border: none;
    padding: 4px;
    margin: 0;
}

::deep .search-box-wrapper .rz-button:hover {
    background-color: var(--hr-hover);
    border-radius: 4px;
}

::deep .rz-panel-menu {
    margin-top: 0.5rem;
}

.nav-scrollable::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable::-webkit-scrollbar-track {
    background: var(--hr-surface-2);
}

.nav-scrollable::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.nav-scrollable::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*NavMenuItem darker shades per level*/
::deep .rz-panel-menu {
    padding: 0;
}

::deep .rz-navigation-menu .rz-navigation-item-wrapper {
    padding: 8px 12px;
}

::deep .rz-panel-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--hr-hover) !important;
}

::deep .rz-panel-menu .rz-navigation-item {
    margin: 0;
}

/* Override any conflicting Radzen styles */
::deep .rz-panel-menu .rz-panel-menu-item {
    margin: 0;
    border: none;
}

::deep .rz-panel-menu .rz-navigation-item-wrapper {
    line-height: 1.25rem;
}

/* Keep icons aligned */
::deep .rz-panel-menu .rz-navigation-item-icon {
    margin-right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dialog Styles */
.rz-dialog {
    border-radius: 0.5rem;
    overflow: hidden; /* Ensures content doesn't overflow rounded corners */
}

.rz-dialog-titlebar {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.rz-dialog-content {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Optional: Style the dialog buttons to match rounded theme */
.rz-dialog .rz-button {
    border-radius: 0.25rem;
}

/* Optional: Add subtle shadow for depth */
.rz-dialog-wrapper .rz-dialog {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/*loading logo*/
.loading-container {
    gap: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: transparent;
    cursor: none;
    user-select: none;
}

.loading-logo {
    width: 96px;
    height: 96px;
    position: relative;
    animation: pulse 1.5s ease-in-out infinite;
}

    .loading-logo-image {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
        background: transparent;
    }

    .loading-logo:before {
        content: '';
        position: absolute;
        inset: -14px;
        border-radius: 50%;
        border: 3px solid rgba(57, 73, 171, 0.15);
        border-top-color: #3949ab;
        animation: spin 1s linear infinite;
        pointer-events: none;
    }

.loading-text {
    color: var(--hr-primary);
    font-size: 1rem;
    opacity: 0.85;
    animation: fadeInOut 1.5s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(0.95);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

/* ==========================================
   Loading Template System — 15 Variants (monthly rotation)
   The default pulse + ring on .loading-logo stays the fallback used by
   in-app loaders. The boot loader (index.html) opts into a specific
   variant by adding .loading-tmpl--<key> to .loading-container — see
   the rotation script there. Variants override the default animation
   and/or pseudo-elements via higher-specificity selectors. Preview all
   variants at /brand/loading-templates-preview.html.
   ========================================== */

/* Helper elements — hidden by default; specific variants reveal them */
.loading-orbit-dot {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--harmony-indigo);
    pointer-events: none;
}

.loading-bars {
    display: none;
    gap: 6px;
    margin-top: 0.5rem;
}

    .loading-bars span {
        width: 6px;
        height: 28px;
        background: var(--harmony-indigo);
        border-radius: 3px;
        transform-origin: center;
        display: inline-block;
    }

/* 01 — pulse (current default, surfaced as a variant for the rotation) */
.loading-container.loading-tmpl--pulse .loading-logo {
    animation: hlt-pulse 1.5s ease-in-out infinite;
}

@keyframes hlt-pulse {
    0%, 100% { transform: scale(0.95); }
    50%      { transform: scale(1.05); }
}

/* 02 — spin-ring (no scale, ring keeps orbiting) */
.loading-container.loading-tmpl--spin-ring .loading-logo {
    animation: none;
}

/* 03 — heartbeat (ECG-style double tap, then pause) */
.loading-container.loading-tmpl--heartbeat .loading-logo {
    animation: hlt-heartbeat 1.4s ease-in-out infinite;
}

@keyframes hlt-heartbeat {
    0%, 40%, 100% { transform: scale(1); }
    10%           { transform: scale(1.18); }
    20%           { transform: scale(1); }
    30%           { transform: scale(1.18); }
}

/* 04 — bounce (gentle vertical bounce) */
.loading-container.loading-tmpl--bounce .loading-logo {
    animation: hlt-bounce 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

@keyframes hlt-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* 05 — breathe (slow scale + opacity) */
.loading-container.loading-tmpl--breathe .loading-logo {
    animation: hlt-breathe 3s ease-in-out infinite;
}

@keyframes hlt-breathe {
    0%, 100% { transform: scale(0.88); opacity: 0.65; }
    50%      { transform: scale(1.02); opacity: 1.00; }
}

/* 06 — glow-halo (radiating indigo→teal halo) */
.loading-container.loading-tmpl--glow-halo .loading-logo {
    animation: hlt-glow 2.2s ease-out infinite;
    border-radius: 50%;
}

    .loading-container.loading-tmpl--glow-halo .loading-logo:before {
        content: none;
    }

@keyframes hlt-glow {
    0%   { box-shadow: 0 0 0 0 rgba(57, 73, 171, 0.55), 0 0 0 0 rgba(0, 172, 193, 0.35); }
    70%  { box-shadow: 0 0 0 18px rgba(57, 73, 171, 0),  0 0 0 32px rgba(0, 172, 193, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 73, 171, 0),     0 0 0 0 rgba(0, 172, 193, 0); }
}

/* 07 — orbit-dots (3 dots orbit logo at 120° apart) */
.loading-container.loading-tmpl--orbit-dots .loading-logo {
    animation: none;
}

    .loading-container.loading-tmpl--orbit-dots .loading-logo:before {
        content: none;
    }

.loading-container.loading-tmpl--orbit-dots .loading-orbit-dot {
    display: block;
    animation: hlt-orbit 1.6s linear infinite;
}

    .loading-container.loading-tmpl--orbit-dots .loading-orbit-dot:nth-child(2) {
        animation-delay: -0.533s;
        background: var(--harmony-teal);
    }

    .loading-container.loading-tmpl--orbit-dots .loading-orbit-dot:nth-child(3) {
        animation-delay: -1.066s;
    }

@keyframes hlt-orbit {
    from { transform: rotate(0deg) translateX(64px); }
    to   { transform: rotate(360deg) translateX(64px); }
}

/* 08 — wave-bars (4 EQ bars beneath logo) */
.loading-container.loading-tmpl--wave-bars .loading-logo {
    animation: none;
}

.loading-container.loading-tmpl--wave-bars .loading-bars {
    display: flex;
}

    .loading-container.loading-tmpl--wave-bars .loading-bars span {
        animation: hlt-wave 1s ease-in-out infinite;
    }

        .loading-container.loading-tmpl--wave-bars .loading-bars span:nth-child(2) {
            animation-delay: 0.10s;
            background: var(--harmony-teal);
        }

        .loading-container.loading-tmpl--wave-bars .loading-bars span:nth-child(3) {
            animation-delay: 0.20s;
        }

        .loading-container.loading-tmpl--wave-bars .loading-bars span:nth-child(4) {
            animation-delay: 0.30s;
            background: var(--harmony-teal);
        }

@keyframes hlt-wave {
    0%, 100% { transform: scaleY(0.35); }
    50%      { transform: scaleY(1.00); }
}

/* 09 — ripple (concentric circles emanate outward) */
.loading-container.loading-tmpl--ripple .loading-logo {
    animation: none;
}

    .loading-container.loading-tmpl--ripple .loading-logo:before,
    .loading-container.loading-tmpl--ripple .loading-logo:after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid var(--harmony-indigo);
        animation: hlt-ripple 1.8s ease-out infinite;
        pointer-events: none;
    }

    .loading-container.loading-tmpl--ripple .loading-logo:after {
        animation-delay: 0.9s;
        border-color: var(--harmony-teal);
    }

@keyframes hlt-ripple {
    0%   { transform: scale(1.00); opacity: 0.7; }
    100% { transform: scale(2.20); opacity: 0.0; }
}

/* 10 — flip (3D Y-axis flip) */
.loading-container.loading-tmpl--flip {
    perspective: 800px;
}

    .loading-container.loading-tmpl--flip .loading-logo {
        animation: hlt-flip 2.6s ease-in-out infinite;
        transform-style: preserve-3d;
    }

@keyframes hlt-flip {
    0%, 100% { transform: rotateY(0deg);   }
    50%      { transform: rotateY(360deg); }
}

/* 11 — float (vertical drift + slight tilt) */
.loading-container.loading-tmpl--float .loading-logo {
    animation: hlt-float 3s ease-in-out infinite;
}

@keyframes hlt-float {
    0%, 100% { transform: translateY(0)     rotate(-3deg); }
    50%      { transform: translateY(-10px) rotate( 3deg); }
}

/* 12 — gradient-sweep (shimmer mask across logo) */
.loading-container.loading-tmpl--gradient-sweep .loading-logo {
    animation: none;
}

.loading-container.loading-tmpl--gradient-sweep .loading-logo-image {
    -webkit-mask-image: linear-gradient(110deg, rgba(0,0,0,0.35) 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.35) 70%);
            mask-image: linear-gradient(110deg, rgba(0,0,0,0.35) 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.35) 70%);
    -webkit-mask-size: 250% 100%;
            mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: hlt-shimmer 2s linear infinite;
}

@keyframes hlt-shimmer {
    from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
    to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
}

/* 13 — tilt-bob (alternating tilt + vertical bob) */
.loading-container.loading-tmpl--tilt-bob .loading-logo {
    animation: hlt-tilt-bob 1.4s ease-in-out infinite;
}

@keyframes hlt-tilt-bob {
    0%, 100% { transform: translateY(0)    rotate(-8deg); }
    50%      { transform: translateY(-6px) rotate( 8deg); }
}

/* 14 — morph (border-radius morph on the logo image) */
.loading-container.loading-tmpl--morph .loading-logo {
    animation: none;
}

.loading-container.loading-tmpl--morph .loading-logo-image {
    animation: hlt-morph 2s ease-in-out infinite;
}

@keyframes hlt-morph {
    0%, 100% { border-radius: 50%; }
    50%      { border-radius: 25%; }
}

/* 15 — color-cycle (brand hue rotates across logo + ring + text) */
.loading-container.loading-tmpl--color-cycle .loading-logo,
.loading-container.loading-tmpl--color-cycle .loading-text {
    animation: hlt-color-cycle 4s linear infinite;
}

@keyframes hlt-color-cycle {
    from { filter: hue-rotate(0deg);   }
    to   { filter: hue-rotate(360deg); }
}

/* Respect prefers-reduced-motion across all variants */
@media (prefers-reduced-motion: reduce) {
    .loading-container[class*="loading-tmpl--"] .loading-logo,
    .loading-container[class*="loading-tmpl--"] .loading-logo:before,
    .loading-container[class*="loading-tmpl--"] .loading-logo:after,
    .loading-container[class*="loading-tmpl--"] .loading-logo-image,
    .loading-container[class*="loading-tmpl--"] .loading-orbit-dot,
    .loading-container[class*="loading-tmpl--"] .loading-bars span,
    .loading-container[class*="loading-tmpl--"] .loading-text {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================
   Mini size modifier — same 15 variants, scaled for in-page use.
   Drop fullscreen positioning so the loader can sit inside a card,
   dialog body, widget, or route auth gate. The .loading-tmpl--<key>
   variant rules above still match by class, so behavior is identical
   — only dimensions and positioning are overridden here.
   ========================================== */
.loading-container.loading-container--mini {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    padding: 1rem;
    gap: 0.5rem;
    z-index: auto;
    cursor: default;
}

    .loading-container--mini .loading-logo {
        width: 48px;
        height: 48px;
    }

        .loading-container--mini .loading-logo:before {
            inset: -7px;
            border-width: 2px;
        }

    .loading-container--mini .loading-text {
        font-size: 0.75rem;
    }

    /* orbit-dots: shrink dot + halve orbit radius */
    .loading-container--mini .loading-orbit-dot {
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
    }

    .loading-container--mini.loading-tmpl--orbit-dots .loading-orbit-dot {
        animation-name: hlt-orbit-mini;
    }

@keyframes hlt-orbit-mini {
    from { transform: rotate(0deg)   translateX(32px); }
    to   { transform: rotate(360deg) translateX(32px); }
}

/* wave-bars: shorter, thinner bars + tighter gap */
.loading-container--mini .loading-bars {
    gap: 4px;
    margin-top: 0.25rem;
}

    .loading-container--mini .loading-bars span {
        width: 4px;
        height: 14px;
    }

/* glow-halo: scale rings to logo size */
.loading-container--mini.loading-tmpl--glow-halo .loading-logo {
    animation-name: hlt-glow-mini;
}

@keyframes hlt-glow-mini {
    0%   { box-shadow: 0 0 0 0 rgba(57, 73, 171, 0.55), 0 0 0 0 rgba(0, 172, 193, 0.35); }
    70%  { box-shadow: 0 0 0 9px rgba(57, 73, 171, 0),  0 0 0 16px rgba(0, 172, 193, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 73, 171, 0),    0 0 0 0 rgba(0, 172, 193, 0); }
}

/* ripple: smaller max scale so rings don't bleed out of the card */
.loading-container--mini.loading-tmpl--ripple .loading-logo:before,
.loading-container--mini.loading-tmpl--ripple .loading-logo:after {
    animation-name: hlt-ripple-mini;
}

@keyframes hlt-ripple-mini {
    0%   { transform: scale(1.00); opacity: 0.7; }
    100% { transform: scale(1.80); opacity: 0.0; }
}

/* bounce: shorter travel */
.loading-container--mini.loading-tmpl--bounce .loading-logo {
    animation-name: hlt-bounce-mini;
}

@keyframes hlt-bounce-mini {
    0%, 100% { transform: translateY(0);    }
    50%      { transform: translateY(-8px); }
}

/* float: shorter drift */
.loading-container--mini.loading-tmpl--float .loading-logo {
    animation-name: hlt-float-mini;
}

@keyframes hlt-float-mini {
    0%, 100% { transform: translateY(0)    rotate(-3deg); }
    50%      { transform: translateY(-5px) rotate( 3deg); }
}

/* tilt-bob: shorter drift */
.loading-container--mini.loading-tmpl--tilt-bob .loading-logo {
    animation-name: hlt-tilt-bob-mini;
}

@keyframes hlt-tilt-bob-mini {
    0%, 100% { transform: translateY(0)    rotate(-8deg); }
    50%      { transform: translateY(-3px) rotate( 8deg); }
}

/* Branded progress indicators — indigo match to loading tile / theme color */
.rz-progressbar-value,
.rz-progressbar-indeterminate-value {
    background-color: #3949ab !important;
    background-image: linear-gradient(90deg, #3949ab, #00acc1) !important;
}

.rz-progressbar-circular .rz-progressbar-circular-fill {
    stroke: #3949ab !important;
}

.rz-progressbar-circular-indeterminate circle,
.rz-progressbar-circular-determinate circle {
    stroke: #3949ab;
}

/* Employee Profile Styles */
.employee-profile-sidebar {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.employee-profile-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.employee-photo-container {
    position: relative;
    display: inline-block;
}

.employee-basic-info {
    text-align: center;
}

.tab-content-container {
    padding: 1rem;
    min-height: 400px;
}

.rz-tabs-nav .rz-tabs-nav-item {
    min-width: 120px;
}

.rz-tabs-nav .rz-tabs-nav-item .rz-icon {
    margin-right: 0.5rem;
}

/* Wrapping tab strip for low-resolution displays (same rules as the inline
   .multi-row-tabs blocks on Projects/AccessGroups/Positions/RecipientGroups) */
.multi-row-tabs .rz-tabview-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    max-height: none !important;
    height: auto !important;
}

.multi-row-tabs .rz-tabview-nav-content {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.multi-row-tabs .rz-tabview-nav .rz-tabview-nav-content > li {
    flex: 0 0 auto !important;
    margin: 2px !important;
}

/* Payroll Module Card Styles */
.payroll-module-card {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.payroll-module-card:hover {
    border-color: var(--rz-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 991px) {
    .employee-profile-sidebar {
        max-height: none;
        margin-bottom: 1rem;
    }
    
    .employee-profile-content {
        max-height: none;
    }
}

/* Employee Profile Info Rows */
.info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.info-row .info-label {
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    min-width: 80px;
}

.info-row .info-value {
    color: var(--rz-text-color);
    flex: 1;
}

/* Workgroups Tree Styles */
.workgroup-tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.workgroup-tree-node:hover {
    border-left-color: var(--hr-primary);
    background-color: var(--hr-hover);
}

.workgroup-actions-left {
    display: inline-flex;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

.workgroup-actions-right {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: auto;
}

.workgroup-text {
    flex: 1;
    font-weight: 500;
}

.level-indicator {
    font-size: 0.8rem;
    color: var(--hr-text-secondary);
    font-style: italic;
    white-space: nowrap;
}

.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 18px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Placeholder node styles */
/* Placeholder rows read as muted through colour, not opacity: opacity also
   fades the text below 4.5:1. Their text uses --hr-text-secondary and the
   badge is an outline (see .placeholder-badge). */
.placeholder-node {
    font-style: italic;
}

.placeholder-text {
    color: var(--hr-text-secondary);
    font-weight: 300;
}

.placeholder-badge {
    border: 1px dashed var(--hr-text-secondary);
}

.placeholder-actions {
    width: 72px; /* Match the width of action buttons to maintain alignment */
}

/* Organizational Chart Styles */
.manpower-tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.manpower-tree-node:hover {
    border-left-color: var(--hr-success);
    background-color: var(--hr-hover);
}

.manpower-actions-left {
    display: inline-flex;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

.manpower-actions-right {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: auto;
}

.position-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.position-text {
    font-weight: 500;
    color: var(--rz-text-color);
}

.position-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.workgroup-reference-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.workgroup-reference-node:hover {
    background-color: var(--hr-hover);
}

/* Staffing status badges */
.badge.bg-success {
    background-color: var(--hr-success) !important;
}

.badge.bg-warning {
    background-color: var(--hr-warning) !important;
    color: #000 !important;
}

.badge.bg-danger {
    background-color: var(--hr-danger) !important;
}

.badge.bg-info {
    background-color: var(--hr-info) !important;
    color: #000 !important;
}

/* Secondary chip: mid-grey fill carries white text at AA in both themes; there
   is no --hr-secondary token, so this stays a theme-invariant literal. */
.badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Organizational Chart Split View */
.org-chart-container {
    display: flex;
    gap: 1rem;
    min-height: 500px;
}

.workgroup-reference-pane {
    min-width: 300px;
    max-width: 400px;
    background: var(--hr-surface-2);
    border-radius: 0.5rem;
    padding: 1rem;
}

.position-hierarchy-pane {
    flex: 1;
    background: var(--hr-surface);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--hr-border);
}

/* Connection lines between workgroups and positions */
.hierarchy-connection {
    position: relative;
}

.hierarchy-connection::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 20px;
    height: 1px;
    background: var(--hr-text-secondary);
    transform: translateY(-50%);
}

/* Level indicators with enhanced styling */
.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
    border: 2px solid transparent;
}

.level-badge.workgroup-level {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Enhanced tree styling */
::deep .rz-tree .rz-tree-item {
    margin-bottom: 0.25rem;
}

::deep .rz-tree .rz-tree-item-content {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

::deep .rz-tree .rz-tree-item:hover .rz-tree-item-content {
    background-color: var(--hr-hover);
}

/* New Dual-Pane Layout Styles */
.org-chart-workgroup-pane {
    min-width: 300px;
    background: linear-gradient(135deg, var(--hr-surface-2) 0%, var(--hr-border) 100%);
    border: 1px solid var(--hr-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.org-chart-workgroup-pane:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.org-chart-position-pane {
    flex: 1;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.org-chart-position-pane:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.org-chart-single-pane {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.org-chart-single-pane:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* Enhanced Workgroup Reference Node */
.workgroup-reference-node {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin: 0.25rem 0;
    background: var(--hr-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--hr-border);
    transition: all 0.2s ease;
    cursor: pointer;
}

.workgroup-reference-node:hover {
    background: var(--hr-hover);
    border-color: var(--hr-border);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
}

/* Placeholder Workgroup Node Styles */
.placeholder-workgroup-node {
    font-style: italic;
    cursor: default;
}

.placeholder-workgroup-node:hover {
    background: var(--hr-surface);
    border-color: var(--hr-border);
    transform: none;
    box-shadow: none;
}

.placeholder-text {
    color: var(--hr-text-secondary);
    font-weight: 300;
    font-style: italic;
}

.placeholder-badge {
    border: 1px dashed var(--hr-text-secondary);
}

/* Selected Workgroup Styles */
/* Selected-row tint derived from the primary token so it stays legible against
   the surface in both themes (a fixed blue wash washes out on #1e1e1e). */
.selected-workgroup {
    background: color-mix(in srgb, var(--hr-primary) 12%, transparent) !important;
    border-left: 4px solid var(--hr-primary) !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

.selected-workgroup:hover {
    background: color-mix(in srgb, var(--hr-primary) 18%, transparent) !important;
    transform: translateX(2px);
}

.workgroup-info {
    flex: 1;
    margin-left: 0.75rem;
}

.workgroup-text {
    font-weight: 500;
    color: var(--hr-text);
    display: block;
    margin-bottom: 0.25rem;
}

.workgroup-stats {
    font-size: 0.875rem;
    color: var(--hr-text-secondary);
}

/* Enhanced Level Badges */
.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.level-badge.workgroup-level {
    min-width: 2.25rem;
    height: 2rem;
    font-size: 0.8rem;
    border-radius: 0.75rem;
}

.level-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* Tree Container Improvements */
.workgroup-tree-container,
.position-tree-container {
    background: var(--hr-hover);
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--hr-border);
}

.position-tree-container {
    background: var(--hr-hover);
}

/* Enhanced Position Info */
.position-info {
    flex: 1;
    margin: 0 0.75rem;
}

.position-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.position-text {
    font-weight: 500;
    color: var(--hr-text);
}

.position-requirement {
    font-size: 0.8rem;
    color: var(--hr-text-secondary);
    font-style: italic;
}

.position-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--hr-text-secondary);
}

/* Action Button Improvements */
.manpower-actions-left,
.manpower-actions-right {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

::deep .rz-button.rz-button-xs {
    transition: all 0.2s ease;
}

::deep .rz-button.rz-button-xs:hover {
    transform: scale(1.05);
}

/* Empty State Improvements */
.text-center.p-4 {
    padding: 3rem 1.5rem !important;
    background: linear-gradient(135deg, var(--hr-surface-2) 0%, var(--hr-border) 100%);
    border-radius: 0.75rem;
    border: 2px dashed var(--hr-border);
    transition: all 0.3s ease;
}

.text-center.p-4:hover {
    border-color: var(--hr-border);
    background: linear-gradient(135deg, var(--hr-border) 0%, var(--hr-surface-2) 100%);
}

/* Workgroups Page Styles */
.workgroup-tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.workgroup-tree-node:hover {
    border-left-color: var(--hr-primary);
    background-color: var(--hr-hover);
}

.workgroup-actions-left {
    display: inline-flex;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

.workgroup-actions-right {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: auto;
}

.workgroup-text {
    flex: 1;
    font-weight: 500;
}

.level-indicator {
    font-size: 0.8rem;
    color: var(--hr-text-secondary);
    font-style: italic;
    white-space: nowrap;
}

.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 18px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Placeholder node styles */
/* Placeholder rows read as muted through colour, not opacity: opacity also
   fades the text below 4.5:1. Their text uses --hr-text-secondary and the
   badge is an outline (see .placeholder-badge). */
.placeholder-node {
    font-style: italic;
}

.placeholder-text {
    color: var(--hr-text-secondary);
    font-weight: 300;
}

.placeholder-badge {
    border: 1px dashed var(--hr-text-secondary);
}

.placeholder-actions {
    width: 72px; /* Match the width of action buttons to maintain alignment */
}

/* Responsive design for organizational chart */
@media (max-width: 991px) {
    .org-chart-container {
        flex-direction: column;
    }
    
    .workgroup-reference-pane {
        min-width: auto;
        max-width: none;
    }
    
    .org-chart-workgroup-pane,
    .org-chart-position-pane {
        min-width: auto;
        margin-bottom: 1rem;
    }
    
    .manpower-tree-node {
        flex-wrap: wrap;
    }
    
    .position-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Training tree node styles */
.training-tree-node {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    margin: 2px 0;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    min-height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.training-tree-node:hover {
    background: var(--hr-surface-2);
    border-color: var(--hr-border);
}

.training-actions-left {
    display: flex;
    gap: 4px;
    margin-right: 12px;
    min-width: 120px;
}

.training-actions-right {
    display: flex;
    gap: 4px;
    margin-left: auto;
    min-width: 40px;
}

.training-text {
    flex: 1;
    font-weight: 500;
    color: var(--hr-text);
    margin-left: 8px;
}

.training-info {
    font-size: 0.8rem;
    color: var(--hr-text-secondary);
    margin-left: 8px;
    font-style: italic;
}

.level-badge {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
    margin-right: 8px;
}

/* Training view dialog styles */
.training-view-dialog-container {
    height: calc(80vh - 120px);
    display: flex;
    flex-direction: column;
}

.training-view-dialog-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.training-view-dialog-tabs .rz-tabview-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.training-detail-grid-container {
    height: calc(80vh - 200px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.training-detail-grid-container .rz-datatable {
    height: calc(100% - 60px);
    min-height: 350px;
}

.training-detail-grid-container .rz-datatable .rz-datatable-scrollable-body {
    max-height: calc(100% - 120px);
    overflow-y: auto;
}

/* 2-Column Training Layout */
.training-tree-card {
    height: calc(100vh - 150px);
    min-height: 600px;
}

.training-details-card {
    height: calc(100vh - 150px);
    min-height: 600px;
}

.training-details-tabs {
    height: calc(100% - 80px);
}

.training-details-tabs .rz-tabview-content {
    height: calc(100% - 50px);
    overflow-y: auto;
}

.training-tree-node {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.training-tree-node:hover {
    background-color: var(--hr-surface-2);
}

/* Selected node uses a primary-derived tint so it reads on dark surfaces. */
.training-tree-node.selected {
    background-color: color-mix(in srgb, var(--hr-primary) 12%, transparent);
    border-left: 4px solid var(--hr-primary);
}

.training-no-selection {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Print styles for organizational chart */
@media print {
    .manpower-actions-left,
    .manpower-actions-right,
    .training-actions-left,
    .training-actions-right {
        display: none !important;
    }

    .workgroup-reference-pane {
        display: none !important;
    }

    .position-hierarchy-pane {
        border: none;
    }
}

/* ==========================================
   KPI / Dashboard Card Styles
   Pattern: Left accent border + rounded corners
   Matches: Training_LMS_Improvements_Proposal.pptx Slide 5
   ========================================== */
.kpi-card {
    border-radius: 0.5rem !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
}

.kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* =====================================================================
   Auth pages (login / forgot-password / select-organization) — the soft-oval
   card shell holding the brand half + form half. Dimensions mirror HarmonyPx's
   .px-auth__shell (60rem wide, 33rem tall, 2.75rem radius) so the split sits in
   one large-radius "oval" card; the two inner RadzenColumns clip to the curve
   via overflow:hidden. Applied to each auth page's RadzenRow.
   ===================================================================== */
.hr-auth-shell {
    width: 100%;
    max-width: 60rem;
    min-height: 33rem;
    border-radius: 2.75rem;
    overflow: hidden;
}

/* The auth layouts' RadzenBody carries default theme padding (~16px top/bottom).
   Left in place, it shifts the 100vh page wrapper down and breaks the vertical
   centering, so zero it for the auth layouts only. */
.hr-auth-layout .rz-body {
    padding: 0;
}

/* Vertically + horizontally center the oval card in the viewport. Wraps @Body
   in LoginLayout / SelectOrganizationLayout. */
.hr-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 1.5rem 0;
    box-sizing: border-box;
}

/* Vertically center each half's content (brand text / form) against the oval's
   full height. The brand card already does this inline; this also catches the
   form card so the inputs sit centered, not top-aligned. */
.hr-auth-shell > [class*="rz-col"] > .rz-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Login form fields adopt HarmonyPx's outlined, floating-label look: stretch the
   RadzenFormField / textbox / password and the submit button to the form width. */
.hr-auth-form .rz-form-field,
.hr-auth-form .rz-textbox,
.hr-auth-form .rz-password {
    width: 100%;
}
.hr-auth-form .rz-button.hr-auth-submit {
    width: 100%;
}

/* Collapse to a single rounded card once the columns stack (Radzen md = 768px). */
@media (max-width: 767px) {
    .hr-auth-shell {
        max-width: 26rem;
        min-height: 0;
        border-radius: 2rem;
    }

    /* Stacked: don't force full-viewport height — let the card flow naturally. */
    .hr-auth-page {
        min-height: 0;
        padding: 2rem 0;
    }
}