/*
#3874ff; OR var(--bs-primary) OR rgba(56, 116, 255, 1)
Root em (rem)
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] [optional inset];

Bootstrap primary secondary success danger warning info light dark - breakpoints
Extra small (none) 0px
sm 576px
md 768px
lg 992px
xl 1200px
xxl 1400px

hover, normal
primary #3874ff, #376ae3
secondary #5a6268, #6c757d
success #24883b, #2ca749
info #1b8495, #22a2b7
warning #dfa721, #fec02a
danger #c62137, #da3348
light #e2e6ea, #f8f9fa
dark #23272b, #343a40

in Bootstrap 5, Flexbox (Flexible Box Layout) is a one-dimensional layout model in CSS that allows developers to design complex, flexible layouts with ease
Flex is usually best for one dimensional layouts (rows OR columns), whereas Grid is usually best for two dimensional layouts (rows AND columns)

kendo-font-icons-5.3.0-index.css https://cdn.jsdelivr.net/npm/@progress/kendo-font-icons@5.3.0/dist/index.min.css
Kendo
HTML encoded output #: ... #
Raw output #= ... #
Important Notes: No backticks, No ${...}, Logic uses # var ... #, Data output uses #= ... # This is exactly how Kendo templating must interpolate.

1rem=16px
Icon https://remixicon.com/ https://icon-sets.iconify.design/ri/
CSS Grid is for layout; Flexbox is for alignment
color shades https://www.color-hex.com/color/266fd9 https://www.colorhexa.com/323337 https://www.color-hex.com/color/000000
HTML Beautify https://www.freeformatter.com/html-formatter.html#before-output
JS beautifier at https://beautifier.io/
HEX to RGBA https://rgbacolorpicker.com/hex-to-rgba https://codebeautify.org/hex-to-rgba-converter
SVG color invert https://isotropic.co/tool/hex-color-to-css-filter/
Emoji https://emojipedia.org/spiral-calendar

.class = refers to a item with that class
.class.class2 = more specific, as that refers to an element with BOTH class names
.class3 .class.class2 = even more specific, as that refers to an element with both class names that's a DESCENDENT of an element with class3

//CSS Using attribute
<span data-category-id="8" class="badge-category" title="Test." > abc</span >
.badge-category[data-category-id="8"] {
    --category-badge-text-color: #ffffff;
}

Start of Expand -> show.bs.collapse-> Immediately when the show() instance method is called, before the panel begins expanding.-> Expand
End of Expand-> shown.bs.collapse-> After the collapse transition has finished and the panel is fully visible.-> Expand (Completed)
Start of Collapse-> hide.bs.collapse-> Immediately when the hide() instance method is called, before the panel begins collapsing.-> Collapse
End of Collapse-> hidden.bs.collapse-> After the collapse transition has finished and the panel is fully hidden (display: none).-> Collapse (Completed)

Key,Value,Result,Notes
Simple Reload,window.location.reload(),"Reloads the current page from the CACHE, if possible. This is the fastest method.",
Force Reload,(The true parameter is deprecated in most modern browsers; browsers ignore it and treat as simple reload) window.location.reload(true),Forces the browser to reload the page from the server (bypassing the cache). This is crucial after form submissions or updates.,
Alternative (Current URL),window.location.href = window.location.href,"Assigns the current URL back to the href property, forcing the browser to navigate and reload.",
Alternative (Assignment),window.location.assign(window.location.href),Equivalent to setting window.location.href.,

//nested rules
.largescreen {
    @media (min-width:1024px) {
        form.w-full {
            max-width: 85%;
            margin: auto;
        }
        article.text-token-text-primary > div > div.w-full {
            max-width: 100%;
        }
    }
    #thread-bottom > div > div {
        --thread-content-max-width: unset !important;
    }
}

x-root {
    --duration-short: 100ms;
    --duration-default: 200ms;
    --duration-announcement-bar: 250ms;
    --duration-medium: 200ms;
    --duration-long: 300ms;
    --duration-extra-long: 600ms;
    --duration-extended: 3s;
    --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
    --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
    --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
    font-size: calc(var(--font-body-scale) * 16px);
    letter-spacing: .3px;
    font-weight: var(--font-body-weight);
    transition: all var(--duration-long) ease;
}
gridEditable_ModeInline_EditedRow
to
.k-table-tbody > .k-table-row.k-grid-edit-row

shadow scroll top and bottom https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
password / secret code reveal https://codepen.io/jh3y/pen/JjxPKXz
multiple pseudo https://stackoverflow.com/questions/75965513/css-outline-getting-covered-by-other-elements

https://higuma.github.io/bootstrap-4-css-customization/en/gradient+shadow.html

*/

/* #region Native override */

/*:root, [data-bs-theme=dark] {*/
/*--zbs-primary: #666cff;*/
/*--bs-primary: #3874ff;*/
/*--bs-heading-color: color-mix(in sRGB, #262b43 90%, #fff);*/
/*--bs-heading-color: #fff;*/
/*
     --ink-white: hsl(0, 0%, 100%);
    --ink-shadow1: 0 8px 15px 0px rgba(0, 0, 0, .15);
    --ink-shadow2: 0px 2px 4px -1px rgba(45, 55, 72, 0.1);
    --ink-shadow3: 0 2px 2px rgba(0, 42, 88, .08), 0 4px 4px rgba(0, 42, 88, .08), 0 8px 8px rgba(0, 42, 88, .08);
    --ink-shadow4: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    --ink-shadow-topnav: 0 0 20px rgba(0, 0, 0, .15);
    --ink-shadow-table-tr-hover: 1px 1px 10px 3px rgba(0, 0, 0, .05);
    */
/* ink
    --ink-width: 4px;
    --ink-width-minusOne: 3px;
    --ink-shadow0: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3); */

/* Small and up (>=1 576px) */
@media (min-width: 1px) {
    .respInput-650px {
        /* background: blue; */
        width: 100% !important;
    }
}

/* Targets screens between 768px and 4001px */
@media (min-width: 768px) and (max-width: 4001.98px) {
    .respInput-650px {
        /* background: xyz; */
        width: 650px !important;
    }
}

/* Medium and up (>=768px) */
@media (min-width: 768px) {
}

/* Large and up (>=992px) */
@media (min-width: 992px) {
}

/* XL and up (>=1200px) */
@media (min-width: 1200px) {
    /* KEEP .layout-navbar-fixed body:not(.modal-open) .layout-content-navbar .layout-menu,
    .layout-menu-fixed body:not(.modal-open) .layout-content-navbar .layout-menu,
    .layout-menu-fixed-offcanvas body:not(.modal-open) .layout-content-navbar .layout-menu {
        box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) !important;
    } */
}

/* XXL and up (>=1400px) */
@media (min-width: 1400px) {
}


:root, [data-bs-theme=light] {
    --ink-requiredBox-fontscale: 1;
    /* Brand */
    --ink-blue-50: #ebf2fc;
    --ink-blue-500: #3874ff;
    --ink-blue-600: #376ae3;
    --ink-green-500: #2ab01a;
    --ink-green-600: #1fa33c;
    --ink-green-800: #008000;
    --ink-gray-50: #fbfbfb;
    --ink-gray-100: #f5f5f5;
    --ink-gray-250: #dedede;
    --ink-gray-300: #cfd0d6;
    --ink-gray-400: #9b9b9b;
    --ink-gray-500: #6c757d;
    --ink-navy-900: #282a42;
    --ink-heading: #262b43;
    /* Kendo theme primary = brand blue (#3874ff). The Fluent theme derives every primary shade
       (-hover/-active/-subtle/-emphasis) from this base via oklch(from var(--kendo-color-primary) ...),
       so this single override recolours ALL Kendo primary UI (buttons, tabs, focus, etc.) to match.
       !important guarantees it wins over fluent-main.css regardless of stylesheet load order. */
    --kendo-color-primary: var(--ink-blue-500) !important;
    /* Semantic */
    --ink-primary: var(--ink-blue-500);
    --ink-primary-hover: var(--ink-blue-600);
    --ink-primary-soft: var(--ink-blue-50);
    --ink-success: var(--ink-green-600);
    /* Surfaces / borders / text */
    --surface-card: #ffffff;
    --border-hairline: var(--ink-gray-250);
    --border-control: var(--ink-gray-300);
    --border-strong: var(--ink-gray-400);
    --text-heading: var(--ink-heading);
    --text-body: #43464e;
    --text-muted: var(--ink-gray-500);
    --text-faint: var(--ink-gray-400);
    --text-link: var(--ink-blue-500);
    /* Gradients (90deg pale-blue to pale-green for card chrome) */
    --ink-gradient-header: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%);
    --ink-gradient-header-rev: linear-gradient(90deg, #e6f4ea 0%, #ebf2fc 100%);
    --ink-gradient-grid: linear-gradient(135deg, #282a42 0%, rgba(40, 42, 66, 0.95) 100%);
    /* Elevation / motion */
    --shadow-xs: 0 2px 4px -1px rgba(45, 55, 72, 0.10);
    --focus-ring: 0 0 0 2px rgba(56, 116, 255, 0.35);
    --duration-default: 200ms;
    --ease-standard: cubic-bezier(0.5, 0, 0.3, 1);
    /* Radii / sizing */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-lg: 0.625rem;
    --border-w-accent: 4px;
    --card-header-height: 78px;
    /* Type / weights (kept short - existing fonts win) */
    --weight-medium: 500;
    --weight-semibold: 600;
    --text-2xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-xl: 1.375rem;
    /* --- */
    --phoenix-blue: #3874ff;
    --phoenix-indigo: #6610f2;
    --phoenix-purple: #6f42c1;
    --phoenix-pink: #d63384;
    --phoenix-red: #fa3b1d;
    --phoenix-orange: #e5780b;
    --phoenix-yellow: #ffc107;
    --phoenix-green: #25b003;
    --phoenix-teal: #20c997;
    --phoenix-cyan: #0097eb;
    --phoenix-black: #000000;
    --phoenix-white: #fff;
    --phoenix-gray: #6e7891;
    --phoenix-gray-dark: #141824;
    --phoenix-gray-50: #f5f7fa;
    --phoenix-gray-100: #eff2f6;
    --phoenix-gray-200: #e3e6ed;
    --phoenix-gray-300: #cbd0dd;
    --phoenix-gray-400: #9fa6bc;
    --phoenix-gray-500: #8a94ad;
    --phoenix-gray-600: #6e7891;
    --phoenix-gray-700: #525b75;
    --phoenix-gray-800: #3e465b;
    --phoenix-gray-900: #31374a;
    --phoenix-gray-1000: #222834;
    --phoenix-gray-1100: #141824;
    --phoenix-primary: #3874ff;
    --phoenix-secondary: #31374a;
    --phoenix-success: #25b003;
    --phoenix-info: #0097eb;
    --phoenix-warning: #e5780b;
    --phoenix-danger: #fa3b1d;
    --phoenix-light: #eff2f6;
    --phoenix-dark: #141824;
    --phoenix-primary-rgb: 56, 116, 255;
    --phoenix-secondary-rgb: 49, 55, 74;
    --phoenix-success-rgb: 37, 176, 3;
    --phoenix-info-rgb: 0, 151, 235;
    --phoenix-warning-rgb: 229, 120, 11;
    --phoenix-danger-rgb: 250, 59, 29;
    --phoenix-light-rgb: 239, 242, 246;
    --phoenix-dark-rgb: 20, 24, 36;
    --phoenix-primary-text-emphasis: #003cc7;
    --phoenix-secondary-text-emphasis: #525b75;
    --phoenix-success-text-emphasis: #1c6c09;
    --phoenix-info-text-emphasis: #005585;
    --phoenix-warning-text-emphasis: #bc3803;
    --phoenix-danger-text-emphasis: #b81800;
    --phoenix-light-text-emphasis: #141824;
    --phoenix-dark-text-emphasis: #fff;
    --phoenix-primary-bg-subtle: #e5edff;
    --phoenix-secondary-bg-subtle: #eff2f6;
    --phoenix-success-bg-subtle: #d9fbd0;
    --phoenix-info-bg-subtle: #c7ebff;
    --phoenix-warning-bg-subtle: #ffefca;
    --phoenix-danger-bg-subtle: #ffe0db;
    --phoenix-light-bg-subtle: #f7f9fb;
    --phoenix-dark-bg-subtle: #9fa6bc;
    --phoenix-primary-border-subtle: #85a9ff;
    --phoenix-secondary-border-subtle: #cbd0dd;
    --phoenix-success-border-subtle: #90d67f;
    --phoenix-info-border-subtle: #60c6ff;
    --phoenix-warning-border-subtle: #ffcc85;
    --phoenix-danger-border-subtle: #f48270;
    --phoenix-light-border-subtle: #eff2f6;
    --phoenix-dark-border-subtle: #8a94ad;
    --phoenix-white-rgb: 255, 255, 255;
    --phoenix-black-rgb: 0, 0, 0;
    --phoenix-font-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --phoenix-font-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --phoenix-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --phoenix-body-font-family: var(--phoenix-font-sans-serif);
    --phoenix-body-font-size: 1rem;
    --phoenix-body-font-weight: 400;
    --phoenix-body-line-height: 1.49;
    --phoenix-body-color: #31374a;
    --phoenix-body-color-rgb: 49, 55, 74;
    --phoenix-body-bg: #f5f7fa;
    --phoenix-body-bg-rgb: 245, 247, 250;
    --phoenix-emphasis-color: #141824;
    --phoenix-emphasis-color-rgb: 20, 24, 36;
    --phoenix-secondary-color: #3e465b;
    --phoenix-secondary-color-rgb: 62, 70, 91;
    --phoenix-secondary-bg: #e3e6ed;
    --phoenix-secondary-bg-rgb: 227, 230, 237;
    --phoenix-tertiary-color: #525b75;
    --phoenix-tertiary-color-rgb: 82, 91, 117;
    --phoenix-tertiary-bg: #cbd0dd;
    --phoenix-tertiary-bg-rgb: 203, 208, 221;
    --phoenix-heading-color: var(--phoenix-emphasis-color);
    --phoenix-link-color: #3874ff;
    --phoenix-link-color-rgb: 56, 116, 255;
    --phoenix-link-decoration: none;
    --phoenix-link-hover-color: #003cc7;
    --phoenix-link-hover-color-rgb: 0, 60, 199;
    --phoenix-link-hover-decoration: underline;
    --phoenix-code-color: #d63384;
    --phoenix-highlight-color: #31374a;
    --phoenix-highlight-bg: #fff3cd;
    --phoenix-border-width: 1px;
    --phoenix-border-style: solid;
    --phoenix-border-color: #cbd0dd;
    --phoenix-border-color-translucent: rgba(203, 208, 221, 0.54);
    --phoenix-border-radius: 0.375rem;
    --phoenix-border-radius-sm: 0.25rem;
    --phoenix-border-radius-lg: 0.5rem;
    --phoenix-border-radius-xl: 1rem;
    --phoenix-border-radius-xxl: 2rem;
    --phoenix-border-radius-2xl: var(--phoenix-border-radius-xxl);
    --phoenix-border-radius-pill: 50rem;
    --phoenix-box-shadow: 0px 2px 4px -2px rgba(36, 40, 46, 0.08);
    --phoenix-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --phoenix-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --phoenix-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --phoenix-focus-ring-width: 0.25rem;
    --phoenix-focus-ring-opacity: 0.25;
    --phoenix-focus-ring-color: rgba(56, 116, 255, 0.25);
    --phoenix-form-valid-color: #25b003;
    --phoenix-form-valid-border-color: #25b003;
    --phoenix-form-invalid-color: #fa3b1d;
    --phoenix-form-invalid-border-color: #fa3b1d
}
.badge {
    --phoenix-badge-padding-x: 0.711111em;
    --phoenix-badge-padding-y: 0.355555em;
    --phoenix-badge-font-size: 0.75em;
    --phoenix-badge-font-weight: 700;
    --phoenix-badge-color: #fff;
    --phoenix-badge-border-radius: 0.25rem;
    display: inline-block;
    padding: var(--phoenix-badge-padding-y) var(--phoenix-badge-padding-x);
    font-size: var(--phoenix-badge-font-size);
    /* font-weight: var(--phoenix-badge-font-weight); */
    line-height: 1;
    color: var(--phoenix-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--phoenix-badge-border-radius);
}

/* WHY (user request 2026-10-25, Phoenix badge page: "BADGE text and icon", then "do only in these screens"): the badges were written icon first, then the word, in 78 places in markup and script plus the database rows. On the two screens the user named - Employee > Template (kGridAEarning is its first grid) and Employee > Leave (tabs_EmployeeLeave_Groups is its inner tab strip) - a badge that holds an icon is a row-reversed inline flex, so the icon shows AFTER the word. The user chose this one rule over rewriting the writers, and asked for flex here. `body:has(...)` so a dropdown list (a body-level popup) of those screens follows too. Every other screen keeps icon-then-word. The space or &nbsp; the writers put between icon and word is replaced by the gap. A badge with no icon is untouched. To add a screen, add its own id to the :is() list in the three rules below. */
body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.ri), body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.icon-base) {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}

/* The badges were tuned one by one while icon and word shared a text baseline (icon nudged 1-3px down, word nudged by a transform, padding split 0.30 / 0.41 or 0.42 / 0.29, per page). In the row-reversed flex the two items are centred on each other, so those nudges now push them APART (user report 2026-10-25: "badge text is not vertically center in dropdown"). They are switched off here, for a badge that holds an icon only, and the padding is made equal above and below, less 0.04em: measured from a screenshot of a badge (word capitals and icon ink against the badge box), word and icon then sit on the centre line together. !important because the per-page nudges are written at higher weight in several page stylesheets. */
body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.ri) > i.ri, body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.icon-base) > i.icon-base {
    top: 0px !important;
    vertical-align: baseline !important;
}

body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .k-list-item .badge:has(> i.ri) > i.ri, body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .k-list-item .badge:has(> i.icon-base) > i.icon-base {
    top: 0 !important; /* in a dropdown list icon and word move down TOGETHER (user request 2026-10-26) */
}

body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.ri) .badge-label, body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.ri) .page-status-badge-text, body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge:has(> i.icon-base) .badge-label {
    transform: translateY(0.0875rem) !important;
}

