/* portal-phoenix.css - the Phoenix theme's INK glue (user request 2026-10-22).
   Loaded ONLY by _PhoenixLayout (the Employee pages), LAST, after Phoenix's theme.min.css, Kendo's fluent-main.css and portal-custom.css.
   Phoenix draws the shell (vertical menu, top bar, .content, footer, breadcrumb, badges); this file does three things only:
     1. gives portal-custom.css the --bs-* tokens it assumed from the Materialize theme (Phoenix spells them --phoenix-*),
     2. switches off the few portal-custom.css rules that were written for the Materialize shell and would bend a Phoenix element,
     3. dresses what Phoenix does not have - the Kendo grid, the Kendo buttons in the top bar, the INK brand line - in Phoenix's own tokens.
   No CSS flex here (project rule) - Phoenix's own classes in the markup do the aligning. */

/* #region START: tokens
   portal-custom.css and the page stylesheets (Leave, Template Pay, Superannuation, Payslip) were written against the Materialize theme and read its --bs-* custom properties
   (the semantic colours and their -text-emphasis / -bg-subtle / -border-subtle tints among them). Without these twins every one of those declarations is invalid and the
   element silently loses the value. Kendo's own font follows the page font so a grid cell and a Phoenix paragraph read as one typeface. */
:root,
[data-bs-theme=light] {
    --bs-primary: var(--phoenix-primary);
    --bs-primary-rgb: var(--phoenix-primary-rgb);
    --bs-primary-text-emphasis: var(--phoenix-primary-text-emphasis);
    --bs-primary-bg-subtle: var(--phoenix-primary-bg-subtle);
    --bs-primary-border-subtle: var(--phoenix-primary-border-subtle);
    --bs-secondary: var(--phoenix-secondary);
    --bs-success: var(--phoenix-success);
    --bs-success-text-emphasis: var(--phoenix-success-text-emphasis);
    --bs-success-bg-subtle: var(--phoenix-success-bg-subtle);
    --bs-success-border-subtle: var(--phoenix-success-border-subtle);
    --bs-info: var(--phoenix-info);
    --bs-danger: var(--phoenix-danger);
    --bs-danger-rgb: var(--phoenix-danger-rgb);
    --bs-danger-text-emphasis: var(--phoenix-danger-text-emphasis);
    --bs-danger-bg-subtle: var(--phoenix-danger-bg-subtle);
    --bs-danger-border-subtle: var(--phoenix-danger-border-subtle);
    --bs-warning: var(--phoenix-warning);
    --bs-warning-rgb: var(--phoenix-warning-rgb);
    --bs-warning-text-emphasis: var(--phoenix-warning-text-emphasis);
    --bs-warning-bg-subtle: var(--phoenix-warning-bg-subtle);
    --bs-warning-border-subtle: var(--phoenix-warning-border-subtle);
    --bs-black: var(--phoenix-black);
    --bs-body-bg: var(--phoenix-body-bg);
    --bs-body-color: var(--phoenix-body-color);
    --bs-body-font-family: var(--phoenix-body-font-family);
    --bs-heading-color: var(--phoenix-emphasis-color);
    --bs-secondary-color: var(--phoenix-secondary-color);
    --bs-border-color: var(--phoenix-border-color);
    --bs-card-bg: var(--phoenix-emphasis-bg); /* WHY: Phoenix has no --phoenix-body-emphasis-bg; the white card surface is --phoenix-emphasis-bg */
    --bs-dropdown-link-active-bg: var(--phoenix-primary);
    --bs-btn-hover-color: var(--phoenix-white);
    --bs-btn-hover-border-color: transparent;
    --bs-card-box-shadow: none;
    --bs-navbar-search-shadow: none;
    --kendo-font-family: var(--phoenix-body-font-family);
}
/* #endregion END: tokens */

/* #region START: shell
   Rules in portal-custom.css that name a class the Phoenix shell also uses. */

/* portal-custom.css: ".nav .nav-link:not(.active):hover" puts a 4px black line under any nav link. That was for the Materialize page tab strip; here it would underline the
   Reports sub-menu links and the person menu links. */
.navbar-vertical .nav .nav-link:not(.active):hover,
.navbar-top .nav .nav-link:not(.active):hover {
    border-bottom: 0 !important;
    color: inherit !important;
}

