:root {
    --cal-brand-blue: #1ec8ff;
    --cal-navigation-bg: #22262d;
    --cal-navigation-border: #363b44;
    --cal-filter-accent: #59339d;
}

[data-bs-theme="dark"] { --cal-filter-accent: #9671eb; }

.cal-software-link, .cal-software-link:visited, .cal-software-link:hover, .cal-software-link:focus { color: var(--cal-filter-accent); }
.cal-software-link:hover { text-decoration: underline; }
.cal-software-link:focus-visible { outline: 2px solid var(--cal-filter-accent); outline-offset: 2px; }

.cal-dev-theme-switch { width: 44px; height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: .5rem; background: transparent; }
.cal-dev-theme-switch:focus-visible { outline: 2px solid var(--cal-brand-blue); outline-offset: 2px; }
.cal-dev-theme-switch svg { width: 20px; height: 20px; }
[data-bs-theme="dark"] .cal-dev-theme-moon, [data-bs-theme="light"] .cal-dev-theme-sun { display: none; }

/* Keep the application chrome neutral in both themes. The inherited #222834
   has a visible blue cast, especially on colour-calibrated displays. */
:root [data-navbar-appearance=darker],
[data-bs-theme=light] [data-navbar-appearance=darker],
[data-bs-theme=dark] [data-navbar-appearance=darker] {
    --phoenix-navbar-top-bg-color: var(--cal-navigation-bg);
    --phoenix-navbar-top-border-color: var(--cal-navigation-border);
    --phoenix-navbar-vertical-bg-color: var(--cal-navigation-bg);
    --phoenix-navbar-vertical-border-color: var(--cal-navigation-border);
    --phoenix-navbar-vertical-collapsed-menu-bg: var(--cal-navigation-bg);
    --phoenix-navbar-footer-border-color: var(--cal-navigation-border);
}

.cal-account-nav .nav-link.active,
.cal-account-nav .nav-link:hover,
.cal-account-nav .nav-link:focus-visible {
    color: var(--cal-brand-blue);
}

/* Page titles keep the platform typography, with a consistent italic treatment. */
.cal-page-title {
    font-style: italic;
}

.cal-role-super-admin {
    background-color: var(--cal-brand-blue);
    color: #000;
}

/* Status, risk, workflow and account badges share one display-casing contract.
   Stored values and accessible source text remain unchanged. */
.badge { text-transform: uppercase; }

/* Dashboard drill-through uses a native link stretched across its existing card.
   Semantic metric colours and the approved card geometry remain unchanged. */
.cal-dashboard-stat-link { color: inherit; text-decoration: none; }
.cal-dashboard-stat-link:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.cal-dashboard-stat-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.cal-dashboard-stat-link:focus-visible { outline: none; }
.cal-dashboard-stat-link:focus-visible::after { outline: 2px solid var(--cal-brand-blue); outline-offset: -2px; }

/* A record action owns its cell, not only the small icon. Keep native links,
   table-cell layout and row geometry; no delegated whole-row navigation. */
.table td:has(> .cal-grid-action),
.table td:has(> .cal-grid-action-group) { position: relative; min-width: 44px; }
/* Action headings and icons share an exact centre line, including grids with
   asymmetric first/last-cell utility padding. Other headings keep their alignment. */
.table th.cal-grid-action-heading,
.table td:has(> .cal-grid-action),
.table td:has(> .cal-grid-action-group) {
    text-align: center !important; padding-inline: .5rem !important;
}
.table .cal-grid-action {
    display: flex; align-items: center; justify-content: center; width: 100%;
    min-height: 1lh; padding: 0; color: var(--phoenix-tertiary-color);
    text-decoration: none; background: transparent;
}
.table .cal-grid-action::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.table .cal-grid-action:hover { color: var(--cal-brand-blue); }
.table .cal-grid-action:focus-visible { outline: none; }
.table .cal-grid-action:focus-visible::after { outline: 2px solid var(--cal-brand-blue); outline-offset: -2px; }
/* Multiple actions split the available space without overlapping each other. */
.table .cal-grid-action-group { display: flex; align-items: stretch; }
.table .cal-grid-action-group > a {
    position: relative; flex: 1 1 auto; min-width: 44px; min-height: 1lh;
    display: flex; align-items: center; justify-content: center; padding: 0 .5rem;
}

/* Pager arrows are navigation, not disabled form buttons. Both grid engines share
   the same transparent 44px target without changing the selected page marker. */
.cal-grid-page-mover,
.dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    padding: 0; margin: 0; border: 0; border-radius: .35rem;
    background: transparent; box-shadow: none; color: var(--phoenix-tertiary-color);
    cursor: pointer; flex-shrink: 0;
}
.cal-grid-page-mover:hover:not(:disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next):hover:not(.disabled) {
    background: color-mix(in srgb, var(--cal-brand-blue) 12%, transparent);
    color: var(--phoenix-emphasis-color); box-shadow: none;
}
.cal-grid-page-mover:focus-visible,
.dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next):focus-visible {
    outline: 2px solid var(--cal-brand-blue); outline-offset: 2px;
}
.cal-grid-page-mover:disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next).disabled {
    background: transparent; border-color: transparent; box-shadow: none;
    color: var(--phoenix-tertiary-color); opacity: .45; cursor: default;
}
.dataTables_wrapper .dataTables_paginate.pagination { align-items: center; gap: .5rem; }