body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge.badge:has(> i.ri), body:is(:has(#kGridAEarning), :has(#tabs_EmployeeLeave_Groups)) .badge.badge:has(> i.icon-base) {
    padding-top: calc(var(--phoenix-badge-padding-y) + 0.045em) !important; /* the content sits 0.9px lower than the first measured centring (user request 2026-10-26, text 1px down); the icon is lifted back in the rule above in a grid */
    padding-bottom: calc(var(--phoenix-badge-padding-y) - 0.045em) !important;
}

.badge-phoenix {
    /* padding: 2px 10px; */
    background-color: var(--phoenix-badge-bg);
    color: var(--phoenix-badge-color);
    border: 1px solid var(--phoenix-badge-border-color)
}

    .badge-phoenix .badge-label {
        display: inline-block;
        -webkit-transform: translateY(0.0875rem);
        -ms-transform: translateY(0.0875rem);
        transform: translateY(0.0875rem)
    }

    .badge-phoenix[href]:hover, .badge-phoenix[href]:focus {
        text-decoration: none
    }

.badge-phoenix-primary {
    --phoenix-badge-bg: var(--phoenix-primary-bg-subtle);
    --phoenix-badge-color: var(--phoenix-primary-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-primary-border-subtle)
}

.badge-phoenix-secondary {
    --phoenix-badge-bg: var(--phoenix-secondary-bg-subtle);
    --phoenix-badge-color: var(--phoenix-secondary-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-secondary-border-subtle)
}

.badge-phoenix-success {
    --phoenix-badge-bg: var(--phoenix-success-bg-subtle);
    --phoenix-badge-color: var(--phoenix-success-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-success-border-subtle)
}

.badge-phoenix-info {
    --phoenix-badge-bg: var(--phoenix-info-bg-subtle);
    --phoenix-badge-color: var(--phoenix-info-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-info-border-subtle)
}

.badge-phoenix-warning {
    --phoenix-badge-bg: var(--phoenix-warning-bg-subtle);
    --phoenix-badge-color: var(--phoenix-warning-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-warning-border-subtle)
}

.badge-phoenix-danger {
    --phoenix-badge-bg: var(--phoenix-danger-bg-subtle);
    --phoenix-badge-color: var(--phoenix-danger-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-danger-border-subtle)
}

.badge-phoenix-light {
    --phoenix-badge-bg: var(--phoenix-light-bg-subtle);
    --phoenix-badge-color: var(--phoenix-light-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-light-border-subtle)
}

.badge-phoenix-dark {
    --phoenix-badge-bg: var(--phoenix-dark-bg-subtle);
    --phoenix-badge-color: var(--phoenix-dark-text-emphasis);
    --phoenix-badge-border-color: var(--phoenix-dark-border-subtle)
}



/* --- transition ---
  Opt-in all pages for automatic cross-document transitions
   Opts every same-origin navigation into the View Transition API. Browser snapshots old page, loads new doc, cross-fades.
*/
/*@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}*/

/* Optional: Customize the full-page animation duration and behavior
   Animates the outgoing page snapshot — fades out over 250ms.
*/
/*::view-transition-old(root) {
    animation: 250ms ease-out both transition-fade-out;
}*/

/* Animates the incoming page snapshot — fades in over 250ms.
   The opacity 1 to 0 and 0 to 1 curves.
*/
/*::view-transition-new(root) {
    animation: 250ms ease-in both transition-fade-in;
}

@keyframes transition-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes transition-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

--- transition ---
*/

/* KEEP: Hide the body until Kendo widgets are cast, then reveal (portal-custom.js).
   WHY visibility (NOT opacity/display:none): visibility keeps the layout box so
   Kendo can measure ComboBox width during the JS-cast (display:none would zero the
   width). The old opacity + 1s transition self-cancelled (removing the class stripped
   the transition in the same frame) and revealed the raw controls mid-swap = flicker. */
body.flickerFreePreload {
    visibility: hidden;
}

/* #region Override template */

code {
    margin: 0 2px 0 0;
}

/* pager - every grid */

.k-button.k-button-flat.k-button-primary:active,
.k-button.k-button-flat.k-button-primary.k-active,
.k-button.k-button-flat.k-button-primary.k-selected,
.k-button.k-button-outline.k-button-primary:active,
.k-button.k-button-outline.k-button-primary.k-active,
.k-button.k-button-outline.k-button-primary.k-selected {
    color: #fff !important;
    background-color: var(--phoenix-blue) !important;
    border-radius: 0px !important;
}

/* pager - specific grid */

.navbarButtonCompanyList {
    box-shadow: var(--bs-navbar-search-shadow); /* 0 0.25rem 0.5rem -0.25rem rgba(38, 43, 67, 0.42) OR -1px 0px 1px rgba(0, 0, 0, 0.30); */
}

    .navbarButtonCompanyList:hover {
        color: #fff;
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    /* WHY (user report 2026-10-14, "fix as per old way"): the button is a Kendo outline button now, and Kendo's own hover rule
       (.k-button.k-button-outline.k-button-primary:hover - a 3% tint) is as specific as the rule above and is the one that won. Kendo writes that
       background-color with !important, so only an !important twin can beat it: the same four-class selector here, later in the cascade, puts the
       old hover back - SOLID blue, white text - on hover, focus and press. */
    .k-button.k-button-outline.navbarButtonCompanyList:hover,
    .k-button.k-button-outline.navbarButtonCompanyList:focus,
    .k-button.k-button-outline.navbarButtonCompanyList:active {
        color: #fff !important;
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

.ink-section {
    color: var(--bs-primary);
    margin-bottom: 0.1rem !important;
    box-shadow: 0px 15px 10px 0px rgba(136, 159, 219, 0.05);
    border-left: 3px solid var(--phoenix-primary);
    border-bottom: 1px solid var(--phoenix-primary);
    background: linear-gradient(180deg, #ebf3fc 0%, #ffffff 60px);
    padding: 8px;
    font-size: 14px;
}

/* Titled group box - the heading sits ON the top border (fieldset-legend look) so the bordered box reads as one labelled group instead of a title floating above the fields. Put .ink-groupBox on the `border rounded` wrapper and .ink-groupBox-title on its heading. */
.ink-groupBox {
    position: relative;
    padding-top: 1.5rem !important; /* clear the on-border title and leave a small gap before the first field; overrides the .p-4 top padding (which carries Bootstrap's !important) - tune this value for more/less gap */
}

    .ink-groupBox > .ink-groupBox-title {
        position: absolute;
        top: 0;
        left: 14px;
        transform: translateY(-50%); /* centre the title on the border line */
        margin: 0px;
        padding: 0 8px;
        line-height: 1.1;
        background: var(--bs-card-bg, #ffffff); /* match the card behind it so the title notches the border like a legend */
    }

/* The typed text, marked inside a Company Search result AND in every grid by the shared appJSCommon.HighlightHelper. Background only - no padding or border, so the text never shifts. */
.ink-searchMark {
    padding: 0;
    color: inherit;
    background-color: rgba(255, 214, 0, 0.45);
}

/* The Companies page's New Company form (2026-10-09). Same 10px left edge as the toolbar button above it, a fixed readable width for the two fields (a full-width box for a company name looks stretched),
   an even gap between every field, between the last field and the buttons, and a soft line under the buttons so the form reads as separate from the grid below. No flex: stacked blocks + margins. */
.ink-newCompanyForm {
    padding: 1rem 10px;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ink-newCompanyForm__intro {
    margin-bottom: 1rem;
    color: var(--text-body);
}

.ink-newCompanyForm .ink-field {
    max-width: 28rem;
    margin-bottom: 1rem;
}

.ink-newCompanyForm .ink-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.ink-newCompanyForm__actions {
    margin-top: 1.5rem;
}

.ink-newCompanyForm__actions .k-button + .k-button {
    margin-left: 0.5rem;
}

.navbar-nav {
    padding-left: 1px;
}
/* #endregion Override template */

/* #region Override Telerik Kendo controls */

.k-window .ink-field .k-label {
    font-size: var(--kendo-font-size);
    font-weight: 600;
}

.k-button.k-button-primary,
.k-button.k-button-solid.k-button-primary {
    color: #fff;
}

.k-input-lg, .k-picker-lg {
    font-size: var(--kendo-font-size-lg, inherit);
    height: 3.0000625rem;
    min-height: 3.0000625rem;
    line-height: 1.375;
}

KEEP.k-calendar .k-calendar-td.k-today .k-link {
    background-color: rgba(56, 116, 255, 1) !important;
}

/* GitHub INK-Tracker#24: every rule below is scoped OFF the INKER date picker's calendar (.ink-dates-calendar), whose look lives in ink-date-pickers.css - these old global rules used !important and overrode it */
/* Header (SU / SA) */
.k-calendar:not(.ink-dates-calendar) th.k-calendar-th {
    font-weight: 500;
}

    /* Change background for Saturday header */
    .k-calendar:not(.ink-dates-calendar) th.k-calendar-th[aria-label="Saturday"] {
        background-color: rgba(245, 245, 245, 1);
        color: rgba(36, 36, 36, 0.6);
    }

    /* Change background for Sunday header */
    .k-calendar:not(.ink-dates-calendar) th.k-calendar-th[aria-label="Sunday"] {
        background-color: rgba(245, 245, 245, 1);
        color: rgba(36, 36, 36, 0.6);
    }

/* Date cells */
.k-calendar:not(.ink-dates-calendar) tbody td.k-weekend {
    background-color: rgba(245, 245, 245, 0.2) !important;
    border-radius: 0px !important;
    color: rgba(36, 36, 36, 0.6);
}

KEEP.k-calendar .k-calendar-td:focus,
KEEP.k-calendar .k-calendar-td.k-focus {
    box-shadow: inset 0 0 0 2px rgba(56, 116, 255, 1) !important;
}

.k-calendar:not(.ink-dates-calendar) .k-calendar-footer .k-button-text {
    color: rgba(56, 116, 255, 1) !important;
}

/* Day cells - hover shows a solid accent circle with white text so the number stays readable. Target .k-link (the circle), not the td, so it wins over the Fluent theme's own link colour; the old rule set white text on the td with no background, so the number vanished/greyed on the theme's faint hover fill. */
.k-calendar:not(.ink-dates-calendar) .k-calendar-td:hover:not(td.k-weekend) .k-link,
.k-calendar:not(.ink-dates-calendar) .k-calendar-td.k-hover:not(td.k-weekend) .k-link {
    background-color: rgba(56, 116, 255, 1) !important; /* app accent blue (same as the footer / today marker) */
    color: #ffffff !important;
}

/* Selected day - filled accent circle with white text (was a dark number on a faint fill) */
.k-calendar:not(.ink-dates-calendar) .k-calendar-td.k-selected {
    background-color: rgba(56, 116, 255, 1) !important;
    border-color: rgba(56, 116, 255, 1) !important;
}

.k-calendar:not(.ink-dates-calendar) .k-calendar-td.k-selected .k-link {
    background-color: rgba(56, 116, 255, 1) !important;
    color: #ffffff !important;
}

/* Kendo TextBox inside Materialize .form-floating-outline - restore the floating label.
   The Kendo wrapper <span> carries BOTH .k-textbox and .form-control, so the theme's
   ".form-floating > .form-control ~ label" rules target that <span>. A <span> can never match
   :placeholder-shown, so those rules pin the label to a fixed state that ignores the real
   input. Drive BOTH label states off the inner .k-input-inner via :has() (Chrome is the
   supported browser); specificity is set so RESTING > FLOATED > the theme's span rules.
   Values mirror core.css ".form-floating.form-floating-outline" (body font-size 0.9375rem). */

/* Hide the native placeholder; the <label> is the placeholder when resting */
.form-floating.form-floating-outline > .k-textbox > .k-input-inner::placeholder {
    color: transparent;
}

/* RESTING (input empty and not focused): label sits inside as the placeholder.
   Overrides the span-driven always-float back to the base label position. */
.form-floating.form-floating-outline:has(> .k-textbox > .k-input-inner:placeholder-shown:not(:focus)) > label {
    inset-block-start: 0;
    block-size: 100%;
    inline-size: auto;
    margin: 0;
    padding: 0.8555rem 1rem;
    font-size: 0.9375rem;
    opacity: 1;
    transform: none;
}
.form-floating.form-floating-outline:has(> .k-textbox > .k-input-inner:placeholder-shown:not(:focus)) > label::after {
    background-color: transparent;
}

/* FLOATED (input focused or holding a value): label floats onto the top border */

/* On focus, the floating label turns the app accent blue (#3874ff). :has(:focus) covers native inputs and Kendo inner inputs (.k-input-inner:focus); :has(.k-focus) covers Kendo widgets that flag focus with a class on the wrapper (e.g. DropDownList/ComboBox picker). The required-asterisk <code>*</code> keeps its own colour (it has its own rule, so it does not inherit this blue). */
.form-floating.form-floating-outline:has(:focus) > label,
.form-floating.form-floating-outline:has(.k-focus) > label {
    color: var(--phoenix-blue) !important;
}

/* 05 look (Employment_Bootstrap_Modern.html) for a Kendo TextBox AND ComboBox inside a floating wrapper. ONE clean box: the wrapper <span> draws the Bootstrap box (3.5rem + 2px tall, 1px grey border, .375rem corners, 1rem text) and holds the label's room as padding; the inner input must not draw a second rounded box with Kendo's own 4px focus ring (that was the "box inside a box"), and the ComboBox's clear and arrow buttons sit inside the one box. Focus shows once, on the wrapper's own border. The floated label is small, normal case, plain weight and 65% faded - not the theme's bold upper-case label. */
.form-floating > .k-textbox,
.form-floating > .k-combobox {
    height: calc(3.5rem + 2px);
    padding: 1.625rem 0.75rem 0.625rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.25;
}

/* WHY (user request 2026-10-24, "gap between Job Title and its text"): Phoenix's ".form-floating > .form-control:not(:placeholder-shown)" (specificity 0,3,0) forces 22.5px top padding on a box that holds
   a value, so the plain rule above never won and the value sat tight under the floated label. The doubled classes raise this rule to 0,4,0; 1.875rem top / 0.375rem bottom puts the value 4px lower,
   inside the same 3.5rem box (checked live on Employment > Job Title). */
.form-floating.form-floating > .k-textbox.k-textbox,
.form-floating.form-floating > .k-combobox.k-combobox {
    padding: 1.875rem 0.75rem 0.375rem;
}

.form-floating > .k-textbox > .k-input-inner,
.form-floating > .k-combobox > .k-input-inner {
    height: 1.25rem;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1.25;
}

.form-floating > .k-combobox > .k-input-button {
    height: 1.25rem;
    padding: 0;
    background-color: transparent;
}

/* WHY (user request 2026-10-24, "show one down arrow ... the grey line and second down arrow not OK"): a Kendo ComboBox / DropDownList in a floating box also wears Bootstrap's form-select class, which paints
   ITS OWN chevron as a background image on the box - so the ComboBox showed two stacked arrows, the Kendo one in its button and Bootstrap's behind it - and Kendo's arrow button draws a grey divider line on its
   left. The Bootstrap chevron is removed (the Kendo arrow stays: it is the real, clickable button) and the divider is dropped. Checked live on Employment > Employment Type: one arrow, no line. */
.k-combobox.form-select,
.k-dropdownlist.form-select,
.k-combobox > .k-input-inner.form-select {
    background-image: none;
}

.k-combobox > .k-input-button,
.k-dropdownlist > .k-input-button {
    border-left: 0;
}

/* WHY (user request 2026-10-24, "in vertical total centre"): in a floating box the clear (x) and arrow buttons sat on the VALUE's row, 12px below the box's centre (the box keeps its top 30px for the
   floated label). They are lifted by half of (top padding 1.875rem - bottom padding 0.375rem) = 0.75rem, which puts them on the box's own centre line.
   RELATIVE, not absolute (the first try used absolute + translate and the user reported the arrow needing several clicks): a relative offset leaves the button IN the widget's own layout, and its
   clickable area moves with what you see. Checked live: the whole button area hits the button, and four real clicks in a row toggled the list open / closed / open / closed. */
.form-floating > .k-combobox > .k-input-button,
.form-floating > .k-combobox > .k-clear-value {
    position: relative;
    top: -0.75rem;
}

.form-floating:has(> .k-textbox) > label,
.form-floating:has(> .k-combobox) > label {
    padding: 1rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.65);
}

.form-floating:has(> .k-textbox) > label > code,
.form-floating:has(> .k-combobox) > label > code {
    background: transparent;
}

.form-floating > .k-textbox.k-focus,
.form-floating > .k-combobox.k-focus {
    border-color: var(--phoenix-blue);
    box-shadow: 0 0 0 0.25rem rgba(56, 116, 255, 0.25);
}

/* Floating textarea (05 look, Employment termination note): Bootstrap cannot size a floating box from rows, so the box gets its own height and only grows downward. */
.form-floating:has(> .ink-floatingTextArea) > label {
    padding: 1rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.65);
}

.form-floating > .form-control.ink-floatingTextArea {
    border-radius: 0.375rem;
    font-size: 1rem;
    height: 10rem;
    min-height: 10rem;
    resize: vertical;
}

/* Guidance line under a floating box (05 look): muted, close to the box above it */
.form-text {
    margin-top: 0.25rem;
}

/* #endregion Override Telerik Kendo controls */

@keyframes ani-scroll-indicator-glow {
    /* https://codepen.io/Cejay101/pen/oNrKzQw */
    0% {
        box-shadow: 0 0 5px #3498db, 0 0 10px #3498db, 0 0 15px #3498db, 0 0 20px #3498db, 0 0 25px #3498db;
    }

    50% {
        box-shadow: 0 0 20px #9b59b6, 0 0 30px #9b59b6, 0 0 40px #9b59b6, 0 0 50px #9b59b6, 0 0 60px #9b59b6;
    }

    100% {
        box-shadow: 0 0 5px #3498db, 0 0 10px #3498db, 0 0 15px #3498db, 0 0 20px #3498db, 0 0 25px #3498db;
    }
}

/* #region scroll-indicator */

/*.KEEPscroll-container {
    background-color: #b2d4ff;
    height: 4px;
    position: fixed;
    width: 100%;
    z-index: 1100 !important;
}*/

.scroll-indicator {
    /*animation: ani-scroll-indicator-glow 1s infinite;*/
    position: fixed;
    top: 0px; /* 64px */
    bottom: 0;
    z-index: 1100 !important;
    width: 0%;
    height: 3px !important; /* 4px */
    background-color: var(--bs-primary); /* KEEP #3450ff; #d9d9d9; */
    /*do not put will effect tabs matching background-image: linear-gradient(to bottom right, #3450ff, #07c0ff);*/
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px 0px 2px 0px #cccccc;
    transition: width 0.3s; /* 0.3s ease-out; */
}

/* #endregion scroll-indicator */

/* #region back-to-top */

button.back-to-top {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bs-primary);
    height: 0px;
    width: 0px;
    overflow: hidden;
    border-radius: 50px;
    color: transparent;
    clear: both;
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    display: block;
    border: none;
    right: 50px;
    bottom: 75px;
    font-size: 0px;
    z-index: 99;
    transition: all .3s ease-in-out;
    opacity: 1;
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--bs-primary);
    outline-offset: 4px;
    box-shadow: 8px -8px 15px 0px rgba(0, 0, 0, 0.3);
}

    button.back-to-top:hover, button.back-to-top:active, button.back-to-top:focus {
        outline: 0 !important;
        opacity: 1;
        filter: drop-shadow(2px 2px 2px #ccc);
    }

    button.back-to-top::before, button.back-to-top::after {
        content: "";
        display: block;
        border-bottom: solid 10px rgba(25, 124, 244, 0.9);
        border-left: solid 10px transparent;
        line-height: 0;
        border-right: solid 10px transparent;
        height: 0;
        margin: 10px auto 17px;
        width: 0;
        border-radius: 20px;
        visibility: hidden;
    }

    button.back-to-top.show::after, button.back-to-top.show::before {
        visibility: visible;
    }

    button.back-to-top::after {
        border-bottom-color: #fff;
        position: relative;
        top: -24px;
    }

    button.back-to-top.show {
        display: block;
        color: var(--bs-primary);
        font-size: 25px;
        right: 40px; /* 67 */
        bottom: 9px;
        height: 40px;
        width: 40px;
        visibility: visible;
        opacity: .85;
        transition: all 1s;
    }

        button.back-to-top.show:hover {
            box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
            opacity: 1;
            transform: scale(1.05);
        }

/* the INK logo the back-to-top button replaces: pinned where the button appears, faded out by TLF_BackToTop_Show once the page is scrolled (it was in the Materialize footer's own style block) */
.logo-bottom-footer-right {
    position: fixed;
    bottom: 13px;
    right: 49px;
    z-index: 1100;
    filter: drop-shadow(0 0 0.5rem #000);
}

/* #endregion back-to-top */

/*KEEP LeftNavBar Shadow html.layout-navbar-fixed .menu-vertical {
    box-shadow: 3px 4px 12px 2px rgba(0, 0, 0, .3);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}*/

/* #region START: Audit */

.accordion-header {
    margin: -1px;
}

#auditTable {
    border: solid 1px var(--phoenix-border-color-translucent) !important;
}

    #auditTable .auditData-lines {
        line-height: 1.8;
    }

#accordionAudit {
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4rem;
}

    #accordionAudit .table > thead {
        box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1);
    }

    #accordionAudit .accordion-button {
        color: var(--bs-primary);
        /*KEEP background-color: #f2f2f3 !important;*/
    }