/* the INK brand line in the top bar: the logo, the clock text and the environment badge. Phoenix's .logo-text is a 1.6rem wordmark; ours is a small clock line. */
.navbar-top .navbar-logo .logo-text {
    font-size: 1rem;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 0;
}

.navbar-top .navbar-logo .env-brand-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* the company switch sits between the brand and the icons, where Phoenix draws its search box. min-width 0 lets it give way on a phone, where the pill shortens its
   name with an ellipsis instead of pushing the Company List button and the person menu off the bar. */
.ink-phoenix-companySwitch {
    margin-right: auto;
    margin-left: 1.5rem;
    min-width: 0;
}

.ink-phoenix-companySwitch .navbar-nav {
    display: block;
}

/* the switch is an inline-block pill (portal-custom.css .ink-companySwitch); inside the navbar its anchor must not take the nav link colour */
.navbar-top .ink-companySwitch,
.navbar-top .ink-companySwitch:hover {
    color: var(--phoenix-body-color);
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ink-phoenix-companySwitch {
        margin-left: 0.5rem;
        max-width: 10rem;
    }
}
/* #endregion END: shell */

/* #region START: stat tiles (the dashboard's icon + number + label + note) */
.ink-phoenix-statIcon {
    min-width: 1em; /* it sits beside the number in a flex row (Phoenix's d-flex markup); never let the number squeeze it */
}

/* #endregion END: stat tiles */

/* #region START: page toolbar (search + actions above the table) */
.search-box .search-input.ink-input {
    width: 20rem;
    max-width: 100%;
    height: auto;
}
/* #endregion END: page toolbar */

/* #region START: grid strip + grid skin
   THE GRID SKIN (every Kendo grid in a page of this layout - the selectors are ".main .k-grid ..."; a grid in a popup window sits outside .main and keeps the shared skin): Phoenix's
   table head and row lines instead of the navy head. THE STRIP (Employee List only, class ink-phoenix-gridStrip): the list sits in its own band edge to edge.
   The Phoenix list is a white band between two thin lines, running edge to edge of the content area (the Customers page's mx-n4 px-4 mx-lg-n6 px-lg-6 - but Phoenix's own
   .content padding is 1.5rem, 2.5rem from the breakpoint where its vertical menu opens, so the pull-out is written to match it exactly, not the 3rem the template's class gives). */
.ink-phoenix-gridStrip {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: var(--phoenix-body-bg) !important;
}

/* Phoenix gives .content the wider 2.5rem padding ONLY beside its vertical menu on a screen that shows it (the menu opens at 992px, the sibling selector below). A page with no menu
   (the Company List) and any screen under 992px keep the 1.5rem padding, so the strip's pull-out must be 1.5rem there or it pokes out of the page and the page scrolls sideways. */
@media (min-width: 992px) {
    .navbar-vertical ~ .content .ink-phoenix-gridStrip {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.main .k-grid {
    border-width: 0;
    background-color: transparent;
    /* the pager stays in view (user request 2026-10-24, "paging visible so the user does not have to scroll"): Kendo's own .k-grid is overflow:hidden, and a sticky child
       can only stick to the screen when no ancestor clips it, so the grid lets go of the clip here. The grid has no border or radius on these pages, so nothing is lost. */
    overflow: visible;
}

/* the pager pinned to the bottom edge of the window until the grid's own end scrolls into view. It needs a SOLID colour (the grid itself is transparent here), or the rows
   would show through it. */
.main .k-grid .k-grid-pager {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: var(--phoenix-emphasis-bg, #ffffff);
}

/* header: Phoenix's table head - small upper-case words on the page colour with one thin line under them, not the navy band the other pages use */
/* the header ROW keeps only its transparent background here: its drop shadow is the shared rule in portal-custom.css (user request 2026-10-22). The CELLS still drop the shared inset highlight. */
.main .k-grid .k-grid-header {
    background: transparent;
}

.main .k-grid .k-grid-header .k-table-th,
.main .k-grid thead.k-table-thead tr.k-table-row .k-table-th {
    background: transparent;
    box-shadow: none;
}

    .main .k-grid-header .k-table-th,
    .main .k-grid thead.k-table-thead tr.k-table-row .k-table-th {
        color: var(--phoenix-secondary-color);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--phoenix-border-color-translucent);
        background-color: var(--phoenix-body-bg);
    }

.main .k-grid .k-grid-header .k-sort-icon,
.main .k-grid .k-grid-header .k-sort-icon .k-icon {
    color: var(--phoenix-secondary-color) !important;
}

/* rows: one thin line between them, the page-highlight colour on hover (portal-custom.css paints a blue wash and a 4px blue edge on the first cell) */
.main .k-grid .k-table-tbody > .k-table-row > td {
    border-bottom: 1px solid var(--phoenix-border-color-translucent);
    padding: 0.625rem 1rem;
}

.main .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row):hover,
.main .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row).k-hover {
    background-color: var(--phoenix-body-highlight-bg) !important;
    box-shadow: none !important;
}