.dataTables_paginate.pagination {
    --phoenix-pagination-active-bg: var(--cal-brand-blue);
    --phoenix-pagination-active-border-color: var(--cal-brand-blue);
    --phoenix-pagination-active-color: #000;
}

/* Shared grid rows: a cyan wash plus a leading accent, without recolouring data. */
.table.table-hover {
    --phoenix-table-hover-bg: rgba(30, 200, 255, 0.12);
    --cal-grid-leading-inset: .5rem;
}

/* Override the inherited zero first-cell padding. Reserve space in every state,
   including headings, so the leading highlight never obscures or shifts text. */
.table.table-hover > :is(thead, tbody, tfoot) > tr > :first-child {
    padding-left: var(--cal-grid-leading-inset);
}

/* Older Bootstrap's last-row currentColor border follows each cell's text colour.
   Keep body dividers continuous and neutral, including above a table footer. */
.table.table-hover > tbody > tr:last-child > :is(td, th) {
    border-bottom-color: var(--phoenix-table-border-color);
}

.table.table-hover > tbody > tr:focus-within > * {
    --phoenix-table-color-state: var(--phoenix-table-hover-color);
    --phoenix-table-bg-state: var(--phoenix-table-hover-bg);
}

.table.table-hover > tbody > tr:is(:hover, :focus-within) > :first-child {
    box-shadow: inset 3px 0 0 var(--cal-brand-blue),
        inset 0 0 0 9999px var(--phoenix-table-hover-bg);
}

/* Preserve the original logo silhouette on every application and account page. */
.cal-brand-logo {
    display: inline-block;
    width: 160px;
    aspect-ratio: 300 / 48;
    vertical-align: middle;
    background-color: var(--cal-brand-blue);
    -webkit-mask: url("../img/brand/cal-dark.png") center / contain no-repeat;
    mask: url("../img/brand/cal-dark.png") center / contain no-repeat;
}

.cal-brand-logo-auth {
    width: 300px;
    max-width: 100%;
}

/* Equal outer breathing room above the logo and below the final action/message. */
.cal-auth-card > .card-body {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.cal-auth-card .auth-form-box > form,
.cal-auth-card .auth-form-box > .text-center > p:last-child {
    margin-bottom: 0;
}

/* Shared CAL action treatment in dark mode; preserve light mode and sizing. */
.btn-cal-signin,
[data-bs-theme=dark] .btn:is(.btn-cal-signin, .btn-primary, .btn-phoenix-primary, .btn-outline-primary, .btn-subtle-primary) {
    --phoenix-btn-color: var(--cal-brand-blue);
    --phoenix-btn-bg: #0f111a;
    --phoenix-btn-border-color: var(--cal-brand-blue);
    --phoenix-btn-hover-color: var(--cal-brand-blue);
    --phoenix-btn-hover-bg: #172331;
    --phoenix-btn-hover-border-color: var(--cal-brand-blue);
    --phoenix-btn-focus-shadow-rgb: 30, 200, 255;
    --phoenix-btn-active-color: var(--cal-brand-blue);
    --phoenix-btn-active-bg: #1b2c3c;
    --phoenix-btn-active-border-color: var(--cal-brand-blue);
    --phoenix-btn-disabled-color: var(--cal-brand-blue);
    --phoenix-btn-disabled-bg: #0f111a;
    --phoenix-btn-disabled-border-color: var(--cal-brand-blue);
}

.btn-cal-signin:focus-visible,
[data-bs-theme=dark] .btn:is(.btn-primary, .btn-phoenix-primary, .btn-outline-primary, .btn-subtle-primary):focus-visible {
    outline: 2px solid var(--cal-brand-blue);
    outline-offset: 3px;
}