/* WHY (user request 2026-10-24): in the Audit Type column (3rd cell) the Add / Edit / Delete icon and its badge were both baseline-aligned, so the icon rode ~2px above the badge's centre.
   Both are middle-aligned now; measured live, the two centres are identical on every row. Scoped to that cell so the badges in the Audit Data column are untouched. */
#accordionAudit table td:nth-child(3) > i.ri,
#accordionAudit table td:nth-child(3) > .badge {
    vertical-align: middle;
}

        #accordionAudit .accordion-button.collapsed {
            background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%) !important;
            border-top: solid 3px var(--bs-primary);
        }


    #accordionAudit .accordion-body thead tr {
        background-color: var(--phoenix-primary-bg-subtle);
    }

    #accordionAudit tbody tr {
        /* Smoothly animate all three properties background-color 0.02s ease 0.01s; duration 0.02s, delay 0.01s */
        transition: all 0.3s ease;
        opacity: 1 !important;
        border-bottom: solid 1px rgba(207, 208, 214, 0.4) !important; /* bottom line */
        border-left: solid 3px transparent; /* WHY (2026-08-06): the :hover rule paints a 4px primary border-left - reserve the SAME 4px here (transparent) so hovering only recolors it and the row never shifts/flickers sideways */
    }

        #accordionAudit tbody tr td:first-child {
            position: relative; /* REQUIRED */
            padding-left: 24px; /* space for icon */
        }

        /* Hovered row background + bottom line - see 990 and 473Audit */
        #accordionAudit tbody tr:hover {
            /*background-color: rgba(235, 242, 252, 0.9) !important;*/
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
            /* box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15) !important; */
            border-bottom: solid 1px rgba(155, 155, 155, 1) !important; /* bottom line 207, 208, 214, 1 */
            border-left: solid 3px var(--bs-primary);
            /* box-shadow: inset 0 -1px 2px 0 rgba(192, 192, 192, 1) !important; inset horizontal vertical blur spread color */
            /* opacity: 1 !important; x-box-shadow: var(--bs-navbar-search-shadow); 0 3px 6px rgba(197, 197, 197, 1); border-left: solid 1px rgba(222, 226, 228, 1);
            border-right: solid 1px rgba(222, 226, 228, 1); */
        }

    #accordionAudit .bg-label-secondary {
        background-color: #eaf2f9 !important; /* #f2f2f3 */
    }

        #accordionAudit .bg-label-secondary:hover {
            background-color: #f2f2f3 !important;
            filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
        }

    #accordionAudit .badge.text-bg-success,
    #accordionAudit .badge.text-bg-danger {
        line-height: 0.7;
    }

#KEEPaccordionAudit .avatar .avatar-initial {
    background-color: #f2f2f3 !important;
}

.auditChangedNew {
    color: #000;
    background-color: rgba(216, 235, 230, 0.6); /*#2ab01a1a*/
    padding: 2px;
}

    .auditChangedNew::before,
    .auditChangedNew::after {
        background-color: rgba(216, 235, 230, 0.6); /*#2ab01a1a rgba(212, 232, 254, 1)*/
        content: "\00a0"; /* non-breaking space */
        /* optional: match vertical alignment display: inline; */
    }

.auditChangedOld {
    color: #000;
    background-color: rgba(252, 232, 230, 0.6); /*#2ab01a1a*/
    padding: 2px;
}

    .auditChangedOld::before,
    .auditChangedOld::after {
        background-color: rgba(252, 232, 230, 0.6); /*#2ab01a1a rgba(212, 232, 254, 1)*/
        content: "\00a0"; /* non-breaking space */
        /* optional: match vertical alignment display: inline; */
    }

#accordionAudit .table .rgSorted {
    background-color: var(--phoenix-body-bg);
}

#accordionAudit .border {
    border: unset !important; /* to remove white border between th */
}

#accordionAudit .table:not(.table-dark, .table-light) thead:not(.table-dark, .table-light) tr th {
    background: linear-gradient(135deg, rgba(40, 42, 66, 1) 0%, rgba(40, 42, 66, 0.95) 100%);
    color: #ffffff;
    font-weight: 800;
    text-align: center;
}

#accordionAudit .badge-phoenix {
    padding: 4px 4px 2px 4px;
}

.k-grid .ri-delete-bin-7hard-line,
.k-grid .ri-file-close-line {
    color: rgba(253, 75, 78, 1) !important;
    background-color: rgba(253, 75, 78, 1) !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

/* Add Edit Edit_DestroySoft Edit_DisplayOrder DestroyHard ... Edit_Restore */

#accordionAudit .auditType-Add,
#accordionAudit .auditType-Edit,
#accordionAudit .auditType-Edit_DestroySoft,
#accordionAudit .auditType-Edit_DisplayOrder,
#accordionAudit .auditType-DestroyHard,
#accordionAudit .auditType-Edit_Restore {
    /* box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); */
}

/* user request 2026-08-23: an API-written audit row reads "API Update" / "API Add" ... - the API word is bold so the
   origin pops while the action word keeps the badge's normal weight (the prefix span is emitted by
   AuditPartial_ApplyAuditTypeBadges in _AuditPartial.cshtml) */
#accordionAudit .badge-phoenix .auditType-APIPrefix {
    font-weight: 700;
}

/* user request 2026-07-23: physical deletes must be scannable in a long audit list - tint the WHOLE row red when
   its Audit Type badge is DestroyHard (the auditType-DestroyHard badge class is applied by
   AuditPartial_ApplyAuditTypeBadges on initial load AND after every AJAX audit refresh, so the tint survives both paths).
   The tint sits on the TDs (not the tr) because the Bootstrap .table paints cell backgrounds over any row background. */
#accordionAudit #auditTable tbody tr:has(.auditType-DestroyHard) > td {
    /* background-color: #fdeef080; */
}
#accordionAudit .ri-add-box-fill {
    color: #1fa33c !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
#accordionAudit .ri-edit-2-fill {
    color: #004dc9 !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
#accordionAudit .ri-file-close-line,
#accordionAudit .ri-delete-bin-7hard-line {
    color: #b81800 !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
#accordionAudit .ri-arrow-up-down-line {
    color: #525b75 !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
#accordionAudit .ri-inbox-unarchive-line {
    color: #f1a03f !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}


/* #region END: Audit */

/* #region START: breadcrumb */
/* Both rules below were stranded in the dead inkcss/Ignore/portal-customOLD.css, so the module node
   rendered unstyled once the breadcrumb went live on all 12 pages (2026-08-29). Ported verbatim.
   The old file's own .breadcrumb rule was deliberately NOT brought across - it sets
   color: var(--phoenix-navbar-brand-color), a leftover from the phoenix theme this project no longer uses. */

.breadcrumbModuleSelected {
    color: #e5780b;
    font-weight: 700;
}

.breadcrumb-square {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle; /* the square and the DEV badge share ONE middle line (user request 2026-10-24); the old position:relative + top:2px sat it 2px low next to the crumb words */
    box-shadow: -5px 7px 13px 1px rgba(0, 0, 0, 0.3);
    background-color: #e5780b;
    transition: 1.5s ease-in-out;
    transform: rotate(0deg);
}

/* the third class stranded in portal-customOLD.css - the environment pill in the breadcrumb (DEV/STAGE/UAT).
   Bootstrap's .badge text-bg-danger was carrying it alone, so it rendered at the default badge size with no spacing. */
.env-breadcrumb-badge {
    font-size: 12px;
    vertical-align: middle; /* middle like the square (user request 2026-10-24) */
    line-height: 1;
    padding-top: 0.25em; /* the badge is 18px tall, inside the 19px line, so it no longer grows the first crumb line and pushes its words 3px lower than the other crumbs (measured live) */
    padding-bottom: 0.25em;
    margin: 0 2px 0 2px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.30);
}

.ink-companySwitch,
.ink-companySwitch:hover {
    display: inline-block;
    vertical-align: middle;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--ink-gray-250);
    border-radius: 0.5rem;
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
}

/* WHY: a Remix icon sits on the text baseline, so the org icon rode low against the company name; middle-align it (no flex) */
.ink-companySwitch .ri {
    vertical-align: middle;
    line-height: 1;
}

    /* hover sets border-<side>-color ONLY, never a border shorthand (a width change moves the content - the "flicker") */
    .ink-companySwitch:hover {
        border-top-color: var(--bs-primary);
        border-right-color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
        border-left-color: var(--bs-primary);
    }

/* #region END: breadcrumb */

/* #region START: page status badge */
/* Card-header status pill (_PageStatusBadgePartial). The header is a BLOCK box with line-height 52px - see the
   .card .card-header note above - so the badge is floated right rather than laid out with flexbox, and its own
   line-height is reset because it would otherwise inherit the header's 52px and blow the pill open. */
.card .card-header .page-status-badge {
    line-height: 1;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
}

    .card .card-header .page-status-badge .ri {
        position: relative;
        top: 1px;
    }

/* The WORD of the status pill (not the pill, not the icon) on the pill's centre line (user report 2026-10-12, "Active Badge text (not icon)").
   It is an inline span, so it becomes inline-block for a transform to apply. The first guess was -0.5px (the value MEASURED in Chrome for the same recipe on the
   grid badges that carry an icon); the user then asked for -1px, which is the value kept. */
.card .card-header .page-status-badge .page-status-badge-text {
    display: inline-block;
    transform: translateY(-1px); /* set to -1px by the user 2026-10-12 after seeing the -0.5px guess on screen */
}
/* WHY: the 14px top margin above was made for the old block header (52px line-height). A header that wears ink-card__header is a flex row that centres its items, so the same margin pushed the pill below the middle of the title (user, 2026-10-07: "Alignment (ACTIVE) in middle"). */
.card .card-header.ink-card__header .page-status-badge {
    margin-top: 0;
}

/* #region END: page status badge */

/* #region START: tabs */

.nav-align-top .nav-tabs .nav-link.active,
.nav-align-top .nav-tabs .nav-link.active:hover,
.nav-align-top .nav-tabs .nav-link.active:focus,
.nav-align-top .nav-tabs .nav-item.show .nav-link,
.nav-align-top .nav-tabs .nav-item.show .nav-link:hover,
.nav-align-top .nav-tabs .nav-item.show .nav-link:focus {
    box-shadow: 0px -4px 0px 0px var(--bs-primary) inset;
}

.nav-align-top:has(.nav-tabs) {
    border-radius: 0.625rem 0.625rem 0 0 !important;
    padding: 0px 0px 0px 12px;
    background-color: #fff !important;
}

div:not(.nav-align-left):not(.nav-align-right) > .nav-tabs {
    -webkit-transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    box-shadow: 1px 1px 8px -4px rgba(38, 43, 67, 0.42) !important;
    background: linear-gradient(180deg, #ebf3fc 0%, #ffffff 60px);
    border-top: solid 1px rgba(222, 222, 222, 1);
    border-left: solid 1px rgba(222, 222, 222, 1);
    border-right: solid 1px rgba(222, 222, 222, 1);
    border-bottom: solid 1px var(--bs-primary) !important;
    margin: 20px 0px;
    border-radius: 0.5rem 0.5rem 0 0;
}

.nav-tabs li {
    margin-block-start: 0rem !important;
    border-right: solid 1px #dedede !important;
    background-color: transparent; /* rgba(211, 232, 255, 0.15) */
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    transition: border-bottom 0.2s;
}

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link {
        color: var(--bs-primary);
        border-bottom: solid 3px var(--bs-primary);
        background-color: #fff;
    }

/* #endregion END: tabs */

/* #region START: userProfile */

#userProfile {
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--bs-primary);
    outline-offset: 4px;
    box-shadow: -5px 0px 10px 0 rgba(35, 50, 56, .25);
}

    #userProfile:hover {
        outline-style: solid !important;
        outline-width: 1px !important;
        outline-color: var(--bs-primary) !important;
        outline-offset: 4px;
        box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.25) !important;
    }

/* #endregion END: userProfile */

/* #endregion START: notification */

/* .k-notification {
} */

.k-child-animation-container {
    width: 110%; /* do not modify */
}

/* WHY (issue 21): the toast follows the approved preview (inker-notifications.html): 420px wide, 12px corners, 15px text, a thick coloured left edge,
   the Kendo status icon shown (the old PNG icons and the hidden-icon rule are gone), and a visible close X. Colours are per status; error text is bolder. */
.k-notification {
    --kendo-notification-border-radius: 12px;
    --kendo-notification-padding-y: 20px;
    --kendo-notification-padding-x: 16px;
    --kendo-notification-font-size: 15px;
    --kendo-notification-line-height: 1.6;
    --kendo-notification-icon-spacing: 12px;
    width: 420px !important;
    max-width: calc(100vw - 32px);
    min-height: 76px;
    border-left-width: 5px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05);
}

.k-notification .k-notification-content {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    margin: 0;
}

.k-notification.k-notification-error {
    background-color: #fff5f5;
    color: #991b1b;
    border-color: #fecaca;
    border-left-color: #dc2626;
}

.k-notification-error .k-notification-content {
    font-weight: 600;
}

.k-notification.k-notification-success {
    background-color: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
    border-left-color: #16a34a;
}

.k-notification.k-notification-warning {
    background-color: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
    border-left-color: #f59e0b;
}

.k-notification.k-notification-info {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    border-left-color: #2563eb;
}

.k-notification > .k-notification-status {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.k-notification .k-notification-actions {
    align-self: flex-start;
    margin-top: 3px;
}

.k-notification-close-action {
    cursor: pointer;
    color: inherit;
    border: 0;
    background: transparent;
    opacity: .65;
}

.k-notification-close-action:hover {
    opacity: 1;
}

.k-notification-close-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
}

@media (max-width: 480px) {
    .k-notification {
        --kendo-notification-border-radius: 10px;
        --kendo-notification-padding-y: 16px;
        --kendo-notification-padding-x: 12px;
        --kendo-notification-font-size: 14px;
        --kendo-notification-icon-spacing: 10px;
        min-height: 68px;
    }
}

.k-child-animation-container {
    width: 110%; /* do not modify */
}

/* #endregion END: notification */

/* #region START: form and actions */

.form-actions {
    padding: 16px 15px;
    background-color: #ebf2fc !important;
    border-top: solid 1px rgba(207, 208, 214, 1);
    border-left: 3px solid var(--phoenix-primary);
    border-right: solid 1px rgba(207, 208, 214, 1);
    border-bottom: solid 1px rgba(207, 208, 214, 1) !important; /* solid 1px rgb(97 97 97) !important */
    border-radius: 0.5rem !important;
    -webkit-transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    box-shadow: 1px 1px 8px -4px rgba(38, 43, 67, 0.42) !important;
    background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%);
}

    .form-actions button {
        margin: 0 5px 0 0 !important;
    }

    /* WHY (GH 29): on a long form or a phone the Save / Cancel bar sat off-screen at the end of the form. sticky (not fixed) pins it to the bottom of the
       visible area while keeping it in the form's own column, and it rests in its normal slot at the end. z-index 5 is above cards and grids, below Kendo windows and their overlay. */
    .form-actions.ink-formActions-sticky {
        position: sticky;
        bottom: 0;
        z-index: 5;
        box-shadow: 0 -6px 14px -6px rgba(38, 43, 67, 0.35), 1px 1px 8px -4px rgba(38, 43, 67, 0.42) !important;
    }