.main .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row):hover > td:nth-child(1),
.main .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):not(.k-grouping-row).k-hover > td:nth-child(1) {
    border-right-width: 0 !important;
    background-color: transparent !important;
    border-bottom-width: 1px !important;
}

.main .k-grid .k-table-row:hover > td,
.main .k-grid tr:hover > td {
    border-bottom: 1px solid var(--phoenix-border-color-translucent) !important;
}

.main .k-grid .k-table-tbody .k-table-alt-row {
    background-color: transparent;
}
/* #endregion END: grid strip */

/* #region START: Materialize "label" buttons (btn-label-danger / -warning / -primary)
   The grid row buttons of Bank, Superannuation, Template Pay and the Leave PDF button are written "btn btn-label-danger k-button ...". The tinted "label" button is a Materialize
   class Phoenix does not have; without it the button keeps Kendo's white face with a white icon (portal-custom.css paints the icon from --bs-btn-hover-color, which the Materialize
   class used to set). Phoenix's soft tints in its own variable names, plus the two --bs-btn-hover-* the shared rules read. */
.btn.btn-label-danger {
    --phoenix-btn-color: var(--phoenix-danger);
    --phoenix-btn-bg: var(--phoenix-danger-bg-subtle);
    --phoenix-btn-border-color: var(--phoenix-danger-bg-subtle);
    --phoenix-btn-hover-color: var(--phoenix-danger);
    --phoenix-btn-hover-bg: var(--phoenix-danger-border-subtle);
    --phoenix-btn-hover-border-color: var(--phoenix-danger-border-subtle);
    --bs-btn-hover-color: var(--phoenix-danger);
    --bs-btn-hover-border-color: var(--phoenix-danger-border-subtle);
}

.btn.btn-label-warning {
    --phoenix-btn-color: var(--phoenix-warning);
    --phoenix-btn-bg: var(--phoenix-warning-bg-subtle);
    --phoenix-btn-border-color: var(--phoenix-warning-bg-subtle);
    --phoenix-btn-hover-color: var(--phoenix-warning);
    --phoenix-btn-hover-bg: var(--phoenix-warning-border-subtle);
    --phoenix-btn-hover-border-color: var(--phoenix-warning-border-subtle);
    --bs-btn-hover-color: var(--phoenix-warning);
    --bs-btn-hover-border-color: var(--phoenix-warning-border-subtle);
}

.btn.btn-label-primary {
    --phoenix-btn-color: var(--phoenix-primary);
    --phoenix-btn-bg: var(--phoenix-primary-bg-subtle);
    --phoenix-btn-border-color: var(--phoenix-primary-bg-subtle);
    --phoenix-btn-hover-color: var(--phoenix-primary);
    --phoenix-btn-hover-bg: var(--phoenix-primary-border-subtle);
    --phoenix-btn-hover-border-color: var(--phoenix-primary-border-subtle);
    --bs-btn-hover-color: var(--phoenix-primary);
    --bs-btn-hover-border-color: var(--phoenix-primary-border-subtle);
}
/* #endregion END: Materialize "label" buttons */