@media (max-width: 991px) {
    .form-actions.ink-formActions-sticky {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

    /* Form-action Kendo Buttons - richer look: rounded corners, comfortable padding, medium weight, subtle shadow.
       Equal heights are kept via a shared 1px border (transparent on the solid buttons, gray on the outline Cancel). */
    /* WHY (user request 2026-10-14, "height of form button is more than popup"): this rule made a form's Save / Cancel 40px high with 6px corners, weight 500 and an extra box-shadow, while the
       popup buttons are the plain Kendo md button (32px, 4px corners, weight 600). Now the SAME size and weight as the popup and every other button (the standard Kendo button); the transparent 1px border stays. */
    .form-actions .k-button {
        border: 1px solid transparent !important;
        border-radius: 4px !important;
        padding: 5px 12px !important;
        font-weight: 600 !important;
    }

    /* Save (solid primary) colour now comes from the global --kendo-color-primary override (= #3874ff),
       so no per-button colour is needed - Kendo derives the hover/active shades itself, and the shared
       rule above still gives it the rounded/padded/shadow look. */

    /* Cancel (outline base): white background, gray border, dark-grey text */
    .form-actions .k-button.k-button-outline {
        background-color: #ffffff !important;
        border-color: rgba(207, 208, 214, 1) !important;
        color: #344054 !important;
    }

        .form-actions .k-button.k-button-outline:hover {
            background-color: #f7f8fa !important;
        }

.btn:hover, .k-button {
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
}

    .btn:hover span {
        filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
    }

/* #endregion END: form and actions */

/* #region START: required and error message */

.ink-datepicker {
    /* KEEP it just for error message in JS */
}

    .ink-datepicker::placeholder {
        padding-left: 1px;
        /* Note: Firefox often requires opacity: 1 to see color/style changes clearly */
        opacity: 1;
    }

/* Start Date etc.: a plain <label> above a Kendo DatePicker in a .respInput-650px container is NOT a floating-label field, so the rule above misses it. Colour its label the same accent blue when the picker is focused. :focus-within catches the inner input focus; .k-focus catches the class Kendo puts on the .k-datepicker wrapper. */
/* Popup-editor fields (Terminate / Reinstate windows) use .ink-field containers with .k-label labels - colour the label blue when the field's control (DatePicker / ComboBox / TextArea) is focused. */
.respInput-650px:has(.k-datepicker:focus-within) label,
.respInput-650px:has(.k-datepicker.k-focus) label {
/* KEEP .xink-field:has(:focus) label,
.xink-field:has(.k-focus) label { */
    color: var(--phoenix-blue) !important;
}

.gridNoData {
    color: #ff4d49cf;
}

/* WHY (user request 2026-10-24): the empty-grid message is a warning icon + a NO DATA badge, both baseline-aligned, so the icon sat 4.2px above the badge's centre. Both are middle-aligned now
   (measured live: centres equal). Every grid that uses the shared no-records template gets it. */
.gridNoData > i.ri,
.gridNoData > .badge {
    vertical-align: middle;
}

/*.required {
    color: rgba(237, 14, 14, 1);
    font-size: 0.8125rem;
}*/

/* error text is RED, matching the box's red icon (user request 2026-10-14: "font for error will be red (matching)") */
.requiredText {
    color: var(--bs-danger, #c62137);
}

/* WHY (user request 2026-10-14, "New Company create and any error like attached"): ONE look for every error message - the pale-red box with the red circle icon and the thick red left edge
   that the forms' "All fields marked with an asterisk * are required." already wears. A Bootstrap alert-danger (New Company, the Add / Edit User windows' problem lists, the account pages) now draws
   the same box, so a new error message needs no extra class. */
.requiredBox,
.alert.alert-danger {
    background-color: rgba(251, 194, 196, 0.1) !important;
    border-radius: 0.5rem !important;
    font-size: calc(15px * var(--ink-requiredBox-fontscale, 1)) !important;
    border: solid 1px #fbc2c4 !important;
    border-left: 7px solid #fbc2c4 !important;
    background: #fbe3e4 url('/ResourcesPortal/inkimages/icons/icn-error-message16Light.png') no-repeat scroll 12px 10px;
    padding: 6px 12px 8px 36px !important;
}

/* a Bootstrap alert-danger: red text like .requiredText, and an OPAQUE pale-red face with the box's soft shadow - the translucent .requiredBox tint went grey over a tinted card (New Company) */
.alert.alert-danger {
    color: var(--bs-danger, #c62137);
    background-color: #fff5f5 !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.infoTip {
    font-weight: lighter !important;
    font-size: 12px;
    color: #616161;
    margin-top: 2px;
}

.infoImage {
    position: relative;
    top: -2px;
}

.infoText {
    color: #b5b5b5;
}

.k-invalid-msg {
    color: rgba(237, 14, 14, 1) !important; /* #f31700 */
    position: relative;
    top: 0px;
}

.k-invalid,
span .k-datepicker.k-invalid,
.k-dropdownlist.k-invalid {
    border: solid 1px rgba(237, 14, 14, 1) !important;
    border-left: 7px solid rgba(237, 14, 14, 1) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset !important;
}

/* #endregion END: required and error message */

/* #region START: grid */

.k-grid {
    /* border: solid 1px rgba(222, 222, 222, 1); */
    /* margin: 20px 0px; */
}

    /* THE GRID HEADER LINE (user request 2026-10-22, "apply the header shadow to every Kendo grid in the app", after a mock-up on Employee List): a 1px line (a box-shadow with no blur) under the header row.
       It began as a soft drop shadow with position: relative + z-index, which the user replaced by this line. One rule here covers every grid; portal-phoenix.css used to switch the header shadow off on
       Phoenix pages and no longer does for the header itself. A grid whose header is hidden by its page (the Pay Run By Employee sections) has no header to shadow. */
    .k-grid .k-grid-header {
        /*box-shadow: 0px 1px 0px 0px rgba(20, 24, 36, 0.4);
        line-height: 1.5rem;*/
    }

    /* COLUMN RESIZE GRIP (user request 2026-10-24, "show a grid column indicator, gray bar, so the user can resize a column easily"): Kendo draws its resize handle only while the mouse is already on a column edge, and the
       header cells have no border, so nothing told the user an edge could be dragged. Every RESIZABLE header cell (Kendo marks it data-resizable="true"; a grid or column with resizing off does not get it) now wears a small
       rounded gray bar on its right edge, which darkens while the pointer is over the header. It is a pseudo-element with pointer-events: none, so Kendo's own drag handle on the same edge is untouched (checked live
       on Employee List: dragging the Full Name edge still resized the column). */
    .k-grid .k-grid-header .k-table-th[data-resizable="true"] {
        position: relative;
    }

    .k-grid .k-grid-header .k-table-th[data-resizable="true"]::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 3px;
        height: 16px;
        transform: translateY(-50%);
        border-radius: 2px;
        background-color: #c5cbd6;
        pointer-events: none;
    }

    .k-grid .k-grid-header:hover .k-table-th[data-resizable="true"]::after {
        background-color: #98a1b3;
    }

    /* SMALL-TABLE grid: the header row and the pager bar at half height (user request 2026-10-22, from the Phoenix template's "Small Tables" example: .table-sm cuts the cell padding in half).
       First worn by the Company List; the Employee List asked for the same (tracker issue 36), so the rule moved here from the Company List's own CSS file (since deleted). A grid opts in with class="ink-gridSmallTable".
       WHY only the top and bottom of the header cell: the row cells keep their 1rem side padding, so the header words must too or they would start left of the words under them.
       The footer is the Kendo pager: its padding and the gap between its parts are halved through Kendo's own pager variables (0.5rem -> 0.25rem), not by overriding its boxes.
       That alone only took 8px off, because the bar is as tall as the 32px buttons and page-size box inside it; so on the table view (992px and up) their vertical padding is halved too
       (0.25rem -> 0.125rem, again through Kendo's variables). Below 992px the grid shows the card list and the buttons keep the normal size for a finger.
       The header selectors are one class longer than the Phoenix skin's (portal-phoenix.css, which sets padding: 0.75rem 1rem) so they win on specificity whatever the load order. */
    .main .k-grid.ink-gridSmallTable .k-grid-header .k-table-th,
    .main .k-grid.ink-gridSmallTable thead.k-table-thead tr.k-table-row .k-table-th {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    .ink-gridSmallTable .k-grid-pager {
        --kendo-pager-md-padding-x: 0.25rem;
        --kendo-pager-md-padding-y: 0.25rem;
        --kendo-pager-md-item-group-spacing: 0.25rem;
    }

@media (min-width: 992px) {
    .ink-gridSmallTable .k-grid-pager {
        --kendo-button-md-padding-y: 0.125rem;
        --kendo-input-padding-y: 0.125rem;
    }
}

    .k-grid .k-grid-norecords {
        padding: 0 0 0 12px;
        height: 40px;
    }

KEEP.k-table-td {
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}

/* Toolbar Add button */

.k-grid-toolbar,
.gridAOutsideToolbar,
#accordionAudit .accordion-header {
    background: linear-gradient(90deg, #e6f4ea 0%, #ebf2fc 100%);
}

.gridAOutsideToolbar {
    margin: 20px 0 0 0;
    padding: 10px;
}

/* WHY: the 20px top margin above was made for a toolbar inside a padded body. A band that sits directly under a page header (a sibling of the header, or the FIRST thing in the card body) left a white strip between the header's ruled line and the shading (user, 2026-10-07: "On all screen this extra space can be removed?"). No margin there, so the shading starts at the header line on every page. */
.ink-card__header + .gridAOutsideToolbar {
    margin-top: 0;
}

/* ---------- CompanyPayCategory inner group tabs (2026-09-13) ----------
   The page holds four grids (Earning / Deduction / Reimbursement / Leave) in the Materialize 'Basic' tabs, INSIDE the card
   under the page-level Company strip. The generic rules above paint every div > .nav-tabs like that page-level strip
   (blue-white gradient, grey box, 20px vertical margins, blue bottom line, black hover underline), so two strips would read
   as one confusing strip. This block pulls the inner strip back to the template's plain white look so the two levels read
   as two levels. Selectors carry the same weight as the generic ones (element + three classes) plus !important where the
   generic rule has it, or they lose. Block / inline-block only - no flex written here (the template's own .nav flex is its). */
/* WHY (user request 2026-10-24, the Leave balance cards): the stat-card icon disc is <div.avatar><div.avatar-initial><i>. The Materialize theme sized and centred .avatar-initial; the Phoenix theme has no rule for it, so
   the disc collapsed to the icon's own 16 x 24px and the page CSS only supplies its COLOURS. This gives it back its shape: a 40px rounded square (the radius is rounded-3 on the markup), the icon centred on both axes
   (text-align + line-height, no flexbox; the icon's -1px lift is the measured 1.1px it sat low, now 0.1px). The Phoenix avatars (div.avatar-name) are untouched. Used by the Leave and Security stat cards. */
.avatar:has(> .avatar-initial) {
    width: 2.5rem;
    height: 2.5rem;
}

.avatar > .avatar-initial {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
}

.avatar > .avatar-initial > i {
    position: relative;
    top: -1px;
    vertical-align: middle;
}

/* WHY (user request 2026-10-24, Employee > Leave tabs): the icon in front of an inner tab's word sat on the text baseline, ~2.4px above the word's centre line. -2.5px is the measured drop that
   puts the two centres level (checked live: 0.1px apart); vertical-align: middle overshot by 0.9px. Worn by every .ink-innerTabs strip (Leave, Pay Category groups, Users, Batch Jobs). */
.ink-innerTabs .nav-tabs .nav-link > i.ri {
    vertical-align: -2.5px;
}

/* WHY (user request 2026-10-25, "same height as Pay Category"): measured in a browser, an inner tab was 39.7px against the page-level tab's 36px, because the word's span (a flex item) was blockified around an inline-block and grew a 5px line-box strut. The word spans now wear d-inline-flex / d-sm-inline-flex in the markup (the page-level strips' own device), which brings the word to its 22.35px line; the remaining 1.65px the page-level tab gets from its line box is this min-height. Icon and word centres then coincide (measured 0px apart), so the old 2px icon lift is gone. */
.ink-innerTabs .ink-tabs01 .nav-link {
    min-height: 36px;
}

/* bold tab words on the inner strips too, the same as the page-level strips (user request 2026-10-24) */
.ink-innerTabs .nav-tabs .nav-link {
    font-weight: 700;
}

div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top {
    margin-top: 1rem;
    padding: 0px; /* the generic .nav-align-top:has(.nav-tabs) rule above indents the whole box 12px on the left; this strip draws its own borders and must sit flush */
}

div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top > ul.nav-tabs {
    margin: 0px;
    background: #fff;
    box-shadow: none !important;
    border-top: solid 1px #dedede;
    border-left: solid 1px #dedede;
    border-right: solid 1px #dedede;
    border-bottom: solid 1px #dedede !important;
    border-radius: 0.5rem 0.5rem 0 0;
}

div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top > ul.nav-tabs .nav-link.active {
    box-shadow: none; /* the generic .nav-align-top .nav-tabs .nav-link.active rule paints a 4px inset shadow on top of the 4px active border - an 8px bar; the border alone draws the underline, like the page-level strip */
}

div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top > ul.nav-tabs li {
    border-right: 0px !important; /* the page-level strip draws a grey divider between its tabs; the template's Basic tabs have none */
}

div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top > ul.nav-tabs .nav-link:not(.active):hover {
    border-bottom: solid 3px var(--bs-primary) !important; /* hover in the page's blue, not the page-level strip's black */
    color: var(--bs-primary) !important;
}

/* the grey line under the four tabs (user request 2026-10-25, like the Company strip): the pane's own top border, so the strip needs no border of its own and the open tab's underline (margin-bottom -1px) sits ON it */
div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top > .tab-content {
    border-top: solid 1px #dedede;
    border-left: solid 1px #dedede;
    border-right: solid 1px #dedede;
    border-bottom: solid 1px #dedede;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1rem;
}

/* phones: the pane is about 235px wide inside its borders and padding, and an Add pill reading 'Reimbursement' beside the
   150px search box needs about 300px - so below the sm breakpoint the Add button keeps its icon only, the same device the
   tab buttons use for their word (review finding 2026-09-13) */
@media (max-width: 575.98px) {
    div.ink-innerTabs.ink-companyPayCategory-groupTabs.nav-align-top .ink-gridAOutsideToolbar-addButton .ink-buttonLabel {
        display: none;
    }
}

.k-grid .k-grid-toolbar .k-grid-add,
.ink-gridAOutsideToolbar-addButton {
    color: #fff !important;
    background-color: rgba(42, 176, 26, 0.9) !important;
    border-color: rgba(42, 176, 26, 0.75) !important;
}

/* the Show archived switch + its label, before the green New button (Company List, Employee List - tracker issue 34, 2026-10-22; moved here from the Company List's own CSS file (since deleted) once a second page wore it).
   Inline-block only, no flex. */
.ink-showArchived {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
    white-space: nowrap;
}

    .ink-showArchived label {
        margin: 0 0 0 0.5rem;
        vertical-align: middle;
        font-size: 0.875rem;
    }

    .k-grid .k-grid-toolbar .k-grid-add:hover {
        background-color: rgba(42, 176, 26, 0.9) !important;
    }

.k-grid .k-toolbar-item .k-grid-search {
    width: 256px;
}

    .k-grid .k-toolbar-item .k-grid-search:hover,
    .k-grid .k-toolbar-item .k-grid-search:focus,
    .k-grid .k-toolbar-item .k-grid-search:active {
        background-color: #f5f493;
        -webkit-box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3);
        box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3);
    }

/* KendoGrid Grouping */

.k-table-row .k-group-cell {
    background-color: rgba(251, 251, 251, 1); /* rgba(222, 226, 228, 1) */
}

.nav .nav-link:not(.active):hover {
    border-bottom: solid 3px var(--bs-black) !important;
    color: #000000 !important;
}

.k-sort-icon {
    color: #fff !important;
}

.k-grouping-row {
    cursor: pointer !important;
}

KEEP.k-grouping-row .k-icon.k-svg-icon svg {
    display: none !important;
}

/* Expand icon (default) */
KEEP.k-grouping-row .k-svg-i-caret-alt-down::before {
    content: "" !important; /* Remove font icon */
    background: url('/ResourcesPortal/inkimages/icons/icn-treeminus-line.png') no-repeat center center !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    z-index: 10001;
}

/* Collapse icon */
KEEP.k-grouping-row .k-svg-i-caret-alt-right::before {
    content: "" !important;
    font-size: 20px;
    font-weight: bold;
    background: url('/ResourcesPortal/inkimages/icons/icn-treeplus-line.png') no-repeat center center !important;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.k-grid .k-table-tbody > .k-grouping-row td:first-child {
    letter-spacing: 1px;
}

/* Active and Archive group row CSS
light green
border-top: 1px solid #b7c2b4 !important;
background: #e5f3e2 !important;
border-bottom: 1px solid rgba(97, 161, 54, .5) !important;

dark green
border-top: solid 2px #95cc8a !important;
background: #c5e3bf !important;
font-weight: 700;
border-bottom: 1px solid rgba(97, 161, 54, .5) !important;
*/

.k-grid tr.k-grouping-row.groupActive > td,
.k-grid tr.k-grouping-row.groupActive > th {
    color: #008000 !important;
    font-size: var(--kendo-font-size);
    text-transform: uppercase;
    background-color: rgba(217, 251, 208, 0.3) !important;
    /*border-bottom: #d9fbd0 solid 1px rgba(42, 176, 26, 1) !important;*/
}

.k-grid tr.k-grouping-row.groupArchive > td,
.k-grid tr.k-grouping-row.groupArchive > th {
    color: var(--bs-heading-color) !important;
    font-size: var(--kendo-font-size);
    text-transform: uppercase;
    background-color: rgba(255, 239, 202, 0.3) !important;
    /*border-bottom: #ffefca solid 1px rgba(198, 132, 68, 1) !important;*/
}

/* DRAFT band. Tagged by appJSCommon.GridHelper.GridGroupStyle_GroupRowAddClass whenever a group header reads
   DRAFT, which today is PayRunList. PayRunItem's "Not Sent" band stamped this SAME class from 2026-09-08 to
   2026-09-12 so the two pages moved together; it now wears its own groupPayRunInfo (neutral grey, in the PayRun
   folder's stylesheet) at the user's request, because a draft pay run and an unsent payslip are different states.
   LIGHT REDDISH since 2026-09-10 (user request, pointing at the PAYG Withheld stat card as the reference): the
   channels and the 7% alpha are that card's exactly - .ink-payRunStatCard--payg in
   portal-page-payroll-payrun-common.css - so a draft pay run and the money still owed read in one colour family.
   The label takes #c62137 with it, because every other band here pairs its text with its own wash (groupActive is
   green on green, groupArchive heading-on-amber) and blue-on-red would have been the only mismatched pair. That
   red is the same one the PAYG card's figure uses, where it was measured at 5.9:1 on this wash.
   It was PRIMARY BLUE from 2026-09-02 until then, chosen to match the Draft status badge and the Gross-wages
   card - NOTE the row's own Draft badge is still blue, so the band and the badge no longer agree; that is the
   user's call and not an oversight to "fix" without asking. */
.k-grid tr.k-grouping-row.groupDraft > td,
.k-grid tr.k-grouping-row.groupDraft > th {
    color: #c62137 !important;
    font-size: var(--kendo-font-size);
    text-transform: uppercase;
    background-color: rgba(198, 33, 55, 0.07) !important; /* the PAYG stat card's wash */
}

.XXXk-grid .k-table-tbody .k-table-alt-row {
    /*background-color: rgba(245, 245, 245, 0.4);*/
}

/*KEEP when giving <td> cell line then grouping header row bottom line is NOT visible .k-grid .k-table-tbody .k-table-row .k-table-td,
    .k-grid .k-table-tbody .k-table-alt-row .k-table-td {
        border-color: rgba(222, 226, 228, 1) !important;
    }*/

/* Hovered row background + bottom line - see 990 and 473Audit */
.XXXk-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row):hover,
.XXXk-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row).k-hover {
    /*background-color: rgba(235, 242, 252, 0.9) !important;*/
    /* Smoothly animate all three properties background-color 0.02s ease 0.01s; duration 0.02s, delay 0.01s */
    /*transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;*/
    /* Apply the Bootstrap shadow to the entire row */
    /* box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.9) !important; box-shadow: 3px -2px 1px 0px rgba(0, 0, 0, 0.1) !important; */
    /* position: relative; Ensure the row stays on top during hover to show shadow correctly */
    /* z-index: 1; Ensure the row stays on top during hover to show shadow correctly */
    /* inset horizontal vertical blur spread color */
    /*box-shadow: inset 0 -1px 0px 0 rgba(207, 208, 214, 1) !important;*/ /* bottom line */
    /* inset 0 1px 1px #cfcfcf !important; top line was #e6e6e6 */
    /* for in-depth inset 0 -1px 4px 0 rgba(192, 192, 192, 1) !important or box-shadow: inset 0 -1px 1px 0 rgba(192, 192, 192, 1) !important;
       1px 0 0: These are the offset values:
       1px - Horizontal shadow offset (moving the shadow to the right by 1px).
       0 - Vertical shadow offset (no vertical offset).
       0 - Blur radius (no blur, so it's a sharp line).
       inset shadows (first two values) create light lines on the left and right sides of the element, giving it a kind of "etched" look.
       The outer shadows (third and fourth values) create a subtle drop shadow that appears beneath the element, with one being softer and more subtle than the other.
        inset 0px -1px 0 rgba(192, 192, 192, 1), inset -1px 0 0 rgba(192, 192, 192, 1), 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    */
    /* x-box-shadow: inset 0 -1px 1px 0 rgba(192, 192, 192, 1), bottom inset 0 1px 1px 0 rgba(192, 192, 192, 0.1); top */
}

/* td:nth-child(1) AND td:nth-child(n+2) */
    .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row):hover > td:nth-child(1),
    .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row).k-hover > td:nth-child(1) {
        box-shadow: unset !important;
        border-right-style: solid !important;
        border-right-width: 4px !important; /* width + colour in one, optional: keep same BG */
        border-right-color: var(--bs-primary) !important;
        background-color: rgba(251, 251, 251, 1) !important; /* optional: keep same BG */
        border-bottom-width: 0px !important; /* optional: keep same BG */
    }

/* Apply the bottom line to the TD inside the hovered row */
.k-grid .k-table-row:hover > td,
.k-grid tr:hover > td {
    /* box-shadow: inset 0 -1px 0px 0 rgba(207, 208, 214, 1) !important; */
    border-bottom: solid 1px rgba(155, 155, 155, 1) !important; /* 207, 208, 214, 1 */
}

.k-grid-edit-command,
.k-grid-save-command,
.k-grid-cancel-command,
.btnColumnCommandDestroyHardClass,
.btnColumnCommandDestroySoftClass,
.btnColumnCommandRestoreClass {
    width: 60px !important;
}


/* EachRow save button */
/*
.k-grid .k-grid-save-command {
    background-color: rgba(42, 176, 26, 1);
    border-color: #25b003;
 }
.k-grid .k-grid-save-command:hover {
    background-color: rgba(42, 176, 26, 0.9);
}
*/

/* EachRow cancel button */
/*
.k-grid .k-table-row .k-grid-cancel-command {
    color: rgba(0, 0, 0, 0.9);
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.09) 0%, rgba(229, 120, 11, 0.2) 97%);
    border: solid 1px rgba(0, 0, 0, 0.1);
}
.k-grid .k-table-row .k-grid-cancel-command:hover {
    color: #000;
    border: solid 1px rgba(0, 0, 0, 0.2);
}
.k-grid .k-table-row .k-grid-cancel-command {
    background-color: rgba(108, 117, 125, 0.02);
}
.k-grid .k-table-row .k-grid-cancel-command:hover {
    background-color: rgba(108, 117, 125, 0.05);
}
*/

/* EachRow delete button */
.k-grid .btnColumnCommandDestroyHardClass,
.k-grid .btnColumnCommandDestroySoftClass {
    color: var(--bs-btn-hover-color);
    border: solid 1px var(--bs-btn-hover-border-color);
}

/* EachRow restore button */
.k-grid .btnColumnCommandRestoreClass {
    color: var(--phoenix-warning-text-emphasis);
    border: solid 1px var(--phoenix-warning-border-subtle);
    background-color: var(--phoenix-warning-bg-subtle);
}

/* #region END: grid */

/* #region STRAT icon-square */

.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #fbfbfb;
    border: solid 1px #bbb;
    border-radius: 5px;
    margin: 0 2px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

    .icon-square:hover {
        background-color: #f9f9f9;
        box-shadow: 1px 0 4px #bbb;
    }

    .icon-square i {
        color: #444; /* Icon color */
        font-size: 16px; /* Icon size */
        pointer-events: none; /* Ensures click is handled by .icon-square span */
    }

/* WHY padding 0: Kendo Fluent .k-button applies padding 5px 12px; inside the fixed 28px border-box
   .icon-square that leaves a ~2px content box, so the mask-based arrow <i> (icon-base) was squeezed
   to 2px wide and rendered as an empty coloured square. Zeroing padding restores the 20px icon.
   Scoped to the move buttons only so delete/restore button appearance is unchanged. */
.k-grid .btnColumnCommandMoveClass {
    padding: 0;
}

/* green */
.k-grid .btnMoveUp {
    color: #686868; /* #137333;*/
    background-color: #2ab01a1a; /*#e6f4e1*/
}

/* red */
.k-grid .btnMoveDown {
    color: #686868;
    background-color: #fce8e6; /* #fce8e6 */
}

/* #endregion END icon-square */

/* #region START: text with color */

.text-inkLightGreen {
    color: #2ab01a !important;
}

/* the PDF (Acrobat) icon in Acrobat red - beside a Payslip link (user request 2026-10-01); the link text keeps its own colour */
.ink-pdfIcon {
    color: #f40f02;
}

.text-inkGreen {
    color: #008000 !important;
}

.amountGreen {
    color: #008000 !important;
}

.amountRed {
    color: #ff0000 !important;
}

/* #endregion END: text with color */

/* #region START: spinner */

#spinnerLoaderContainer {
    position: fixed !important;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(61, 118, 252, 1);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    height: 70px;
}

/* #region END: spinner */

/* #region START: row selected for edited/delete/restore background-color */

tr.k-table-row.linkGrid_CUPopup,
tr.k-table-alt-row.linkGrid_CUPopup {
    background-color: rgba(233, 247, 233, 0.5) !important; /* linkGrid_Edit rgba(221, 235, 213, 1) */
}

tr.k-table-row.linkGrid_DPopup,
tr.k-table-alt-row.linkGrid_DPopup {
    background-color: rgba(252, 232, 230, 1) !important; /* DestroyHard rgba(253, 61, 68, 0.1), DestroySoft rgba(253, 75, 78, 0.5) */
}

tr.k-table-row.linkGrid_RPopup,
tr.k-table-alt-row.linkGrid_RPopup {
    background-color: rgba(198, 132, 68, 0.3) !important; /* Restore rgba(198, 132, 68, 0.5) */
}

/* #endregion END: row selected for edited/delete/restore background-color */

/* #region Kendo window */

.k-window,
.k-window:focus {
    outline: none !important;
    box-shadow: none !important;
}

#customDestroyHard_WrapperId.k-window,
#customDestroySoft_WrapperId.k-window {
    border-bottom: solid 6px rgba(222, 85, 80, 1) !important;
    border-radius: 0.625rem !important;
}

#customDestroyHard_WrapperId .k-window-titlebar,
#customDestroySoft_WrapperId .k-window-titlebar {
    background-color: rgba(222, 85, 80, 1) !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.k-window { /* ABA */
    border-bottom: solid 6px #376ae3 !important;
    border-radius: 0.625rem !important;
}
.k-window-titlebar { /* ABA */
    background-color: #376ae3 !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#customRestore_WrapperId.k-window {
    border-bottom: solid 6px rgba(198, 132, 68, 0.4) !important;
    border-radius: 0.625rem !important;
}

#customRestore_WrapperId .k-window-titlebar {
    background-color: rgba(198, 132, 68, 0.4) !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#customRestore_WrapperId #inTemplate_Grid_YesButton {
    background-color: rgba(198, 132, 68, 0.9) !important;
    border-color: rgba(198, 132, 68, 1) !important;
}

    #customRestore_WrapperId #inTemplate_Grid_NoButton:hover,
    #customRestore_WrapperId #inTemplate_Grid_YesButton:hover {
        box-shadow: 0 15px 18px -9px #000;
    }

.k-window-titlebar-actions {
    filter: drop-shadow(1px 1px 2px rgba(61, 135, 251, 1)) /* drop-shadow(1px 1px 2px #fff); */
}

.k-window .ri-inbox-unarchive-line {
    color: rgba(159, 95, 19, 1); /* not color: rgba(241, 160, 63, 1); */
    position: relative;
    top: 3px;
}

.k-window .ri-file-close-line,
.k-window .ri-delete-bin-7hard-line {
    color: #fff;
    position: relative;
    top: 3px;
}

#customDestroyHard_WrapperId .k-window-title,
#customDestroySoft_WrapperId .k-window-title,
.k-window-title { /* ABA */
    color: #ffffff !important;
    /*text-shadow: 1px 0px 4px #000000;*/
}

#customDestroyHard_WrapperId .k-window-titlebar {
    box-shadow: var(--bs-navbar-search-shadow);
    color: #fff;
    background-color: rgba(222, 85, 80, 1) !important; /* linear-gradient(90deg, #dc5453 0%, #ce5b61 100%) !important; */
    border-color: rgba(222, 85, 80, 0.9) !important
}

#customDestroyHard_WrapperId #inTemplate_Grid_YesButton,
#customDestroySoft_WrapperId #inTemplate_Grid_YesButton {
    color: #fff;
    background-color: rgba(222, 85, 80, 1) !important;
    border-color: rgba(222, 85, 80, 0.9) !important;
}

    #customDestroyHard_WrapperId #inTemplate_Grid_NoButton:hover,
    #customDestroyHard_WrapperId #inTemplate_Grid_YesButton:hover,
    #customDestroySoft_WrapperId #inTemplate_Grid_NoButton:hover,
    #customDestroySoft_WrapperId #inTemplate_Grid_YesButton:hover,
    .k-button:hover {
        box-shadow: var(--bs-card-box-shadow);
    }

#customDestroyHard_WrapperId .k-window-content {
    border-bottom: solid 3px rgba(222, 85, 80, 1) !important;
}

/* #endregion Kendo window */

/*.cursor-pointer  is in in core.css:20353 */
.cursor-no-drop {
    cursor: no-drop !important;
}

/* #region badge */

.badge.text-bg-success {
    background-color: rgba(31, 163, 60, 1) !important;
}

/* #endregion badge */

/* #region badge in grid */

/* WHY (user request 2026-10-24, "badge text is not vertically centre"): Phoenix pads a badge top = bottom, but the capital letters of its small font sit off the middle of that line box, and not the same way for the
   two kinds of badge. Measured live with the font's own metrics (letters' ink centre against the badge centre): a TEXT-ONLY badge ("No data", "Included for everyone", "Can take now") sat 0.7px HIGH, a badge with an
   ICON ("Approved", "Annual Leave", "Unpaid Leave") sat 0.5px LOW. The same total padding (0.71em, so the badge height does not change) is split 0.42 / 0.29 for the first kind and 0.30 / 0.41 for the second;
   afterwards every badge on the Leave tabs measured within 0.1px of centre. Applies to every Phoenix badge. */
.badge.badge-phoenix:not(:has(i)) {
    padding-top: 0.39em;
    padding-bottom: 0.32em;
}

.badge.badge-phoenix:has(i) {
    padding-top: 0.30em;
    padding-bottom: 0.41em;
}

.k-table-td .badge i.ri {
    position: relative;
    top: 2px;
}

/* The WORD of a grid badge (not the badge, not the icon) sits on the badge's centre line (user report 2026-10-12, "Badge text - vertically align").
   MEASURED in Chrome on a TemplatePay "OTE" badge (0.75em text, line-height 1): the theme's own .badge-label nudge, translateY(0.0875rem) = +1.4px,
   put the glyphs' centre 1.9px BELOW the badge's centre; with no nudge they sat 0.5px below. translateY(-0.5px) makes the two centres equal.
   Worn by the badge words wrapped by appJSCommon.UIHelper.InfoBadgeText_LabelWrap_Html (TemplatePay) and by the PayRunByEmployee item chips. */
.k-table-td .badge .badge-label {
    transform: translateY(-0.5px);
}

/* #endregion badge in grid */

/* #region customFormAction in window */

/* When row get edited in grid then highlight edited row */
/* .ink-windowFormAction = CLASS twin of #customFormAction_WrapperId (added 2026-07-30): a PERSISTENT page
   window adds it to its wrapper to share this look, because the id beside it is stamped per-open by the GRID
   popups and two windows cannot both carry it.
   Consumers as of 2026-09-08: PayRunList's New Pay Run window and PayRunByEmployee's Change Item window. This
   comment used to name TemplatePay's NameEdit windows; they do not use the class and never did - swept the
   whole solution for it and found no consumer at all before these two, so it had been describing an intention
   rather than a fact. */
/* The grid popup editors no longer declare a width (see each page's <editable><window>), so the Kendo window
   shrinks to fit its content and hugs the widest control instead of stretching to 90vw. On a desktop that
   lands at 448px (Kendo's fixed 400px .k-edit-form-container + the window content's 24px side padding),
   which is narrower than the old 90vw on any screen down to about 470px. Below that the fixed widths stop
   fitting, so the popup goes fluid - see the mobile media query further down. A max-width cap on
   .k-edit-form-container was tried here and is NOT usable: Kendo also sets min-width: 400px on it, and
   min-width beats max-width, so the cap measured 312px and rendered 400px (verified live). */

#customFormAction_WrapperId.k-window,
#windowId_FormPartialUpdateA.k-window,
#windowId_FormPartialUpdateB.k-window,
.ink-windowFormAction.k-window {
    border-bottom: solid 2px rgba(223, 223, 228, 1) !important;
    border-radius: 0.70rem !important; /* special to match radius of main form */
    /* x-background: #f7f7f9 !important; */
}

#customFormAction_WrapperId .k-window-titlebar,
#windowId_FormPartialUpdateA .k-window-titlebar,
#windowId_FormPartialUpdateB .k-window-titlebar,
.ink-windowFormAction .k-window-titlebar {
    /* background-color: rgba(24, 95, 161, 1) !important; */
    background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%);
    border-top: solid 3px var(--bs-primary);
    border-bottom: solid 1px #c9c9c9;
    box-shadow: var(--bs-navbar-search-shadow);
    border-radius: 0.625rem 0.625rem 0px 0px !important;
    /* 12px/16px is a USER SETTING (2026-08-28), replacing Kendo's lopsided 24px/16px. The bar is
       align-items: center, which centres on the CONTENT box, so the 4px accent border has to be counted on
       the top side: 12 + 4 = 16 balances it and the title AND the close button land dead-centre. Total
       height stays 67px (4 + 12 + 35 content + 16), which is the number .k-window-actions below matches. */
    padding-top: 12px;
    padding-bottom: 16px;
}

#customFormAction_WrapperId .k-window-title,
#windowId_FormPartialUpdateA .k-window-title,
#windowId_FormPartialUpdateB .k-window-title,
.ink-windowFormAction .k-window-title { /* same as .k-window-title */
    color: var(--bs-primary) !important;
}

/* the title's line-height equals its font-size (20px), so there is no leading to absorb the difference between
   .icon-base's vertical-align: middle (which sits on the X-HEIGHT) and the text's optical centre - measured
   live, that left the 20px icon 3.5px below the title text. Lift it back. */
#customFormAction_WrapperId .k-window-title .icon-base,
#windowId_FormPartialUpdateA .k-window-title .icon-base,
#windowId_FormPartialUpdateB .k-window-title .icon-base,
.ink-windowFormAction .k-window-title .icon-base {
    position: relative;
    top: -3px;
}

#customFormAction_WrapperId .k-window-titlebar-actions,
#windowId_FormPartialUpdateA .k-window-titlebar-actions
#windowId_FormPartialUpdateB .k-window-titlebar-actions,
.ink-windowFormAction .k-window-titlebar-actions {
    filter: drop-shadow(1px 1px 2px #fff);
}

#customFormAction_WrapperId .k-window-actions,
#windowId_FormPartialUpdateA .k-window-actions,
#windowId_FormPartialUpdateB .k-window-actions,
.ink-windowFormAction .k-window-actions {
    background-color: rgba(24, 95, 161, 0.1) !important;
    border-top: solid 1px #c9c9c9;
    box-shadow: 0px 0px 10px 0px rgba(38, 43, 67, 0.40);
    /* the bottom button strip matches the title bar's height so the popup's top and bottom chrome are
       symmetric (user request 2026-08-28); measured live it was 81px against the title bar's 67px.
       67px = what the .k-window-titlebar rule above produces: 4px accent border + 14 + 35 content + 14,
       so if that padding changes this number moves with it. Zeroing the vertical padding lets the bar's
       existing flex align-items: center place the 32px buttons dead-centre, so the height no longer
       depends on how tall the buttons are. */
    height: 67px;
    padding-top: 0;
    padding-bottom: 0;
}

/* WHY (user request 2026-10-14, "even icon on cancel not matching"): the grid popups' Save / Cancel are drawn by Kendo with ITS icons (a bold prohibited sign, a filled floppy), while every form and
   hand-built footer wears the Remix icons ri-save-line / ri-forbid-2-line. One icon per action: the Kendo svg is hidden and the same Remix glyph is painted in its place (a mask, so it takes the
   button's text colour, like .ri does). The glyphs are copied from iconify-icons.css; a grid popup's buttons are found by the ref-update-button / ref-cancel-button attributes Kendo 2025.4+ sets
   (the same hook the page scripts use to find the popup Save) and by the older command classes. */
.k-window-actions .k-grid-save-command .k-svg-icon > svg,
.k-window-actions button[ref-update-button] .k-svg-icon > svg,
.k-window-actions .k-grid-cancel-command .k-svg-icon > svg,
.k-window-actions button[ref-cancel-button] .k-svg-icon > svg {
    display: none;
}

.k-window-actions .k-grid-save-command .k-svg-icon,
.k-window-actions button[ref-update-button] .k-svg-icon,
.k-window-actions .k-grid-cancel-command .k-svg-icon,
.k-window-actions button[ref-cancel-button] .k-svg-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.k-window-actions .k-grid-save-command .k-svg-icon,
.k-window-actions button[ref-update-button] .k-svg-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 19v-6h10v6h2V7.828L16.172 5H5v14zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m5 12v4h6v-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 19v-6h10v6h2V7.828L16.172 5H5v14zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m5 12v4h6v-4z'/%3E%3C/svg%3E");
}