/* #region START: Phoenix popup window (opt-in)
   A page opts a Kendo window in by adding ink-phoenixWindow to its wrapper (Timesheet popup, Request Leave window, Leave decision popup). The wrapper must also carry what gives it the shared popup
   chrome - ink-windowFormAction on a persistent window, or the id customFormAction_WrapperId a grid popup gets when it opens. This keeps the Phoenix modal look: a white window with a thin line, a plain
   bold title over one hairline, and a bottom strip with the same hairline and no tint. The shared chrome (the blue gradient bars, the 4px accent line, the tinted action strip) is written against the
   id and against .ink-windowFormAction, and the generic .k-window titlebar rule is !important - so every selector here starts :is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB), which counts as an
   id for specificity and beats both. A window that does not opt in is untouched. */
:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow {
    border: 1px solid var(--phoenix-border-color) !important;
    border-radius: 0.5rem !important;
    background-color: var(--phoenix-emphasis-bg); /* WHY: the window had no surface of its own (an unknown token) and showed the page through it */
    box-shadow: 0 0.5rem 2rem rgba(var(--phoenix-emphasis-color-rgb), 0.16) !important;
}

:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .k-window-titlebar {
    background: var(--phoenix-body-bg) !important; /* the same surface as the grid header cells (user request 2026-10-24) */
    border-top: 0;
    border-bottom: 1px solid var(--phoenix-border-color-translucent);
    border-radius: 0.5rem 0.5rem 0 0 !important;
    box-shadow: none;
    padding: 1rem 1.5rem;
}

:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .k-window-title {
    color: var(--phoenix-emphasis-color) !important;
    font-size: 1.25rem;
    font-weight: 700;
}

:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .k-window-titlebar-actions {
    filter: none;
}

:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .k-window-title .icon-base {
    color: var(--phoenix-primary);
    /* WHY: the shared rule lifts the icon 3px to suit its 20px / line-height 20px title; Phoenix's title is a different box and the icon then sat 6px above the text (measured). The icon is 20px and the
       title text 20px, so dropping it 0.15em below the baseline centres it on the text. */
    top: 0;
    vertical-align: -0.15em;
}

/* the labels above the fields: Phoenix's form label - small, bold, the secondary colour */
:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .ink-field .k-label {
    color: var(--phoenix-secondary-color);
    font-size: 0.8rem;
    font-weight: 700;
}

/* the bottom strip, in its three forms: the hand-built bar inside the content (Timesheet), the hand-built bar that script moves to the wrapper's last child (Request Leave), and Kendo's own
   action bar of a grid popup (Leave decision). !important on the grid popup's bar because the shared rule that tints it is !important. */
:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .ink-window-actionBar,
:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .ink-requestLeave-actionBar {
    background-color: var(--phoenix-body-bg); /* the same surface as the title bar and the grid header (user request 2026-10-24) */
    border-top: 1px solid var(--phoenix-border-color-translucent);
    box-shadow: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .k-window-actions {
    background-color: var(--phoenix-body-bg) !important; /* the same surface as the title bar and the grid header (user request 2026-10-24) */
    border-top: 1px solid var(--phoenix-border-color-translucent);
    box-shadow: none;
    border-radius: 0 0 0.5rem 0.5rem;
}
/* the Employment Terminate / Reinstate windows carry the form's own .form-actions bar (a tinted gradient band with a left accent and a shadow, the Save / Cancel bar of every form page) INSIDE their content. In a
   Phoenix window it becomes the same quiet strip as the others: no tint, no accent, no shadow, one hairline above. !important because the shared rule sets background, border, radius and shadow with it. */
:is(.ink-windowFormAction, #customFormAction_WrapperId, #windowId_FormPartialUpdateA, #windowId_FormPartialUpdateB).k-window.ink-phoenixWindow .form-actions {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--phoenix-border-color-translucent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 1.25rem;
    padding: 1rem 0 0;
}
/* #endregion END: Phoenix popup window */

/* #region START: Dashboard
   portal-page-payroll-dashboard.css spaces its widget rows with the Materialize row-gutter variable (--bs-gutter-x), which a Phoenix .row does not set (it sets --phoenix-gutter-x). */
.ink-dashboard-row {
    margin-bottom: var(--phoenix-gutter-x, 1.5rem);
}
/* #endregion END: Dashboard */

/* #region START: Employee tab pages - page title, tab strip
   The title is an h4 (1.25rem) that holds the initials disc, the employee switcher and the status pill. The pill lived in a 13px card header before; here it would inherit the
   heading's size, so it is restated, and it sits beside the name instead of floating to the far edge of a card header. */
.ink-phoenix-pageTitle .page-status-badge,
.ink-phoenix-pageTitle .ink-employeeSwitcher + .page-status-badge {
    /* float: none !important; the partial's markup wears float-end, an !important utility */
    margin-left: 1rem;
    margin-top: 0;
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: middle;
}

/* the status pill's icon (not its word) sits 1px lower (user request 2026-10-28) */
.ink-phoenix-pageTitle .page-status-badge i.ri {
    position: relative;
    top: 1px;
}

.ink-phoenix-pageTitle .ink-phoenix-pageAvatar {
    vertical-align: middle;
}

/* Avatar ring (tracker issue 39): a 2px primary ring with a thin light gap between the ring and the pale disc, as in the issue's sample. Set with border + inset box-shadow so the disc keeps its size. */
.ink-phoenix-pageTitle .ink-phoenix-pageAvatar .avatar-name {
    border: 1px solid var(--phoenix-primary, #2c7be5);
    box-shadow: inset 0 0 0 2px var(--phoenix-body-bg, #ffffff);
}

/* WHY: a heading disc painted in a role tone (the Employee List's colour) is a SOLID disc like the list's, so it drops the ring and the gap; the tone classes in portal-custom.css give the fill and the white letters */
.ink-phoenix-pageTitle .ink-phoenix-pageAvatar .avatar-name[class*="ink-securityRoleBadge--"] {
    border: 0;
    box-shadow: none;
}

/* an ARCHIVED role: the ARCHIVE badge's own tokens - pale amber fill, amber border, dark amber letters (same look as badge-phoenix-warning) */
.ink-phoenix-pageTitle .ink-phoenix-pageAvatar .avatar-name.ink-avatarArchived {
    background-color: var(--phoenix-warning-bg-subtle);
    color: var(--phoenix-warning-text-emphasis);
    border: 1px solid var(--phoenix-warning-border-subtle);
    box-shadow: none;
}

/* an ACTIVE employee whose USER (role) is archived: the same light pink as the lists' disc */
.ink-phoenix-pageTitle .ink-phoenix-pageAvatar .avatar-name.ink-avatarUserArchived {
    background-color: var(--phoenix-danger-bg-subtle);
    color: var(--phoenix-danger-text-emphasis);
    border: 1px solid var(--phoenix-danger-border-subtle);
    box-shadow: none;
}

/* nine tabs never wrap: the strip scrolls sideways on a phone (the markup carries overflow-x-auto) and each tab keeps its own width */
.ink-phoenix-tabs .nav-item {
    white-space: nowrap;
    padding-left: 0; /* no gap between tabs on any strip (user request 2026-10-25): the grey hover and the blue open-tab tint of neighbours now touch; each tab keeps its own 10px side padding (.ink-tabs01 .nav-link), so the words stay apart */
}

/* bold tab words on both page-level strips, Employee and Company (user request 2026-10-24); checked live: all nine Employee tabs at 700 still fit without scrolling at 1920px */
.ink-phoenix-tabs .nav-link {
    font-weight: 700;
}

.ink-phoenix-tabs .nav-link.active {
    font-weight: 800; /* the open tab one step heavier (user request 2026-10-24) */
}

/* Tabs 01 look (tracker issue 38, colorlib bootstrap/tabs-01): flat muted tabs on one hairline, hover tint, the open tab in ink colour with a 2px rounded accent line sitting ON the hairline.
   Worn by the Employee strip and (user request 2026-10-25) the Company strip (ink-tabs01). */
.nav-underline.ink-tabs01 {
    gap: 0px;
    /* border-bottom: 1px solid var(--phoenix-border-color, #e5e7ef); */
}
    .nav-underline.ink-tabs01 .nav-link {
        padding: 4px 10px 2px 10px; /* was 14px 12px 15px: too much empty vertical space around the tab text (user request 2026-10-24) */
        margin-bottom: -1px; /* the accent line covers the hairline instead of stacking above it */
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 8px 8px 0 0;
        background: none;
        color: var(--phoenix-secondary-color, #5b6475);
        font-size: 0.9375rem; /* the reference's 15px; Phoenix's nav link is smaller */
        font-weight: 700; /* bold tabs, open and closed alike so a tab does not change width when it opens (user request 2026-10-24) */
    }
.nav-underline.ink-tabs01 .nav-link:hover {
    color: var(--phoenix-body-color, #0f172a);
    background: rgba(15, 23, 42, 0.04); /* the reference's #f7f8fb tint; Phoenix's own tertiary-bg is darker */
}
/* portal-custom.css ".nav .nav-link:not(.active):hover" is !important (4px black line, black text); only another !important beats it */
.nav-underline.ink-tabs01 .nav-link:not(.active):hover {
    border-bottom: 2px solid #000000 !important;
    color: var(--phoenix-body-color, #0f172a) !important;
}
.nav-underline.ink-tabs01 .nav-link.active {
    color: var(--phoenix-primary, #4f46e5); /* the open tab must be told apart at a glance: accent text, accent tint, a 3px accent line */
    background: rgba(56, 116, 255, 0.08);
    border-bottom: 3px solid var(--phoenix-primary, #4f46e5);
    border-radius: 8px 8px 0 0;
    font-weight: 800; /* the OPEN tab one step heavier than the others (700) so it reads as selected (user request 2026-10-24); the Company strip gets the same through the rule beside the bold-tabs one above */
}
/* a hovered tab reads as heavy as the open one (user request 2026-10-24, "on hover too"). Written after the Employee strip's own 700 rule so it wins at equal specificity. */
.ink-phoenix-tabs .nav-link:hover,
.nav-underline.ink-tabs01 .nav-link:hover {
    font-weight: 800;
}
/* NO FLICKER (user request 2026-10-24, "avoid flicker in tabs on hover"): an 800-weight word is wider than a 700 one, so the neighbours moved while the pointer crossed the strip. Each tab word is wrapped in
   .ink-tabText with its own text in data-text; the hidden copy below, set at 800, is as wide as the word can ever get, so the tab keeps ONE width whatever its weight. The copy is zero high, invisible and
   ignores the pointer, and a block pseudo-element inside an inline-block needs no flex. */
.ink-tabText {
    display: inline-block;
}

.ink-tabText::after {
    content: attr(data-text);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    font-weight: 800;
}
/* #endregion END: Employee tab pages - page title, tab strip */


/* --- Phoenix --- */
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active {
    border: 1px solid var(--phoenix-navbar-vertical-link-active-color);
}

.accordion-item {
    margin: 0 0 30px 0;
    border-bottom: none !important;
}

#accordionAudit .accordion-button {
     padding: 10px 10px 10px 10px !important;
}

#accordionAudit .accordion-body {
    padding: 0px !important;
}

/* #region START: Side menu - icon in front of a sub-menu link (user request 2026-10-25, the four Reports)
   Phoenix gives only the parent item an icon; a child link is text only. The icon is sized and spaced like the parent's .nav-link-icon. */
.navbar-vertical .nav .nav-link .ink-navChildIcon {
    font-size: 1rem;
    margin-right: 0.5rem;
}
/* #endregion END: Side menu - icon in front of a sub-menu link */


/* #region START: Side menu - Remix icon in the .nav-link-icon slot (user request 2026-10-25)
   The Manage Payroll and Security items carry the SAME Remix icon as their page heading (the PageHeadingIconClassList on the page type), not a feather svg. */
.navbar-vertical .nav-link-icon .ink-navIcon {
    font-size: 1.125rem;
    line-height: 1;
}
/* #endregion END: Side menu - Remix icon in the .nav-link-icon slot */

/* #region START: Page title text next to its icon (user request 2026-10-25, "match Pay Runs text to size of icon") */
.ink-phoenix-pageTitle > i.icon-base {
    font-size: 1.35rem;
    vertical-align: middle;
}
/* #endregion END: Page title text next to its icon */

/* #region START: Company logo in the top bar (user request 2026-10-27, M00148) */
/* Replaces the small INKER icon beside the clock. The picture may be up to 148 x 62 px; the bar is slimmer than 62 px, so it is shown at most 40 px high (width follows, never more than 148 px). */
.navbar-top .navbar-logo .ink-headerLogo-image {
    display: block;
    max-width: 148px;
    max-height: 40px;
    width: auto;
    height: auto;
}
/* #endregion END: Company logo in the top bar */