.k-window-actions .k-grid-cancel-command .k-svg-icon,
.k-window-actions button[ref-cancel-button] .k-svg-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m4.891-11.477l-8.368 8.368a6 6 0 0 1-1.414-1.414l8.368-8.368a6 6 0 0 1 1.414 1.414'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m4.891-11.477l-8.368 8.368a6 6 0 0 1-1.414-1.414l8.368-8.368a6 6 0 0 1 1.414 1.414'/%3E%3C/svg%3E");
}

/* .ink-window-actionBar = the same bottom band, for a window that renders its OWN footer markup inside the
   content instead of using Kendo's actions bar (both PayRun windows, 2026-09-08 user request "all window in
   PayRun should be like Bank background").
   Only the BAND travels - background, top rule and shadow. The height and zeroed padding above deliberately do
   NOT: they exist to centre 32px buttons inside Kendo's flex row at the same 67px as the title bar, and a
   hand-built footer is neither that flex row nor bound to that height, so copying them would collapse its own
   spacing. The negative side margins bleed the band out through .k-window-content's 24px padding to the
   window's edges, which is where Kendo's own bar sits - -24px sideways and -12px down, the two halves of
   .k-window-content's own '12px 24px' padding, MEASURED on the live window rather than assumed. Using -24px
   on the bottom as well overshot the 12px there and pushed the footer past the content box, which Kendo
   answered with a 12px scrollbar down a popup that has nothing to scroll (measured: scrollHeight 139 against
   clientHeight 127). If the theme ever retunes that padding, these two numbers move with it. */
.ink-windowFormAction .ink-window-actionBar {
    /* margin-top 1.25rem (20px) = the gap between the popup's LAST FIELD and the top of the bar (user request 2026-10-01, every popup: it was 0, so the last input touched the bar).
       1.25rem is what the Start pay run popup's own .ink-newPayRun-footer always used. */
    margin: 1.25rem -24px -12px -24px;
    padding: 16px 24px;
    background-color: rgba(24, 95, 161, 0.1);
    border-top: solid 1px #c9c9c9;
    box-shadow: 0px 0px 10px 0px rgba(38, 43, 67, 0.40);
    border-radius: 0px 0px 0.625rem 0.625rem;
}

/* the buttons of a popup's action bar line up (user request 2026-10-01, Timesheets popup: "Cancel and Save same height and same top alignment").
   Two inline-flex buttons sit on their text BASELINE, and the Save button's icon moves that baseline, so Save rode 2px higher than Cancel.
   Both are the same height already; vertical-align: middle puts their boxes on one line. 'middle' (not 'top') because the Security windows
   put an 'Unsaved changes' badge (.align-middle) in the same bar. (The buttons are Kendo buttons now, .k-button - 2026-10-14.) */
.ink-window-actionBar > .k-button {
    vertical-align: middle;
}

/* MOBILE (below the Bootstrap sm breakpoint): the popup editor is a fixed 400px Kendo container holding a
   fixed 370px column that carries 15px side margins, so the window comes out 448px wide - on a phone it
   overflows the viewport and that 15px margin reads as a gap down the left of the form (user report
   2026-08-28). Go fluid instead of fixed. min-width has to be reset explicitly because Kendo's
   min-width: 400px would otherwise win over any max-width. */
@media (max-width: 575.98px) {
    /* full-bleed: shrink-to-fit collapses to the controls' max-content once the fixed widths are gone
       (measured 286px on a 400px viewport, sitting 57px in from the left), so pin the window to the
       viewport instead. left needs !important because Kendo centres the window by writing an INLINE left. */
    #customFormAction_WrapperId.k-window,
    #windowId_FormPartialUpdateA.k-window,
    #windowId_FormPartialUpdateB.k-window,
    .ink-windowFormAction.k-window {
        width: 100vw;
        max-width: 100vw;
        left: 0 !important;
    }

    .k-window-content > .k-edit-form-container {
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    /* the .k-window prefix is deliberate: '.k-window .custom-popup-editor { margin: 30px 15px }' lives further
       down this file at equal specificity, so an equal-weight selector here would lose on source order. */
    .k-window .k-edit-form-container .custom-popup-editor {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

/*---*/
.k-window .custom-popup-editor {
    margin: 30px 15px; /* Added side margin for breathing room */
}

    .k-window .custom-popup-editor .k-form-field {
        margin-bottom: 5px !important;
        font-weight: 600 !important;
        color: #555 !important;
    }

    .k-window .custom-popup-editor .k-tooltip-error {
        border: solid 1px #e3dadb !important;
    }
/* #endregion customFormAction in window */

.w-100px {
    width: 100px;
}

.ink-grid-link {
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--phoenix-blue) !important;
}

/* 2026-10-09 (user request): the name link on the Employees and Pay Runs lists is regular weight, like the Leaves list's name; every other .ink-grid-link keeps 500.
   Two classes on purpose so it beats .ink-grid-link above whatever the file order. */
.ink-grid-link.ink-grid-link--regular {
    font-weight: 400;
}

    .ink-grid-link:hover {
        color: rgba(var(--bs-primary-rgb), 0.9) !important;
        /* zcolor: #2474e5 !important; */
        /* text-shadow: 0px 0px 1px #2474e5; */
    }

XXXinput.k-input-inner:focus,
XXXspan.k-dropdownlist:focus {
    -webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .075);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .075);
}

/*tr.rowArchive {
    background-color: rgba(249, 242, 236, 0.40) !important;
}*/

/*.k-grid .k-table-td:hover {
    box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
}*/

.tooltip .tooltip-inner {
    background-color: #ffc;
    color: #333;
    border: 1px solid #999;
    box-shadow: rgba(0, 27, 71, 0.24) 0px 8px 20px 0px;
    padding: 4px;
    font-size: 14px;
}

.tooltip .tooltip-arrow,
.tooltip .arrow,
.tooltip .tooltip-arrow::before,
.tooltip .arrow::before,
.tooltip .tooltip-arrow::after,
.tooltip .arrow::after {
    display: none !important;
}

.ink-tooltip {
    color: rgba(25, 104, 252, 0.6) !important; /* rgba(100, 116, 149, 1) */
    padding: 10px 10px 10px 10px !important; /* IMP: DO NOT CHANGE */
}

    .ink-tooltip:hover {
        color: rgba(25, 104, 252, 1) !important;
    }

.ink-info {
    padding: 4px !important;
    background-color: rgba(245, 245, 247, 1) !important;
}

/* red border on focus / error - see https://app.ytdown.to/en27/
.input-text:focus, .input-text:focus-visible {
    border-color: #ff0033 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 .25rem rgb(255 1 42 / 19%) !important;
    outline: none;
}
*/

/* -------------------------------------------------------------------- */
/*smart-json dropdown item (Description + InfoSubText + InfoBadge) - used by GridESuper SuperContributionType ddl + Employment PayRunFrequencyTypeId_LookupTypeXLookupTypeId ddl (2026-08-26) */
.smartDdlCboItem {
    display: block;
    width: 100%;
    line-height: 1.25;
    position: relative; /* positioning context for the absolutely-placed badge (user request 2026-07-23: badge vertically centered) */
    padding-right: 4.5rem; /* reserves the right-hand badge column so title/subtext never run under the "Rate $"/"Rate %" badge */
    padding-left: .5rem; /* small left indent so the title and the (i) info icon sit clear of the item edge (user request 2026-07-23) */
    padding-top: 3px; /* drops the title + info line ~3px so the two-line block sits vertically centered in the row (user request 2026-07-23; the list item itself has padding-top 0) */
    /* WHY: a one-line item (title + badge, no sub line) was shorter than the badge, so the centred badge's bottom edge was cut off.
       Every item is now at least as tall as a two-line (title + sub) item, so all dropdowns share one height (user request 2026-10-14). */
    min-height: 2.75em;
    box-sizing: border-box;
}

    /* the old ::after clearfix was removed with the float (2026-07-23) - the badge is out of flow via absolute positioning now, nothing left to clear */

/* WHY: an item with no sub line is one text line inside a two-line-high box (min-height above), so the title sat at the top.
   Padding-top of (2.75em box - 1.25em line) / 2 = .75em centres it, no flex (user request 2026-10-14). */
.smartDdlCboItem:not(:has(.smartDdlCboItem-sub)) {
    padding-top: .75em;
}

/* WHY (user request 2026-10-24, Employment Type list): the 4.5rem column was narrower than badges such as PART-TIME / FULL-TIME, so the sub text ran under the badge and was cut off.
   An item that carries a badge reserves a wider column (the widest badge + a gap) in EVERY dropdown that uses this template; a badge-less item keeps the full width. */
.smartDdlCboItem:has(.smartDdlCboItem-badge) {
    padding-right: 8.5rem;
}

/* badge on the RIGHT, vertically CENTERED against the whole two-line item (user request 2026-07-23; flex-free: absolute + translateY instead of the old top-right float) */
.smartDdlCboItem-badge {
    position: absolute;
    right: .5rem; /* a gap between the badge and the list edge (user request 2026-10-24) */
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

/* the icon inside the badge sits 1px lower, level with the badge word (user request 2026-10-24) */
.smartDdlCboItem-badge .ri {
    position: relative;
    top: 1px;
}

/* the badge CONTENT (icon and word together) in a dropdown item (user request 2026-10-25 / 26). Padding total as the shared badge rules (0.71em). History: 1px higher (0.22 / 0.49), then 0.4px higher (0.26 / 0.45) after a measurement, then the user asked for 1px DOWN from that ("Move Icon + Badge 1 px down"): +0.083em top, -0.083em bottom (1px at the badge's 10.5px font is 0.095em; 0.083em = 0.87px) = 0.34 / 0.37 with an icon, 0.46 / 0.25 without. The badge box stays centred by its translateY(-50%), so only what is inside it moves. Longer selector so it outranks .badge.badge-phoenix:has(i). */
.smartDdlCboItem .smartDdlCboItem-badge.badge:has(i) {
    padding-top: 0.34em;
    padding-bottom: 0.37em;
}

.smartDdlCboItem .smartDdlCboItem-badge.badge:not(:has(i)) {
    padding-top: 0.46em;
    padding-bottom: 0.25em;
}

.smartDdlCboItem-title {
    display: block;
    font-weight: 600;
    /* the old -4px relative lift opened a gap to the info line below - removed (user request 2026-07-23) so the title sits JUST above the (i) info line */
}

.smartDdlCboItem-sub {
    display: block;
    color: #6c757d;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .1);
    /* position: relative;
    top: -2px;
    the old left:-2px nudge pushed the (i) info icon into the item edge and clipped it - removed (user request 2026-07-23) */
}

    .smartDdlCboItem-sub .ri {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 1em; /* fixed icon width = the hanging indent below, with the one space after it (user request 2026-10-24) */
    }

/* WHY (user request 2026-10-24): a sub text that wraps ran its 2nd line back under the (i) icon. Hanging indent: the wrapped lines start under the first line's TEXT.
   1.25em = the icon (1em) + the space the stored markup puts after it. Applies to every dropdown using this template. */
.smartDdlCboItem-sub {
    padding-left: 1.25em;
    text-indent: -1.25em;
}

/* separator line between options (scoped to this dropdown via :has) + a touch more vertical room */
.k-list-item:has(.smartDdlCboItem) {
    border-bottom: 1px solid #d5d4ce;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

    .k-list-item:has(.smartDdlCboItem):hover {
        background: #f5f4ed;
    }

    .k-list-item:has(.smartDdlCboItem):last-child {
        border-bottom: 0;
    }

    /* the template <div> sits inside <span class="k-list-item-text"> whose tall inherited line-height reserved a blank strip above the content. Collapsing the wrapper's own line-height removes the gap; the visible text keeps its normal line-height via .smartDdlCboItem (line-height:1.25). */
    .k-list-item:has(.smartDdlCboItem) .k-list-item-text {
        display: block;
        line-height: 10px !important;
        min-height: 0;
        width: 100%;
        margin: 0;
    }

/* inline % / $ legend next to the Superannuation Contribution Type label */
.smartDdlCboLegend {
    margin-left: .5rem;
    font-weight: 400;
    color: #6c757d;
}

    .smartDdlCboLegend .badge {
        margin: 0 .25rem 0 .75rem;
    }

        .smartDdlCboLegend .badge:first-child {
            margin-left: 0;
        }

/* Hide the toolbar search box on all 4 grids (UI only - display:none, same as k-hidden). The <search> config + GridSearchRowByText wiring stay intact, so search still works if re-shown; remove this rule to bring the box back. */
x.k-grid .k-grid-search {
    display: none !important;
}

/* #region Claude Design import - CompanyListPage.dc.html (project 5a94b18b) */

/* Existing rules already covering parts of this design (DO NOT duplicate):
     line 1284 .gridAOutsideToolbar  - toolbar gradient (matches --ink-gradient-header-rev)
     line 1297 .ink-gridAOutsideToolbar-addButton - green colour (legacy add button)
     line 1319 .k-grid-header .k-table-th - navy grid header gradient
     line 1395 .groupActive - active group row tint
     line 1404 .groupArchive - archive group row tint
     line 1413 .k-table-alt-row - zebra
     line 1423 .k-table-tbody row hover - pale blue
   The block below adds only NEW pieces: design tokens, ink-card,
   ink-badge soft variants, ink-grid-toolbar BEM names, and the search input.
*/

/* ---------- ink-card chrome ---------- */

.ink-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--card-header-height);
    padding: 0 1.25rem;
    background: var(--ink-gradient-header);
    border-top: var(--border-w-accent) solid var(--ink-primary);
    color: var(--text-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

/* OPT-IN: a 1px line under the card header in the card border's own colour (user requests 2026-09-26 - the four Reporting >
   Reports pages first, then EmployeeList and CompanyList). A MODIFIER, not a change to .ink-card__header, so only the headers
   that wear it change and every other ink-card page keeps its header as it was. */
.ink-card__header--ruled {
    border-bottom: 1px solid var(--border-hairline);
}

/* The five Company pages (Settings, Pay Category, Pay Cycle, Superannuation, Leave Type) keep their h4.card-header element and wear the ink-card header too (user, 2026-10-07: "Company Settings Header not same as Timesheet"). WHY this rule: h4.card-header (element + class) beats the single-class .ink-card__header, so size, weight and colour are restated to match the Timesheets header measured live (22px, 600, dark). */
h4.card-header.ink-card__header {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.ink-card__icon {
    color: var(--ink-primary);
    font-size: 1.6rem;
    line-height: 0;
}

/* ---------- buttons ----------
   There is ONE button now: the Kendo button (user request 2026-10-14, "move everything to Kendo"). Markup is <button data-ink-button="save|success|primary|cancel|base|delete|warning|rowAction">,
   cast by appJSCommon.CastHelper.Kendo_ActionButton_Cast (portal-custom.js), which also builds DropDownButtons / SplitButtons from data-ink-menu. The old .ink-btn family (.ink-btn, --sm,
   --success, --cancel, --danger, __icon, __label) and the global Bootstrap .btn size rule are RETIRED: nothing uses them any more. The shared look is the global .k-button shadow rule
   (".btn:hover, .k-button" above) and the two colour classes just below. */

/* A Kendo BUTTON in the house success green (2026-09-10, user request on the Company form's Save).
   WHY it is not just themeColor: "success" - that is set on the widget too, but this swatch's success green is a
   different, noticeably DARKER green than the house green (--ink-green-600) paints: measured oklch L 51.0% against the
   house green's 62.6% at near-identical hue. Two greens for one meaning is exactly what a reader notices when
   they move between a Kendo-cast Save (Company) and any other green Save, so the colour is
   pinned here to the house-green tokens - one green, one place to change it.
   !important for the same reason the sibling rule carries it: Kendo colours a solid button at runtime from its
   own custom properties, so a plain declaration loses.
   This class styles nothing until a button opts in by wearing it - adding it changes no existing screen. */
/* 2026-09-21: the background and border were COMMENTED OUT here (and the selector had been renamed .xk-button
   for a while), which left every opted-in button on Kendo's own colour - BLUE for a grid popup Save, since that
   button is k-button-solid-primary and carries no themeColor. Nine screens wear this class and none was green.
   Switched back on at the user's request ("Superannuation TemplatePay Bank - Has Blue button instead of Green
   success"). The house-green tokens, so there is one house green in one place. */
.k-button.ink-kendoButton--success {
    background: var(--ink-green-600) !important;
    border-color: var(--ink-green-600) !important;
    color: #fff !important;
}

    .k-button.ink-kendoButton--success:hover {
        background: var(--ink-green-500) !important;
        border-color: var(--ink-green-500) !important;
        color: #fff !important;
    }

/* the red Kendo button state used where a button turns into a "Confirm ..." step (the invite Revoke): the Bootstrap danger red, white text */
.k-button.ink-kendoButton--danger {
    background: var(--bs-danger, #c62137) !important;
    border-color: var(--bs-danger, #c62137) !important;
    color: #fff !important;
}

/* 2026-10-20 (user request, the template's ui-buttons.html "Warning" button): every Kendo WARNING button (data-ink-button="warning": Revise Payrun, Archive ...) wears the template's
   amber #fdb528 with white text, not the Fluent swatch's own amber. !important for the same reason as the green above: Kendo colours a solid button from its own custom properties at runtime. */
/* 2026-10-22 RETARGETED (user): this rule was written for .k-button-solid-warning, a class this Kendo build never draws - a cast Warning button is `k-button k-button-warning` (the default
   fill adds NO k-button-solid class; measured on a real Kendo_ActionButton_Cast button), so the amber never applied. Outline / flat / link warning buttons keep Kendo's own look, and a disabled
   button is left to Kendo's disabled look so it does not read as available (the same reason as the Save rule below). The hover colour is the token darkened 10% (color-mix with black), not the
   fixed amber #e5a323 it had: on the Phoenix theme --bs-warning is Phoenix's orange (#e5780b), and an orange button must not turn amber under the mouse. With the #fdb528 fallback the mix is #e4a324,
   the colour that was there. */
.k-button.k-button-warning:not(.k-button-outline, .k-button-flat, .k-button-link, .k-disabled, :disabled) {
    background: var(--bs-warning, #fdb528) !important;
    border-color: var(--bs-warning, #fdb528) !important;
    color: #fff !important;
}

    .k-button.k-button-warning:not(.k-button-outline, .k-button-flat, .k-button-link, .k-disabled, :disabled):hover {
        background: color-mix(in srgb, var(--bs-warning, #fdb528) 90%, #000) !important;
        border-color: color-mix(in srgb, var(--bs-warning, #fdb528) 90%, #000) !important;
        color: #fff !important;
    }

/* 2026-09-29 (user request on the Employee form): a Save that is DISABLED because nothing changed must LOOK disabled - 50% faded, not clickable.
   WHY it needs its own rule: the green above is forced with !important, so it also painted the disabled button at full strength (and the hover rule
   above brightened it under the mouse), which read as "Save is available" when the page had refused it. The hover colours are pinned back to the
   normal green here so a disabled button does not react to the mouse. Kendo's enable(false) sets both the disabled attribute and .k-disabled. */
.k-button.ink-kendoButton--success.k-disabled,
.k-button.ink-kendoButton--success:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    background: var(--ink-green-600) !important;
    border-color: var(--ink-green-600) !important;
}
/* ---------- ink-grid-toolbar (BEM aliases - compose with existing .gridAOutsideToolbar) ---------- */
.ink-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gradient + border come from the existing .gridAOutsideToolbar rule (line 1284 + 1291) */
    border-top: solid 1px #dedede;
    border-left: solid 1px #dedede;
    border-right: solid 1px #dedede;
    border-bottom: solid 1px #dedede !important;
    border-radius: 0.5rem 0.5rem 0 0;
}

.ink-grid-toolbar__spacer {
    flex: 1 1 auto;
}

/* a short line in the grid toolbar saying what the page is for. SHARED by the left-nav Leave page and the
   Employee list (2026-09-22), which is why it lives here and not in a page stylesheet: it started as
   .ink-leaveList-intro in portal-page-payroll-leave-common.css, and the Employee list links no page stylesheet
   of its own. Named after its sibling .ink-grid-toolbar__spacer because it sits in the same toolbar. */
.ink-grid-toolbar__intro {
    display: inline-block;
    color: var(--text-faint);
    font-size: 0.875rem;
}

/* the intro line is NOT shown beside a green + New button (user request 2026-10-19, every page). The text stays in the markup; a toolbar with no + button
   (the bars of the report and detail pages) keeps its intro. Every + New button wears data-ink-icon="ri-add-line". */
.ink-grid-toolbar:has([data-ink-icon="ri-add-line"]) .ink-grid-toolbar__intro,
[data-ink-icon="ri-add-line"] ~ .ink-grid-toolbar__intro {
    display: none !important;
}

/* below the md breakpoint the toolbar stacks: the intro takes its own line so the search box keeps its width */
@media (max-width: 767.98px) {
    .ink-grid-toolbar__intro {
        display: block;
        margin-bottom: 0.5rem;
    }
}

.ink-grid-toolbar .ink-grid-search {
    width: 256px;
    max-width: 40vw;
}

/* a toolbar button that shows its ICON ONLY on phones (2026-09-27, Employee List 'Export CSV'): at 390px the '+ Employee' pill,
   the search box and an 'Export CSV' pill shared about 337px and the search box was squeezed to 51px - too narrow to type in.
   Below the sm breakpoint the label goes, the icon stays, and the button keeps its words in title + aria-label. The same
   device CompanyPayCategory's Add button uses above, made a reusable modifier class instead of a page-specific selector */
@media (max-width: 575.98px) {
    .ink-grid-toolbar .ink-kendoButton--iconOnlyOnPhone .ink-buttonLabel {
        display: none;
    }
}

/* ---------- ink-input-group + ink-input (search field) ---------- */
.ink-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.ink-input-group > i.ri {
    position: absolute;
    left: 0.7rem;
    color: var(--text-faint);
    font-size: 1.05rem;
    pointer-events: none;
}

.ink-input {
    width: 100%;
    font-size: var(--text-base);
    color: var(--text-body);
    background: #fff;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    min-height: 38px;
    transition: border-color var(--duration-default), box-shadow var(--duration-default);
    appearance: none;
}

.ink-input::placeholder {
    color: #aeb2bd;
}

.ink-input:hover {
    border-color: var(--ink-gray-400);
}

.ink-input--sm {
    min-height: 32px;
    padding: 0.3rem 0.6rem;
    font-size: 1rem;
}

.ink-input-group .ink-input {
    padding-left: 2.2rem;
}

/* #endregion Claude Design import - CompanyListPage.dc.html */

/* #region Unsaved-changes badge (Employee/Employment/Tax form-actions rows) */
/* Hidden while the form matches its DirtyCheck baseline; uiFlat_DirtyBadge_onSaveRefresh adds the -show modifier whenever the Save button becomes dirty-enabled (class toggle instead of inline styles; inline-block, no flexbox) */
.ink-unsavedChangesBadge {
    display: none;
}

/* WHY (user request 2026-10-24): the faint "?" icon in front of a label word (Tax > Has study loan "? STSL") sat on the text baseline, ~3px above the word's centre line. -3px is the measured
   drop that puts the two centres level (vertical-align: middle overshoots by 1px, it centres on the x-height). */
.ink-labelHelpIcon {
    vertical-align: -3px;
}

/* WHY (user request 2026-10-24): the word inside the badge wears align-middle but its icon sat on the text baseline, so the icon rode ~3px above the word's centre line. Both are middle-aligned now (measured live: same centre). */
.ink-unsavedChangesBadge > .ri {
    vertical-align: middle;
}

/* Visible ONLY on Desktop XL and wider (theme xl breakpoint 1200px) - below that the badge stays hidden even while dirty (user request: no badge on laptop/tablet/mobile; the JS toggle still runs, this media query gates the rendering) */
/* AFTER A SAVE the pill keeps its place instead of vanishing (user request 2026-10-30, "keep there instead of hidden - all pages", answered "Keep its space, invisible"): wherever the pill is allowed to show, a clean form hides it with visibility (its width stays reserved) and the -show class makes it visible; below that width it stays display:none as before. */
@media (min-width: 1200px) {
    .ink-unsavedChangesBadge {
        display: inline-block;
        visibility: hidden;
    }

    .ink-unsavedChangesBadge.ink-unsavedChangesBadge-show {
        display: inline-block;
        visibility: visible;
    }
}

/* Grid-popup variant (Bank popup editor): shows from 350px window width AND only on non-touch devices (hover + fine pointer = desktop/laptop with a mouse) - so narrow desktop windows still get the badge but ALL mobile/touch devices stay hidden regardless of width (user request 2026-07-21) */
@media (min-width: 350px) and (hover: hover) and (pointer: fine) {
    .ink-unsavedChangesBadge.ink-unsavedChangesBadge--popup {
        display: inline-block;
        visibility: hidden;
    }

    .ink-unsavedChangesBadge.ink-unsavedChangesBadge--popup.ink-unsavedChangesBadge-show {
        display: inline-block;
        visibility: visible;
    }
}
/* #endregion Unsaved-changes badge */

/* #region Release Notes page START */

/* WHY (2026-10-19): the theme drops the top padding of a .card-body that follows a .card-header, so the first timeline dot and its version line sat UNDER the header's gradient band and looked cut off. The body gets its top padding back. */
.card .card-header + .card-body.ink-releaseCardBody {
    padding-top: 1.5rem;
}

/* #endregion Release Notes page END */

/* #region Errors misc page START */

/* WHY (2026-09-14): the Materialize misc server-error template carries these two declarations as an inline
   style attribute on its big number heading. The house rule forbids an inline style attribute, so they live
   here instead. Scoped by class so nothing else in the app picks up a 6rem heading. */
.ink-miscErrorCode {
    font-size: 8rem;
    line-height: 8rem;
    font-weight: 900;
    color: var(--phoenix-primary);
    /* the Phoenix 500 picture's look: the number with a lighter copy offset behind it (user request 2026-10-25) */
    text-shadow: 0.35rem 0.35rem 0 rgba(56, 116, 255, 0.35);
}
/* #endregion Errors misc page END */

/* MOVED OUT 2026-09-08: PayRunList page -> portal-page-payroll-payrun-common.css */

/* #region Grid name-cell hyperlink (Company grids) START */

/* WHY (2026-09-02, user request): the CompanyPayCategory / CompanyPayRun / CompanySuper name cells open
   the row's edit popup like the TemplatePay pay-item name does, so they take the SAME link look. TemplatePay's copy
   of these rules is scoped under .templatePaySection in portal-page-payroll-employee-templatepay.css; this copy is
   grid-generic, so any page whose column template wraps a name in .ink-gridCell-NameLink gets the styling. Values
   identical to the TemplatePay original (blue, no underline at rest, underline on hover, hand cursor). */
.k-grid tbody .ink-gridCell-NameLink {
    color: #4a7dfc;
    cursor: pointer; /* the name cell is the click-to-edit surface (each page's gridCustom_GridRow_PopupFromNameCellOnly) */
}

.k-grid tbody .ink-gridCell-NameLink:hover {
    text-decoration: underline; /* scoped to the span so the underline stops at the name and the badges beside it are left alone */
}

/* the whole cell that CONTAINS the name link shows the hand cursor. :has() on purpose - a positional selector would
   land on the HIDDEN responsive mobile-card td that sits before the name cell (the trap the TemplatePay JS documents) */
.k-grid tbody td:has(.ink-gridCell-NameLink) {
    cursor: pointer;
}


/* ---------- DEV-only PRIMARY KEY ids (2026-09-21) ----------
   The red "105 :" in a grid cell and in a page heading. HIDDEN BY DEFAULT and shown only when asked for -
   there is no environment test any more (user decision 2026-09-21), so these ids can appear on PRODUCTION
   too, which is exactly why the default is OFF and why a JavaScript failure leaks nothing.
   This is the ONLY gate since the environment test was removed: portal-custom.js reads the localStorage key
   isDebug_ShowPrimaryKey on document.ready and puts .ink-showDebugPrimaryKey on the BODY when it is true.
   WHY on the body and not on each span: a Kendo grid rebuilds its cells on every sort, filter, page and save,
   so anything hidden element-by-element reappears on the next render. One ancestor class outlives them all -
   and it also covers the page-heading span, which Razor renders and no JS ever touches.
   To show them:  add ?isDebug=true to the URL once - it is remembered. ?isDebug=false turns them off again.
   Absent key = HIDDEN. */
.ink-debugPrimaryKey {
    display: none;
}

body.ink-showDebugPrimaryKey .ink-debugPrimaryKey {
    display: inline;
}

/* the flat-form "pk = 35" line is a DIV on its own row, not a span inside a cell, so it needs block.
   Same specificity as the rule above (0,2,1) and it comes LATER, so it wins for this one class. */
body.ink-showDebugPrimaryKey .ink-debugRecordPk {
    display: block;
    margin: 0 0 8px 0;
}

/* ---------- Role badges (moved here from portal-page-security-common.css, 2026-09-21) ----------
   WHY SHARED: a role badge stopped being a Security-module thing the moment the Employee List grew a Role column
   (user request the same day). EmployeeList does not load the Security folder stylesheet, so every badge there fell
   back to the theme's plain blue and Admins looked identical to Employees - the server was already sending the right
   tone class, nothing was styling it.
   The tone class is chosen in ONE place, WebUI.HelpersApp.Payroll_SecurityAccessHelperApp.GetBadgeToneCSSClass_BySecurityRoleTypeId,
   so with the CSS in one place too a role wears ONE colour everywhere in the app.
   These are the values that were WINNING before the move: the security sheet defined the badge twice and its later
   'Phoenix badges' region replaced the first - uppercase, 11px, a 1px border one step darker than the soft wash, from
   the Phoenix light palette (*-bg-subtle / *-text-emphasis / *-border-subtle). Violet and teal have no Phoenix tone
   and are built the same way from their own hue. Nothing about the look changed in the move.
   STILL IN THE SECURITY SHEET, on purpose: the solid initials discs (.ink-securityUserAvatar.ink-securityRoleBadge--*),
   the user view's badge list spacing, and the status pills and chips - all Security-only. The discs deliberately reuse
   the tone class WITHOUT the base class, which is why the shape below lives on the base class alone. */
.ink-securityRoleBadge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    padding: 2px 8px;
    margin: 0 4px 4px 0;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The badge BESIDE a name in a one-line grid cell (the three Payroll reports): the base class's 4px bottom margin
   (made for wrapped badge lists) lifts it off the text's vertical middle, so the inline form drops it. */
.ink-securityRoleBadge--inline {
    margin-bottom: 0;
    vertical-align: middle;
}

.ink-securityRoleBadge--primary {
    color: #003cc7;
    background-color: #e5edff;
    border-color: #85a9ff;
}

.ink-securityRoleBadge--grey {
    color: #525b75;
    background-color: #eff2f6;
    border-color: #cbd0dd;
}

.ink-securityRoleBadge--success {
    color: #1c6c09;
    background-color: #d9fbd0;
    border-color: #90d67f;
}

.ink-securityRoleBadge--info {
    color: #005585;
    background-color: #c7ebff;
    border-color: #60c6ff;
}

.ink-securityRoleBadge--warning {
    color: #bc3803;
    background-color: #ffefca;
    border-color: #ffcc85;
}

.ink-securityRoleBadge--danger {
    color: #b81800;
    background-color: #ffe0db;
    border-color: #f48270;
}

/* violet (no Phoenix tone): the Admins role tone */
.ink-securityRoleBadge--violet {
    color: #5b2fb8;
    background-color: #efe8fc;
    border-color: #b89cf0;
}

/* teal (no Phoenix tone): the Payroll Officers role tone */
.ink-securityRoleBadge--teal {
    color: #0b6b5f;
    background-color: #d6f5f0;
    border-color: #7fd1c4;
}

/* The hand cursor on a WHOLE grid row - opt-in, for the grids whose row really does something (2026-09-21,
   user report: "mouse cursor is hand while it should be hand only when underlying can click else pointer").
   WHY the marker class and not the helper: appJSCommon.GridHelper.GridGroupStyle_GroupRowAddClass used to stamp
   'cursor-pointer' on every active row. That was true while the shared Kendo_GridInit_AfterRendered bound a
   row-wide click -> editRow, but on 2026-09-02 ten grids narrowed the click to the NAME CELL only
   (gridCustom_GridRow_PopupFromNameCellOnly does tbody.off('click','tr') and re-binds on the name td). The click
   moved and the cursor did not, so ten grids offered a hand over dead space.
   .ink-gridRow-Redirect is the SAME class the shared row handler tests (row.closest('.ink-gridRow-Redirect')),
   so one marker now drives both the click and the cursor and they cannot drift apart again. Opt-in on purpose: a
   grid built tomorrow is arrow-by-default until it declares its row clickable.
   :not(.rowArchive) rather than .rowActive: an ARCHIVE band keeps its own cursor-no-drop, while a row-clickable
   grid that is NOT grouped (CompanyList, PayRunList) is covered too - those rows never carry .rowActive, which
   the band helper only stamps on a grouped grid. Everything that IS clickable already carries its own hand -
   .ink-gridCell-NameLink, td:has(.ink-gridCell-NameLink) below, .ink-grid-link and the Kendo buttons - so no
   grid lost one. */
.ink-gridRow-Redirect tbody tr:not(.rowArchive) {
    cursor: pointer;
}

/* An ARCHIVED row's name is NOT a link, so it must not look like one (user request 2026-09-10).
   WHY this is a correction and not a preference: every one of these grids already REFUSES to open the popup for an
   archived row - each page's name-cell click handler returns early on dataItem.IsDeleted === true, because Restore is
   an archived row's only action. So the blue text, the hover underline and the hand cursor were advertising a click
   that could never happen, on all six grids at once (CompanyPayCategory, CompanyPayCycle, CompanySuper,
   Employee Bank, Employee Superannuation, TemplatePay).
   ONE rule fixes all six because tr.rowArchive is stamped by the SHARED helper every one of them already calls -
   appJSCommon.GridHelper.GridGroupStyle_GroupRowAddClass, which walks each group band and stamps its rows
   'rowArchive cursor-no-drop'. Doing it here rather than in six column templates also means the mobile responsive
   card is covered by the same rule, and a seventh grid built tomorrow inherits it.
   inherit rather than a named colour: the name simply falls back to the row's own text, so there is no second grey
   to keep in step with the theme. The cell's cursor is handed back too - the row's own cursor-no-drop then shows
   through, which is the honest pointer for something that cannot be opened.
   Specificity beats the three rules above on its own (three classes + two elements), so ORDER here is not load-bearing. */
.k-grid tbody tr.rowArchive .ink-gridCell-NameLink {
    color: inherit;
    cursor: inherit;
}

    .k-grid tbody tr.rowArchive .ink-gridCell-NameLink:hover {
        text-decoration: none;
    }

.k-grid tbody tr.rowArchive td:has(.ink-gridCell-NameLink) {
    cursor: inherit;
}

/* #endregion Grid name-cell hyperlink (Company grids) END */

/* #region Grid faint sub-line text START */

/* WHY (2026-09-02, user-approved rename sweep): born 2026-09-01 as .ink-payRunGrid-periodSubLine for the
   PayRunList period/frequency sub-line, this rule spread the same day-and-a-bit to FOUR contexts - the
   PayRunList name sub-line, the CompanyPayRun day names under the date columns, the CompanyPayCategory
   Payslip Print text, and the Bank Description column - so the page-and-purpose name became a lie.
   Renamed to the generic .ink-grid-subLine (values unchanged): faint small block line under or inside a
   grid cell's main content. */
.ink-grid-subLine {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-faint);
    margin-top: 0.2rem;
}

/* Employee List Full Name cell (user 2026-10-08): the name link and its badge line share ONE inline-block that sits beside the avatar disc,
   so the badges are under the NAME by structure. Replaces the old .ink-grid-subLine--avatarIndent padding (26px disc + 6px margin), which did not hold on the phone card. */
.ink-employeeNameCell-text {
    display: inline-block;
    vertical-align: middle;
}

/* #endregion Grid faint sub-line text END */

/* #region Grid cell emphasis START */

/* WHY (2026-09-02, user request): the PayRunList columns are not all equally important, so two opposite
   emphases were added and everything else keeps the plain cell style. Both are grid-generic - any column
   whose value deserves the same treatment wraps its text in the span. Each rule changes ONE property:
   alignment, number format and the column width stay with the column and its template, and the grid HEADERS
   are untouched throughout (the user asked for the cells, not the headers).

   NAMING (same day): these were born .ink-grid-cellAmountStrong / .ink-grid-cellAmountFaint, for two MONEY
   columns. The faint one was then wanted on Employees - a head count, not an amount - so "Amount" became a
   lie the moment it served a second kind of column, exactly as .ink-payRunGrid-periodSubLine did before it
   was generalised to .ink-grid-subLine. Both were renamed rather than leaving the pair asymmetric. */

/* strong: Bank Pay - the row's bottom line, the money that actually leaves the bank account */
.ink-grid-cellStrong {
    font-weight: 700;
}

/* medium: a step firmer than plain body text without going bold - used on the head-count NUMBER in the
   PayRunList name cell, matching the weight of the pay-period line beside it while the unit word ("employees")
   stays plain. Weight only, so it composes with .ink-grid-cellFaint wrapping it. */
.ink-grid-cellMedium {
    font-weight: var(--weight-medium);
}

/* faint: Deductions (a subtraction) and Employees (context, not money). Same faint colour as
   .ink-grid-subLine, but colour ONLY - the value keeps the normal cell size and stays inline, where the
   sub-line is small and block. */
.ink-grid-cellFaint {
    color: var(--text-faint);
}

/* #endregion Grid cell emphasis END */

/* REMOVED 2026-09-13 (user request 'eye remove on all pages'): the grid password-style masked column device of 2026-09-02
   (.ink-maskedCellMask / .ink-maskedCellValue / .ink-maskedColumnRevealed on the grid root / .ink-maskedColumnEyeToggle in the
   header). Its three wearers - CompanyPayCategory Rate Amount, Bank Value, Employee Superannuation Member Account Number - show
   their values in full now, so the four rules had nothing left to style. Recover from git history if a masked column returns. */

/* MOVED OUT 2026-09-08: PayRunList popup -> portal-page-payroll-payrun-common.css */

/* MOVED OUT 2026-09-08: PayRunItem -> portal-page-payroll-payrun-common.css */

/* MOVED BACK HERE 2026-09-09. These two rules were carried into
   portal-page-payroll-payrun-common.css by the 2026-09-08 consolidation, and that file is linked by the three
   PayRun pages ONLY - while the class belongs to Company/CompanyPayCycle.cshtml. So the override was dead where
   it sat and missing where it was needed, and that page's grid had lost its full width in the meantime. Found
   by a browser audit of selectors matching nothing on any PayRun page. */
/* Company Pay Cycle grid (Company/CompanyPayCycle.cshtml, kGridA) stretches FULL WIDTH like EmployeeList. This
   Kendo build pins a scrollable grid's header + content tables to an inline width equal to the SUM of the fixed
   column widths (~1211px) - even when one column is deliberately width-less - which left the card's right side
   empty. Forcing 100% beats that inline width; the width-less Name column absorbs the slack (verified by
   patching the live DOM before writing this rule). Scoped by the grid's own ink-companyPayCycleGrid class so no
   other page's grid changes. Renamed from .ink-payRunCompanyGrid on 2026-09-05 (design decision 13) when the
   deleted CompanyPayRun.cshtml came back as CompanyPayCycle.cshtml - the class now reads as this page. */
.ink-companyPayCycleGrid .k-grid-header table,
.ink-companyPayCycleGrid .k-grid-content table,
/* the Company > Leave Types grid (quick task 260920-clt) has the same one-width-less-column layout, so it joins this rule */
.ink-companyLeaveTypeGrid .k-grid-header table,
.ink-companyLeaveTypeGrid .k-grid-content table {
    width: 100% !important;
}

/* #region PayRun folder (MOVED OUT 2026-09-08) */
/* Every rule for the three PayRun pages - PayRunList, PayRunItem and PayRunByEmployee - now lives in ONE
   page-local stylesheet (user request 2026-09-08):
       wwwroot/ResourcesPortal/inkcss/portal-page-payroll-payrun-common.css
   Each of the three links it from its own @@section Styles block. Nothing for that folder belongs in this
   shared file - the three pages share a stat-card row, a money palette and a grid idiom, so keeping their
   rules together is what stops one of them drifting from the other two. */
/* #endregion PayRun folder (MOVED OUT 2026-09-08) */

/* ============================================================================================
   READ-ONLY COMPANY (quick task 260916-ooo, user request "disable save buttons for non-editors")

   The four Company tabs are WRITE-gated to Global Administators, Global Members, Owner, Accountants
   and Admins. Everybody else the company gate lets in still READS them, so the page renders as
   normal and only the controls that would start a write are turned off.

   WHY pointer-events + opacity rather than the disabled attribute: it is the idiom this file already
   uses for .ink-grid-requestBusy, and these controls are a mix of anchors, Kendo command buttons and
   template-rendered icons, not all of which honour "disabled".

   THIS IS A COURTESY, NOT THE GATE. The four write handlers refuse the save regardless - a person who
   reaches a control another way still gets "Only a Global Administator, Global Member, Owner,
   Accountant or Admin can change company settings." Never rely on this rule for security.
   ============================================================================================ */
.ink-readOnlyCompany .ink-gridAOutsideToolbar-addButton,
.ink-readOnlyCompany .btnColumnCommandEditClass,
.ink-readOnlyCompany .btnColumnCommandDestroySoftClass,
.ink-readOnlyCompany .btnColumnCommandDestroyHardClass,
.ink-readOnlyCompany .btnColumnCommandRestoreClass,
.ink-readOnlyCompany .btnColumnCommandMoveClass,
.ink-readOnlyCompany .k-grid-save-command, /* the grid POPUP Save (Kendo's own button, user report 2026-09-29: popups stayed lit for a Readers login) */
.ink-readOnlyCompany button[ref-update-button],
.ink-readOnlyCompany #btnSave_FormMainSave,
.ink-readOnlyCompany #btnSave_FormPartialUpdateA,
.ink-readOnlyCompany #btnSave_FormPartialUpdateB,
.ink-readOnlyCompany #btnSave_FormA,
.ink-readOnlyCompany #btnSaveAndNext_FormA,
.ink-readOnlyCompany #btnSave_ItemChange,
.ink-readOnlyCompany #btnSave_MarkPaid,
.ink-readOnlyCompany #btnSave_Timesheet,
.ink-readOnlyCompany #btnSave_WindowUser,
.ink-readOnlyCompany #btnSave_WindowUserEdit {
    pointer-events: none;
    opacity: 0.5;
}

/* EMPLOYMENT TERMINATE / REINSTATE (user instruction 2026-10-02): only Owner, Admins, Payroll Officers and Accountants (and the global
   write roles) see these two buttons. !important because the page's own show/hide toggle swaps d-none / d-inline-block on them and
   d-inline-block would otherwise bring a hidden button back. A courtesy - EmployeeEmployment_FormHandler refuses the write regardless. */
.ink-noEmploymentStatusChange {
    display: none !important;
}

/* PHONE CARD (quick task 260928-t91): a status badge and the Delete / Archive button share one line on the Super Payments and
   Timesheets phone cards - a small gap between them */
.k-grid td .badge + .btn-icon {
    margin-left: .25rem;
}

/* THE INITIALS DISCS (moved here from portal-page-security-common.css, quick task 260928-t91, user request "Show like AE DP KO
   Avatar and color instead of PERSON same icon for all users on EmployeeList"): the role's tone as a SOLID disc with white initials.
   Worn by the Security Users list / user view page (.ink-securityUserAvatar, its own shape rule stays in the Security sheet) and by
   the Employee list (.ink-avatarInitials below). The two-class selector beats the badge's soft-wash tone rule, so the same tone
   class paints a badge softly and a disc solidly. */
.ink-securityUserAvatar.ink-securityRoleBadge--danger,
.ink-avatarInitials.ink-securityRoleBadge--danger,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--danger {
    color: #ffffff;
    background-color: #d6343f;
}

.ink-securityUserAvatar.ink-securityRoleBadge--warning,
.ink-avatarInitials.ink-securityRoleBadge--warning,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--warning {
    color: #ffffff;
    background-color: #b7791f;
}

.ink-securityUserAvatar.ink-securityRoleBadge--info,
.ink-avatarInitials.ink-securityRoleBadge--info,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--info {
    color: #ffffff;
    background-color: #0e8fb3;
}

.ink-securityUserAvatar.ink-securityRoleBadge--primary,
.ink-avatarInitials.ink-securityRoleBadge--primary,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--primary {
    color: #ffffff;
    background-color: #3874ff;
}

.ink-securityUserAvatar.ink-securityRoleBadge--success,
.ink-avatarInitials.ink-securityRoleBadge--success,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--success {
    color: #ffffff;
    background-color: #1f9d55;
}

.ink-securityUserAvatar.ink-securityRoleBadge--violet,
.ink-avatarInitials.ink-securityRoleBadge--violet,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--violet {
    color: #ffffff;
    background-color: #7a4fd6;
}

.ink-securityUserAvatar.ink-securityRoleBadge--teal,
.ink-avatarInitials.ink-securityRoleBadge--teal,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--teal {
    color: #ffffff;
    background-color: #13897a;
}

.ink-securityUserAvatar.ink-securityRoleBadge--grey,
.ink-avatarInitials.ink-securityRoleBadge--grey,
.ink-phoenix-pageAvatar .avatar-name.ink-securityRoleBadge--grey {
    color: #ffffff;
    background-color: #6d788d;
}

/* an ARCHIVED person's role badge (user request 2026-09-29): the role Restore brings back, so it reads as a memory, not a live grant */
.ink-securityRoleBadge--archived {
    opacity: 0.55;
}

/* an ARCHIVED role's disc (Employee list): the ARCHIVE badge's own tokens - pale amber fill, amber ring, dark amber letters; the ring is an inset shadow so the disc keeps its size */
.ink-avatarInitials.ink-avatarArchived {
    color: var(--phoenix-warning-text-emphasis);
    background-color: var(--phoenix-warning-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--phoenix-warning-border-subtle);
}

/* an ACTIVE employee whose USER (role) is archived: light pink, the Phoenix danger tokens (pale fill, pink ring, dark red letters) */
.ink-securityUserAvatar.ink-avatarUserArchived,
.ink-avatarInitials.ink-avatarUserArchived {
    color: var(--phoenix-danger-text-emphasis);
    background-color: var(--phoenix-danger-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--phoenix-danger-border-subtle);
}

/* the Employee list's disc: smaller than the Users list's, inline beside the name (no float) */
.ink-avatarInitials {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    margin-right: 6px;
}

/* the small grey hint under a field of the invite card (M00087, 2026-10-07) - the same look as .ink-securityRole-help under the Change Password boxes. It has its OWN class here because
   portal-page-security-common.css is loaded on the Security pages only and the invite card also sits on the Employee page. */
/* WHY: a Kendo floating-label container is an inline box as wide as its text, so the invite boxes shrank to about 180px; make it fill the column (user, 2026-10-07) */
/* WHY: the theme's resting offset put an empty box's label at 5px, ABOVE the 30px input that starts at 21px; rest it in the middle of the input (21px + (30px - 20px) / 2) and float it only on focus (user, 2026-10-07) */
.ink-companyInvite-form .k-floating-label-container.k-empty:not(.k-focus):not(:focus-within) > .k-floating-label {
    inset-block-start: 26px;
}

/* WHY: each floating box has 20px of room above its 32px input for the floated label; the 38px button needs 17px so its middle lines up with the middle of the boxes (20px + 16px - 19px) (user, 2026-10-07) */
/* The four report pages' filter bars use Kendo floating labels (user, 2026-10-07). WHY: the floating wrapper is only as wide as its text unless told otherwise, and the theme rests an EMPTY box's label above the 32px box that starts 20px down; rest it in the middle and float it on focus only (same two rules as the invite card and the Users filters). */
.ink-reportFilters .k-floating-label-container {
    display: block;
    width: 100%;
}

.ink-reportFilters .k-floating-label-container.k-empty:not(.k-focus):not(:focus-within) > .k-floating-label {
    inset-block-start: 26px;
}

.ink-companyInvite-sendColumn {
    padding-top: 17px;
}

.ink-companyInvite-form .k-floating-label-container {
    display: block;
    width: 100%;
}

.ink-companyInvite-help {
    display: block;
    font-size: 12px;
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

/* the invite list header looks like the Users grid header: the navy gradient, white bold words, normal case (user request 2026-10-07). The same values as the shared .k-grid-header .k-table-th rule above; a plain <table> does not carry the Kendo classes, so it needs its own copy. */
.ink-companyInvite-table thead th {
    background: linear-gradient(135deg, rgba(40, 42, 66, 1) 0%, rgba(40, 42, 66, 0.95) 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: var(--kendo-font-size);
    letter-spacing: 0.5px;
    text-transform: none;
    padding: 12px 16px;
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* the invite list's row hover = the Users grid's: the same light blue and a blue bar on the left (user request 2026-10-07). The bar's WIDTH is reserved all the time (a transparent 4px border) and the hover only sets its COLOUR, so the row's content never moves - the house rule for hover rules. table-hover is on the table so Bootstrap paints the row; its hover colour variable is set to the grid's value. */
.ink-companyInvite-table {
    --bs-table-hover-bg: rgba(235, 242, 252, 0.9);
}

.ink-companyInvite-table tbody td:first-child {
    border-left: 4px solid transparent;
}

.ink-companyInvite-table tbody tr:hover > td:first-child {
    border-left-color: var(--bs-primary);
}

/* ---------- ink-orgIcon: the organisation icon (ri-organization-chart) in a small soft-blue circle (user request 2026-10-11) ----------
   Used beside every company name on Companies and on the top-bar Company List button. The circle is a WRAPPER span around the <i>, not the icon
   itself: the Remix icon is drawn from its own background-color (a mask), so a background on the <i> would paint the glyph. */
.ink-orgIcon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0.25rem;
    text-align: center;
    vertical-align: middle;
    /* background-color: var(--phoenix-primary-bg-subtle);
       border-radius: 50%;
       box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.35); a thin ring, drawn inside, so the pale fill shows on a white row and the circle keeps its size */
}

    .ink-orgIcon > i {
        vertical-align: middle;
        position: relative;
        top: -1px; /* the glyph sits 1px low inside the circle - moved up 1px, the circle stays put */
    }

/* the smaller circle for a button (it must not make the button taller than its text line) */
.ink-orgIcon--sm {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
}

/* inside an outline button the hover turns the button solid blue and its text white. The pale circle is gone (its fill is commented out above), so a BLUE glyph would vanish into the
   blue button - the glyph goes white with the text instead (user request 2026-10-19, "on hover icon match") */
.btn:hover .ink-orgIcon > i,
.btn:focus .ink-orgIcon > i,
.btn:active .ink-orgIcon > i,
.k-button:hover .ink-orgIcon > i,
.k-button:focus .ink-orgIcon > i,
.k-button:active .ink-orgIcon > i {
    color: #fff;
}

/* the show / hide eye inside a password Kendo TextBox (appJSCommon.UIHelper.Kendo_TextBox_PasswordEye_Attach; the Login page's eye, user request 2026-10-14) */
.ink-passwordEye {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    cursor: pointer;
    color: var(--kendo-color-subtle, #6b7280);
}

    .ink-passwordEye:hover {
        color: var(--kendo-color-on-app-surface, #1f2937);
    }

/* THE ONE BUTTON-BAR LAYOUT (user, 2026-10-19): Delete / Cancel on the LEFT, Save / Approve on the RIGHT, a two-button bar entirely on the right. portal-custom.js
   (Kendo_ActionBar_Arrange) wraps a bar's buttons in these two spans. Floats for an ordinary bar; margin-left:auto does the same inside Kendo's own flex action row
   (.k-window-actions). The bar clears the floats so its own background / border still wraps the buttons. */
.ink-actionBar {
    text-align: left;
}
span.ink-actionBar {
    display: block; /* the PayRun save bar nests its buttons in a span: a float container must be a block */
}
    .ink-actionBar::after {
        content: "";
        display: table;
        clear: both;
    }
.k-window-actions.ink-actionBar::after,
.k-edit-buttons.ink-actionBar::after {
    display: none;
}
.ink-actionBar-left {
    float: left;
}
.ink-actionBar-right {
    float: right;
    margin-left: auto;
}
/* Kendo's own popup action row spaces its buttons with a flex gap; wrapped in the two spans the buttons would touch, so the gap is restored as a margin between neighbours
   (only here - the other bars space their buttons with their own margins). */
.k-window-actions .ink-actionBar-left > * + *,
.k-window-actions .ink-actionBar-right > * + *,
.k-edit-buttons .ink-actionBar-left > * + *,
.k-edit-buttons .ink-actionBar-right > * + * {
    margin-left: 0.5rem;
}

/* GitHub issue 20: the employee dropdown in the header of the eight Employee pages (_EmployeeSwitcherPartial). Same UNDERLINE-FIELD look as the Pay Run by
   Employee switcher (no box, one hairline, the value reads as the page heading), kept here because the PayRun sheet loads only on the PayRun pages.
   Every rule is (0,2,0) or (0,3,0) against Kendo's (0,1,0) and this sheet loads after fluent-main.css, so none needs !important. */
.ink-employeeSwitcher {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 420px;
    min-width: 220px;
}

    .ink-employeeSwitcher .k-combobox {
        width: 100%;
        background: transparent;
        border-color: transparent;
        border-bottom-color: var(--border-control);
        border-radius: 0;
    }

    .ink-employeeSwitcher .k-input-inner {
        padding-left: 0;
        color: var(--text-heading);
        font-size: 1.0625rem;
        font-weight: var(--weight-semibold);
    }

    .ink-employeeSwitcher .k-input-button {
        background: transparent;
        border-left: 0;
        color: var(--text-muted);
    }

    .ink-employeeSwitcher .k-combobox:hover,
    .ink-employeeSwitcher .k-combobox.k-hover {
        border-bottom-color: var(--border-strong);
    }

    /* the focused underline is painted with an inset shadow, not a thicker border, so the value never steps down and back up (the "flicker" rule) */
    .ink-employeeSwitcher .k-combobox.k-focus {
        border-bottom-color: var(--ink-primary);
        box-shadow: inset 0 -1px 0 0 var(--ink-primary);
    }

/* the list rows read on two lines: the person with their title, then the employee id under it in the faint grey the grids use */
.ink-employeeSwitcher-optionName {
    display: block;
}

/* the status badge goes to the far RIGHT of the header: the header is a flex row, so float-end does nothing there and an auto left margin pushes the badge to the end */
.ink-employeeSwitcher + .page-status-badge {
    margin-left: auto;
}



/* #region Login slogan START (user request 2026-10-26)
   The typed slogan on the sign-in card: a light grey line above and below it. No fixed height on the text (user request 2026-10-26, 'remove white vertical gap'): the line under it follows the typed line directly. */
.ink-loginSlogan {
    margin-bottom: 1.5rem;
    padding: 0.75rem 0;
    text-align: center;
    border-top: 1px solid var(--phoenix-border-color-translucent, #dcdfe6);
    border-bottom: 1px solid var(--phoenix-border-color-translucent, #dcdfe6);
}

.ink-loginSlogan-text {
    color: var(--phoenix-body-color);
}

/* the key word of a slogan line (people, leave, super, pay run) in the Sign In button's blue (user request 2026-10-26) */
.ink-loginSlogan-key {
    color: var(--phoenix-primary);
}

/* the single light grey line above Welcome where the slogan is hidden (below xl): the same line colour as the slogan's two, with the same space under it */
.ink-loginLine {
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--phoenix-border-color-translucent, #dcdfe6);
}
/* #endregion Login slogan END */

/* kept for reference only (unused while the rule above hides the band) */
.k-grid .k-grid-header .k-column-title {
     font-weight: 800;
}
/* A grid name followed by a badge that must line up in ONE column down the rows (user request 2026-10-30, "APRA in like OTE middle", the same look as the Employee Template page): the name sits in a fixed-width box and the badge starts right after it. Desktop only - on the phone/tablet card the badge simply follows the name. 18rem is the width the Template and Pay Run pages use; a longer name pushes its own badge right. */
@media (min-width: 992px) {
    .k-grid .ink-gridNameBox {
        display: inline-block;
        min-width: 18rem;
        padding-right: 0.35rem;
    }
}