/**
 * TECFINITY Branding and Theme for GLPI 11.0.x.
 * Palette from the supplied TECFINITY Brand Guidelines:
 * Navy #292f42, Blue #3bb4e8, Pink #ec2b86, Purple #996bb4.
 *
 * Design goals for 1.4.0:
 * - conservative corporate styling instead of recoloring every element
 * - readable sidebar submenus in both modes
 * - transparent, tightly cropped logos
 * - stable light default so GLPI styling does not flash during navigation
 * - targeted dark mode fixes for tables, forms, overlays and ITIL screens
 */

:root {
    --tfy-navy: #292f42;
    --tfy-blue: #3bb4e8;
    --tfy-pink: #ec2b86;
    --tfy-purple: #996bb4;

    /* Fixed TECFINITY brand gradient. It is intentionally independent of
       GLPI user colours, profile colours and the selected light/dark mode. */
    --tfy-brand-gradient: linear-gradient(90deg, #3bb4e8 0%, #996bb4 55%, #ec2b86 100%);
    --tfy-pink-hover: #cf1f72;
    --tfy-pink-active: #b91c65;
    --tfy-blue-hover: #269dcc;

    --tfy-page-bg: #f4f7fb;
    --tfy-surface: #ffffff;
    --tfy-surface-2: #f8fafd;
    --tfy-surface-3: #eef3f8;
    --tfy-row-alt: #f7f9fc;
    --tfy-text: #292f42;
    --tfy-muted: #687287;
    --tfy-soft: #8a94a8;
    --tfy-border: #dce3ed;
    --tfy-border-strong: #c8d2df;
    --tfy-sidebar: #292f42;
    --tfy-sidebar-deep: #222839;
    --tfy-sidebar-text: #e9edf5;
    --tfy-sidebar-muted: #c5cddd;
    --tfy-sidebar-hover: rgba(255, 255, 255, 0.07);
    --tfy-sidebar-active: rgba(236, 43, 134, 0.14);
    --tfy-focus: rgba(59, 180, 232, 0.24);
    --tfy-overlay: rgba(20, 25, 38, 0.42);
    --tfy-success: #2f9e68;
    --tfy-warning: #d99018;
    --tfy-danger: #d9475c;
    --tfy-shadow-sm: 0 1px 2px rgba(41, 47, 66, 0.05), 0 8px 24px rgba(41, 47, 66, 0.05);
    --tfy-shadow-md: 0 18px 50px rgba(41, 47, 66, 0.14);
    --tfy-radius-sm: 0.4rem;
    --tfy-radius: 0.65rem;
    --tfy-radius-lg: 0.9rem;

    --tfy-logo-color: url("../assets/logo-color-v131.svg");
    --tfy-logo-white: url("../assets/logo-white-v131.svg");
    --tfy-icon-color: url("../assets/icon-color-v131.svg");
    --tfy-icon-white: url("../assets/icon-white-v131.svg");

    /* GLPI palette variables, where supported by the current screen. */
    --glpi-logo-light: var(--tfy-logo-white);
    --glpi-logo-light-reduced: var(--tfy-icon-color);
    --glpi-logo-dark: var(--tfy-logo-white);
    --glpi-logo-dark-reduced: var(--tfy-icon-color);
    --glpi-logo-dark-login: var(--tfy-logo-color);
    --glpi-logo-light-login: var(--tfy-logo-white);

    --bs-primary: #ec2b86;
    --bs-primary-rgb: 236, 43, 134;
    --bs-info: #3bb4e8;
    --bs-info-rgb: 59, 180, 232;
    --bs-body-bg: var(--tfy-page-bg);
    --bs-body-color: var(--tfy-text);
    --bs-border-color: var(--tfy-border);
    --bs-link-color: #168cbc;
    --bs-link-hover-color: #0f6f96;

    --tblr-primary: #ec2b86;
    --tblr-primary-rgb: 236, 43, 134;
    --tblr-info: #3bb4e8;
    --tblr-info-rgb: 59, 180, 232;
    --tblr-body-bg: var(--tfy-page-bg);
    --tblr-body-color: var(--tfy-text);
    --tblr-bg-surface: var(--tfy-surface);
    --tblr-border-color: var(--tfy-border);
    --tblr-link-color: #168cbc;
    --tblr-link-hover-color: #0f6f96;

    color-scheme: light;
}

html[data-tfy-theme="dark"],
html[data-bs-theme="dark"] {
    --tfy-page-bg: #0f1420;
    --tfy-surface: #1a2232;
    --tfy-surface-2: #202a3c;
    --tfy-surface-3: #283348;
    --tfy-row-alt: #1e2839;
    --tfy-text: #eef2f8;
    --tfy-muted: #b2bbcb;
    --tfy-soft: #8f9ab0;
    --tfy-border: #354158;
    --tfy-border-strong: #48556e;
    --tfy-sidebar: #0c111b;
    --tfy-sidebar-deep: #090d15;
    --tfy-sidebar-text: #edf1f7;
    --tfy-sidebar-muted: #b8c1d0;
    --tfy-sidebar-hover: rgba(255, 255, 255, 0.07);
    --tfy-sidebar-active: rgba(236, 43, 134, 0.16);
    --tfy-focus: rgba(59, 180, 232, 0.25);
    --tfy-overlay: rgba(0, 0, 0, 0.62);
    --tfy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.20);
    --tfy-shadow-md: 0 22px 58px rgba(0, 0, 0, 0.36);

    --bs-body-bg: var(--tfy-page-bg);
    --bs-body-color: var(--tfy-text);
    --bs-border-color: var(--tfy-border);
    --bs-link-color: #63c8f1;
    --bs-link-hover-color: #92dcf8;

    --tblr-body-bg: var(--tfy-page-bg);
    --tblr-body-color: var(--tfy-text);
    --tblr-bg-surface: var(--tfy-surface);
    --tblr-border-color: var(--tfy-border);
    --tblr-link-color: #63c8f1;
    --tblr-link-hover-color: #92dcf8;

    color-scheme: dark;
}

html.tfy-theme-booting *,
html.tfy-theme-booting *::before,
html.tfy-theme-booting *::after {
    transition: none !important;
    animation: none !important;
}

body,
.page,
.page-wrapper,
.page-body,
.main-content,
#page-content {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-page-bg) !important;
}

::selection {
    color: #ffffff;
    background: var(--tfy-pink);
}

/* -------------------------------------------------------------------------
   Logos: original transparent TECFINITY SVG artwork, tightly cropped
   ------------------------------------------------------------------------- */

.navbar-vertical .navbar-brand {
    min-height: 82px !important;
    padding: 0.65rem 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.navbar-vertical .navbar-brand .glpi-logo,
.navbar-vertical .navbar-brand .tfy-brand-logo-authenticated {
    display: block !important;
    width: 190px !important;
    height: 52px !important;
    max-width: calc(100% - 8px) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background-color: transparent !important;
    background-image: var(--tfy-logo-white) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.navbar-vertical .navbar-brand img.tfy-brand-logo-authenticated,
.navbar-vertical .navbar-brand img.glpi-logo {
    width: 190px !important;
    height: 52px !important;
    object-fit: contain !important;
    background: transparent !important;
}

.navbar-vertical.navbar-collapsed .navbar-brand .glpi-logo,
.navbar-vertical-collapsed .navbar-brand .glpi-logo,
body.navbar-collapsed .navbar-vertical .navbar-brand .glpi-logo,
.navbar-vertical .navbar-brand .tfy-brand-logo-reduced {
    width: 54px !important;
    height: 46px !important;
    background-image: var(--tfy-icon-white) !important;
}

.navbar-vertical.navbar-collapsed .navbar-brand img,
.navbar-vertical-collapsed .navbar-brand img,
body.navbar-collapsed .navbar-vertical .navbar-brand img,
.navbar-vertical .navbar-brand img.tfy-brand-logo-reduced {
    width: 54px !important;
    height: 46px !important;
    object-fit: contain !important;
    background: transparent !important;
}

.page-anonymous .glpi-logo,
.page-anonymous .tfy-brand-logo-anonymous {
    display: block !important;
    width: min(380px, 82vw) !important;
    height: 92px !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 1rem !important;
    background-color: transparent !important;
    background-image: var(--tfy-logo-color) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.page-anonymous img.tfy-brand-logo-anonymous,
.page-anonymous img.glpi-logo {
    width: min(380px, 82vw) !important;
    height: 92px !important;
    object-fit: contain !important;
    background: transparent !important;
}

html[data-tfy-theme="dark"] .page-anonymous .glpi-logo,
html[data-tfy-theme="dark"] .page-anonymous .tfy-brand-logo-anonymous {
    background-image: var(--tfy-logo-white) !important;
}

/* -------------------------------------------------------------------------
   Sidebar: always navy and deliberately low-saturation
   ------------------------------------------------------------------------- */

.navbar-vertical,
aside.navbar-vertical,
.navbar.navbar-vertical {
    color: var(--tfy-sidebar-text) !important;
    background: var(--tfy-sidebar) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 6px 0 24px rgba(18, 22, 34, 0.08);
}

.navbar-vertical .navbar-collapse,
.navbar-vertical .navbar-nav,
.navbar-vertical .nav,
.navbar-vertical .dropdown-menu,
.navbar-vertical .collapse,
.navbar-vertical .collapsing {
    color: var(--tfy-sidebar-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.navbar-vertical .nav-link,
.navbar-vertical .dropdown-item,
.navbar-vertical .nav-link-title,
.navbar-vertical .nav-link-icon,
.navbar-vertical .dropdown-toggle,
.navbar-vertical .menu-label,
.navbar-vertical .submenu-item {
    color: var(--tfy-sidebar-muted) !important;
}

.navbar-vertical .nav-link,
.navbar-vertical .dropdown-item {
    margin: 0.08rem 0.45rem !important;
    border-radius: 0.35rem !important;
}

.navbar-vertical .dropdown-menu .dropdown-item,
.navbar-vertical .nav-item .nav-link {
    background-color: transparent !important;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus,
.navbar-vertical .dropdown-item:hover,
.navbar-vertical .dropdown-item:focus {
    color: #ffffff !important;
    background: var(--tfy-sidebar-hover) !important;
}

.navbar-vertical .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .dropdown-item.active,
.navbar-vertical .show > .nav-link,
.navbar-vertical [aria-current="page"] {
    color: #ffffff !important;
    background: var(--tfy-sidebar-active) !important;
    box-shadow: inset 3px 0 0 var(--tfy-pink) !important;
}

.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon,
.navbar-vertical .dropdown-item.active i {
    color: var(--tfy-blue) !important;
}

.navbar-vertical .dropdown-menu .dropdown-item.active,
.navbar-vertical .dropdown-menu .dropdown-item:hover {
    color: #ffffff !important;
}

.navbar-vertical .nav-link .badge,
.navbar-vertical .dropdown-item .badge {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

/* -------------------------------------------------------------------------
   Header and navigation
   ------------------------------------------------------------------------- */

.page-wrapper > .navbar,
header.navbar,
.navbar-horizontal,
.navbar-expand-md:not(.navbar-vertical) {
    position: relative;
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
    box-shadow: 0 1px 0 var(--tfy-border) !important;
}

/* Brandbook-locked header accent. The same fixed TECFINITY gradient is used
   for every user and in both themes. */
.page-wrapper > .navbar::after,
header.navbar::after,
.navbar-horizontal::after,
.navbar-expand-md:not(.navbar-vertical)::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 3;
    height: 2px;
    content: "";
    pointer-events: none;
    background: var(--tfy-brand-gradient) !important;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    color: var(--tfy-muted) !important;
}

.breadcrumb-item.active,
.breadcrumb-item a:hover {
    color: var(--tfy-blue-hover) !important;
}

/* -------------------------------------------------------------------------
   Surfaces, overlays and typography
   ------------------------------------------------------------------------- */

.page-wrapper .card,
.page-wrapper .modal-content,
.page-wrapper .offcanvas,
.page-wrapper .popover,
.page-wrapper .list-group-item,
.page-wrapper .accordion-item,
.page-wrapper .tab-content,
.page-wrapper .search-results,
.modal-content,
.offcanvas,
.popover,
.list-group-item,
.accordion-item {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
}

.page-wrapper .dropdown-menu,
.modal .dropdown-menu,
.offcanvas .dropdown-menu,
.ts-dropdown,
.select2-dropdown {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
    box-shadow: var(--tfy-shadow-md) !important;
}

.card {
    border-radius: var(--tfy-radius) !important;
    box-shadow: var(--tfy-shadow-sm);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-button {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface-2) !important;
    border-color: var(--tfy-border) !important;
}

.dropdown-item {
    color: var(--tfy-text) !important;
}

.page-wrapper .dropdown-item:hover,
.page-wrapper .dropdown-item:focus,
.modal .dropdown-item:hover,
.modal .dropdown-item:focus {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface-3) !important;
}

.page-wrapper .dropdown-item.active,
.page-wrapper .dropdown-item:active,
.modal .dropdown-item.active,
.modal .dropdown-item:active {
    color: #ffffff !important;
    background: var(--tfy-navy) !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
    background: var(--tfy-overlay) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.page-title,
.form-label,
label {
    color: var(--tfy-text) !important;
}

.text-muted,
.form-hint,
.help-block,
small {
    color: var(--tfy-muted) !important;
}

.page-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item),
.page-anonymous a:not(.btn) {
    color: var(--bs-link-color);
}

.page-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.page-anonymous a:not(.btn):hover {
    color: var(--bs-link-hover-color);
}

.text-primary {
    color: var(--tfy-pink) !important;
}

.text-info {
    color: var(--tfy-blue-hover) !important;
}

/* -------------------------------------------------------------------------
   Buttons: pink for primary actions, navy for secondary, blue for info
   ------------------------------------------------------------------------- */

.btn {
    border-radius: var(--tfy-radius-sm) !important;
    font-weight: 600;
}

.btn-primary,
.bg-primary {
    color: #ffffff !important;
    background-color: var(--tfy-pink) !important;
    border-color: var(--tfy-pink) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff !important;
    background-color: var(--tfy-pink-hover) !important;
    border-color: var(--tfy-pink-hover) !important;
    box-shadow: 0 0 0 0.2rem var(--tfy-focus) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--tfy-pink-active) !important;
    border-color: var(--tfy-pink-active) !important;
}

.btn-outline-primary {
    color: var(--tfy-pink) !important;
    background: transparent !important;
    border-color: var(--tfy-pink) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff !important;
    background: var(--tfy-pink) !important;
    border-color: var(--tfy-pink) !important;
}

.btn-secondary {
    color: #ffffff !important;
    background: var(--tfy-navy) !important;
    border-color: var(--tfy-navy) !important;
}

.btn-info {
    color: #102333 !important;
    background: var(--tfy-blue) !important;
    border-color: var(--tfy-blue) !important;
}

.btn-info:hover,
.btn-info:focus {
    background: var(--tfy-blue-hover) !important;
    border-color: var(--tfy-blue-hover) !important;
}

.btn-light,
.btn-ghost-secondary,
.btn-outline-secondary {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface-2) !important;
    border-color: var(--tfy-border) !important;
}

.btn-light:hover,
.btn-ghost-secondary:hover,
.btn-outline-secondary:hover {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface-3) !important;
    border-color: var(--tfy-border-strong) !important;
}

/* -------------------------------------------------------------------------
   Forms and dynamic selectors
   ------------------------------------------------------------------------- */

.form-control,
.form-select,
.input-group-text,
.ts-control,
.select2-selection,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--tfy-soft) !important;
}

.form-control:focus,
.form-select:focus,
.ts-control.focus,
.select2-container--focus .select2-selection,
textarea:focus,
input:focus,
select:focus {
    border-color: var(--tfy-blue) !important;
    box-shadow: 0 0 0 0.2rem var(--tfy-focus) !important;
    outline: none !important;
}

.ts-dropdown .option,
.select2-results__option {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
}

.ts-dropdown .active,
.ts-dropdown .option:hover,
.select2-results__option--highlighted {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface-3) !important;
}

.form-check-input {
    background-color: var(--tfy-surface) !important;
    border-color: var(--tfy-border-strong) !important;
}

.form-check-input:checked {
    background-color: var(--tfy-pink) !important;
    border-color: var(--tfy-pink) !important;
}

/* -------------------------------------------------------------------------
   Tables and search lists
   ------------------------------------------------------------------------- */

.table {
    --bs-table-color: var(--tfy-text);
    --bs-table-border-color: var(--tfy-border);
    --tblr-table-color: var(--tfy-text);
    --tblr-table-border-color: var(--tfy-border);
    color: var(--tfy-text) !important;
}

.table thead th,
table.tab_cadre_fixe thead th,
.search-results thead th {
    color: var(--tfy-muted) !important;
    background: var(--tfy-surface-2) !important;
    border-color: var(--tfy-border) !important;
}

.table td,
.table th,
table.tab_cadre_fixe td,
table.tab_cadre_fixe th {
    border-color: var(--tfy-border) !important;
}

.table-hover > tbody > tr:hover > *,
table.tab_cadre_fixe tbody > tr:hover > * {
    color: var(--tfy-text) !important;
    background: rgba(59, 180, 232, 0.08) !important;
}

html[data-tfy-theme="dark"] .table,
html[data-tfy-theme="dark"] .search-results .table,
html[data-tfy-theme="dark"] table.tab_cadre_fixe {
    --bs-table-bg: var(--tfy-surface);
    --bs-table-color: var(--tfy-text);
    --bs-table-striped-bg: var(--tfy-row-alt);
    --bs-table-striped-color: var(--tfy-text);
    --bs-table-hover-bg: var(--tfy-surface-3);
    --bs-table-hover-color: var(--tfy-text);
    --bs-table-active-bg: rgba(59, 180, 232, 0.14);
    --bs-table-active-color: var(--tfy-text);
    --tblr-table-bg: var(--tfy-surface);
    --tblr-table-color: var(--tfy-text);
    --tblr-table-striped-bg: var(--tfy-row-alt);
    --tblr-table-hover-bg: var(--tfy-surface-3);
}

html[data-tfy-theme="dark"] .table > :not(caption) > * > *,
html[data-tfy-theme="dark"] .search-results table tbody > tr > *,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody > tr > *,
html[data-tfy-theme="dark"] table tbody > tr.tab_bg_1 > *,
html[data-tfy-theme="dark"] table tbody > tr.tab_bg_2 > * {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
    background-image: none !important;
    border-color: var(--tfy-border) !important;
    box-shadow: none !important;
}

html[data-tfy-theme="dark"] .table > tbody > tr:nth-child(even) > *,
html[data-tfy-theme="dark"] .search-results table tbody > tr:nth-child(even) > *,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody > tr:nth-child(even) > *,
html[data-tfy-theme="dark"] table tbody > tr.tab_bg_2 > * {
    background-color: var(--tfy-row-alt) !important;
}

html[data-tfy-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-tfy-theme="dark"] .search-results table tbody > tr:hover > *,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody > tr:hover > * {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface-3) !important;
}

html[data-tfy-theme="dark"] .table-active > *,
html[data-tfy-theme="dark"] .table > tbody > tr.active > *,
html[data-tfy-theme="dark"] .table > tbody > tr.selected > *,
html[data-tfy-theme="dark"] .search-results table tbody > tr.active > *,
html[data-tfy-theme="dark"] .search-results table tbody > tr.selected > * {
    color: var(--tfy-text) !important;
    background-color: rgba(59, 180, 232, 0.14) !important;
}

html[data-tfy-theme="dark"] .search-results tbody a:not(.btn),
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody a:not(.btn) {
    color: #63c8f1 !important;
}

html[data-tfy-theme="dark"] .search-results tbody a:not(.btn):hover,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody a:not(.btn):hover {
    color: #9be3ff !important;
}

/* -------------------------------------------------------------------------
   Tabs, pagination and badges
   ------------------------------------------------------------------------- */

.nav-tabs {
    border-color: var(--tfy-border) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--tfy-muted) !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--tfy-blue-hover) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--tfy-pink) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) var(--tfy-border) var(--tfy-surface) !important;
    box-shadow: inset 0 -2px 0 var(--tfy-pink) !important;
}

.page-link {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
}

.page-item.active .page-link {
    color: #ffffff !important;
    background: var(--tfy-pink) !important;
    border-color: var(--tfy-pink) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    color: #ffffff !important;
    background: var(--tfy-pink) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    color: #102333 !important;
    background: var(--tfy-blue) !important;
}

.progress {
    background: var(--tfy-surface-3) !important;
}

.progress-bar {
    background: var(--tfy-pink) !important;
}

/* -------------------------------------------------------------------------
   Dashboard: one wide rainbow accent plus restrained semantic card borders
   ------------------------------------------------------------------------- */

.tfy-dashboard-branded {
    position: relative;
    isolation: isolate;
    border-radius: var(--tfy-radius);
}

/* Preserve the wide TECFINITY rainbow accent across the dashboard itself. */
.tfy-dashboard-branded::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    height: 5px;
    content: "";
    pointer-events: none;
    background: var(--tfy-brand-gradient) !important;
    border-radius: var(--tfy-radius) var(--tfy-radius) 0 0;
}

/* Only leaf dashboard cards receive a semantic accent. Container cards do not. */
.tfy-dashboard-card {
    position: relative;
    overflow: hidden;
    --tfy-card-accent: var(--tfy-blue);
    --tfy-card-tint: rgba(59, 180, 232, 0.075);
    border-color: var(--tfy-border) !important;
    border-top: 2px solid var(--tfy-card-accent) !important;
    border-radius: var(--tfy-radius) !important;
    background:
        linear-gradient(180deg, var(--tfy-card-tint) 0, rgba(255, 255, 255, 0) 42%),
        var(--tfy-surface) !important;
}

/* Remove older pseudo-element accents if cached DOM/classes survive a soft navigation. */
.tfy-dashboard-card::before {
    display: none !important;
    content: none !important;
}

.tfy-dashboard-card[data-tfy-accent="danger"] {
    --tfy-card-accent: var(--tfy-danger);
    --tfy-card-tint: rgba(217, 71, 92, 0.12);
}

.tfy-dashboard-card[data-tfy-accent="warning"] {
    --tfy-card-accent: var(--tfy-warning);
    --tfy-card-tint: rgba(217, 144, 24, 0.11);
}

.tfy-dashboard-card[data-tfy-accent="success"] {
    --tfy-card-accent: var(--tfy-success);
    --tfy-card-tint: rgba(47, 158, 104, 0.10);
}

.tfy-dashboard-card[data-tfy-accent="pink"] {
    --tfy-card-accent: var(--tfy-pink);
    --tfy-card-tint: rgba(236, 43, 134, 0.085);
}

.tfy-dashboard-card[data-tfy-accent="purple"] {
    --tfy-card-accent: var(--tfy-purple);
    --tfy-card-tint: rgba(153, 107, 180, 0.10);
}

.tfy-dashboard-card[data-tfy-accent="teal"] {
    --tfy-card-accent: #4aa99b;
    --tfy-card-tint: rgba(74, 169, 155, 0.10);
}

.tfy-dashboard-card[data-tfy-accent="blue"] {
    --tfy-card-accent: var(--tfy-blue);
    --tfy-card-tint: rgba(59, 180, 232, 0.09);
}

.tfy-dashboard-card[data-tfy-accent="danger"] .card-title,
.tfy-dashboard-card[data-tfy-accent="danger"] .display-1,
.tfy-dashboard-card[data-tfy-accent="danger"] .display-2,
.tfy-dashboard-card[data-tfy-accent="danger"] .display-3 {
    color: var(--tfy-danger) !important;
}

.tfy-dashboard-card[data-tfy-accent="warning"] .card-title,
.tfy-dashboard-card[data-tfy-accent="warning"] .display-1,
.tfy-dashboard-card[data-tfy-accent="warning"] .display-2,
.tfy-dashboard-card[data-tfy-accent="warning"] .display-3 {
    color: #ad6c09 !important;
}

.tfy-dashboard-card .card-title,
.tfy-dashboard-card .display-1,
.tfy-dashboard-card .display-2,
.tfy-dashboard-card .display-3 {
    color: var(--tfy-navy) !important;
}

html[data-tfy-theme="dark"] .tfy-dashboard-card {
    background:
        linear-gradient(180deg, var(--tfy-card-tint) 0, rgba(15, 20, 32, 0) 46%),
        var(--tfy-surface) !important;
}

html[data-tfy-theme="dark"] .tfy-dashboard-card .card-title,
html[data-tfy-theme="dark"] .tfy-dashboard-card .display-1,
html[data-tfy-theme="dark"] .tfy-dashboard-card .display-2,
html[data-tfy-theme="dark"] .tfy-dashboard-card .display-3 {
    color: var(--tfy-text) !important;
}

html[data-tfy-theme="dark"] .tfy-dashboard-card[data-tfy-accent="danger"] .card-title,
html[data-tfy-theme="dark"] .tfy-dashboard-card[data-tfy-accent="danger"] .display-1,
html[data-tfy-theme="dark"] .tfy-dashboard-card[data-tfy-accent="danger"] .display-2,
html[data-tfy-theme="dark"] .tfy-dashboard-card[data-tfy-accent="danger"] .display-3 {
    color: #ff8798 !important;
}

/* GLPI's dashboard-only night-mode control is redundant with our global switch. */
.tfy-hide-native-dashboard-theme,
.dashboard .night-mode,
#dashboard .night-mode {
    display: none !important;
}

/* -------------------------------------------------------------------------
   ITIL/ticket screens and dark mode compatibility helpers
   ------------------------------------------------------------------------- */

.itil-object,
.timeline-item,
.timeline-content,
.timeline-body,
.actor_entry,
.itil-form,
.itil-right-panel,
.itil-footer,
.item-main-form,
.item-main-form .card,
.form-page,
.form-page .card {
    border-color: var(--tfy-border) !important;
}

html[data-tfy-theme="dark"] .bg-white,
html[data-tfy-theme="dark"] .bg-light,
html[data-tfy-theme="dark"] .bg-body,
html[data-tfy-theme="dark"] .bg-body-secondary,
html[data-tfy-theme="dark"] .bg-body-tertiary,
html[data-tfy-theme="dark"] .text-bg-light {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
}

html[data-tfy-theme="dark"] .border,
html[data-tfy-theme="dark"] .border-top,
html[data-tfy-theme="dark"] .border-end,
html[data-tfy-theme="dark"] .border-bottom,
html[data-tfy-theme="dark"] .border-start {
    border-color: var(--tfy-border) !important;
}

html[data-tfy-theme="dark"] .alert-light,
html[data-tfy-theme="dark"] .alert-secondary {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface-2) !important;
    border-color: var(--tfy-border) !important;
}

/* -------------------------------------------------------------------------
   Login page
   ------------------------------------------------------------------------- */

.page-anonymous {
    min-height: 100vh;
    color: var(--tfy-text) !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(59, 180, 232, 0.12), transparent 32%),
        radial-gradient(circle at 84% 16%, rgba(236, 43, 134, 0.08), transparent 32%),
        var(--tfy-page-bg) !important;
}

html[data-tfy-theme="dark"] .page-anonymous {
    background:
        radial-gradient(circle at 15% 8%, rgba(59, 180, 232, 0.10), transparent 30%),
        radial-gradient(circle at 86% 14%, rgba(236, 43, 134, 0.08), transparent 32%),
        var(--tfy-page-bg) !important;
}

.page-anonymous .card,
.page-anonymous .login-card {
    overflow: hidden;
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border: 1px solid var(--tfy-border) !important;
    border-radius: var(--tfy-radius-lg) !important;
    box-shadow: var(--tfy-shadow-md) !important;
}

.page-anonymous .card::before,
.page-anonymous .login-card::before {
    display: block;
    width: 100%;
    height: 3px;
    content: "";
    background: var(--tfy-brand-gradient) !important;
}

.page-anonymous .card-header,
.page-anonymous .login-card .card-header {
    color: var(--tfy-text) !important;
    background: transparent !important;
    border-bottom-color: var(--tfy-border) !important;
}

.page-anonymous .btn-primary {
    background: var(--tfy-pink) !important;
    border-color: var(--tfy-pink) !important;
}

.page-anonymous footer,
.page-anonymous .copyright,
.page-anonymous [class*="copyright"] {
    color: var(--tfy-muted) !important;
}


/* -------------------------------------------------------------------------
   Header tools host shared by Branding + Time Billing
   ------------------------------------------------------------------------- */

.tfy-header-tools {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 0 0 auto;
    margin: 0 0.65rem 0 0;
}

header.navbar .tfy-header-tools,
.page-header .tfy-header-tools {
    min-height: 38px;
}

@media (max-width: 1179.98px) {
    .tfy-header-tools {
        margin-right: 0.35rem;
    }
}

/* -------------------------------------------------------------------------
   Theme toggle
   ------------------------------------------------------------------------- */

#tfy-theme-toggle {
    display: inline-flex;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tfy-text);
    background: var(--tfy-surface);
    border: 1px solid var(--tfy-border);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(41, 47, 66, 0.06);
    cursor: pointer;
}

#tfy-theme-toggle:hover,
#tfy-theme-toggle:focus-visible {
    color: var(--tfy-pink);
    border-color: var(--tfy-pink);
    box-shadow: 0 0 0 0.2rem var(--tfy-focus);
    outline: none;
}

#tfy-theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

#tfy-theme-toggle.tfy-theme-toggle-floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
}

#tfy-theme-toggle.tfy-theme-toggle-docked {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(41, 47, 66, 0.08) !important;
}

/* -------------------------------------------------------------------------
   Small refinements
   ------------------------------------------------------------------------- */

hr {
    border-color: var(--tfy-border) !important;
    opacity: 1;
}

code {
    color: var(--tfy-pink);
    background: var(--tfy-surface-3);
    border-radius: 0.3rem;
}

.tooltip-inner {
    color: #ffffff;
    background: var(--tfy-navy);
}

.toast {
    color: var(--tfy-text);
    background: var(--tfy-surface);
    border-color: var(--tfy-border);
}

@media (max-width: 991.98px) {
    .navbar-vertical .navbar-brand .glpi-logo,
    .navbar-vertical .navbar-brand img {
        width: 145px !important;
        height: 44px !important;
    }

    .page-anonymous .glpi-logo,
    .page-anonymous .tfy-brand-logo-anonymous {
        width: min(290px, 78vw) !important;
        height: 68px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* 1.3.2: keep page transitions subtle while the theme variables switch. */
html.tfy-theme-changing body,
html.tfy-theme-changing .page,
html.tfy-theme-changing .page-wrapper,
html.tfy-theme-changing .page-body,
html.tfy-theme-changing .card,
html.tfy-theme-changing .table > :not(caption) > * > *,
html.tfy-theme-changing .navbar-vertical {
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
}


/* ========================================================================
   TECFINITY final refinement layer - 1.4.0
   ======================================================================== */

:root {
    --tfy-entity-bg: rgba(59, 180, 232, 0.08);
    --tfy-entity-border: rgba(59, 180, 232, 0.24);
    --tfy-entity-text: #176f96;
}

html[data-tfy-theme="dark"] {
    --tfy-entity-bg: #162235;
    --tfy-entity-border: #354865;
    --tfy-entity-text: #b9dff0;
}

/* Keep the long brand accent thin and behind controls, never on top of them. */
.tfy-dashboard-branded::before {
    z-index: 0 !important;
    height: 2px !important;
    border-radius: var(--tfy-radius) var(--tfy-radius) 0 0 !important;
}

.tfy-dashboard-branded > * {
    position: relative;
    z-index: 1;
}

.tfy-dashboard-branded button,
.tfy-dashboard-branded .btn,
.tfy-dashboard-branded .btn-group,
.tfy-dashboard-branded .dashboard-actions {
    position: relative;
    z-index: 2;
}

/* Modern semantic card bars, independent from the long rainbow line. */
.tfy-dashboard-card,
.tfy-kpi-card {
    position: relative !important;
    overflow: hidden !important;
    border-top: 0 !important;
    border-radius: var(--tfy-radius) !important;
    --tfy-card-accent: var(--tfy-blue);
    --tfy-card-tint: rgba(59, 180, 232, 0.075);
    background:
        linear-gradient(180deg, var(--tfy-card-tint) 0, transparent 38%),
        var(--tfy-surface) !important;
}

.tfy-dashboard-card::before,
.tfy-kpi-card::before {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 3 !important;
    display: block !important;
    height: 3px !important;
    content: "" !important;
    pointer-events: none !important;
    background: var(--tfy-card-accent) !important;
    border-radius: var(--tfy-radius) var(--tfy-radius) 0 0 !important;
}

.tfy-dashboard-card[data-tfy-accent="danger"],
.tfy-kpi-card[data-tfy-accent="danger"] {
    --tfy-card-accent: #ef4762;
    --tfy-card-tint: rgba(239, 71, 98, 0.10);
}

.tfy-dashboard-card[data-tfy-accent="warning"],
.tfy-kpi-card[data-tfy-accent="warning"] {
    --tfy-card-accent: #f59f24;
    --tfy-card-tint: rgba(245, 159, 36, 0.10);
}

.tfy-dashboard-card[data-tfy-accent="success"],
.tfy-kpi-card[data-tfy-accent="success"] {
    --tfy-card-accent: #43a66d;
    --tfy-card-tint: rgba(67, 166, 109, 0.10);
}

.tfy-dashboard-card[data-tfy-accent="pink"],
.tfy-kpi-card[data-tfy-accent="pink"] {
    --tfy-card-accent: var(--tfy-pink);
    --tfy-card-tint: rgba(236, 43, 134, 0.08);
}

.tfy-dashboard-card[data-tfy-accent="purple"],
.tfy-kpi-card[data-tfy-accent="purple"] {
    --tfy-card-accent: var(--tfy-purple);
    --tfy-card-tint: rgba(153, 107, 180, 0.09);
}

.tfy-dashboard-card[data-tfy-accent="teal"],
.tfy-kpi-card[data-tfy-accent="teal"] {
    --tfy-card-accent: #45b7b3;
    --tfy-card-tint: rgba(69, 183, 179, 0.09);
}

.tfy-dashboard-card[data-tfy-accent="blue"],
.tfy-kpi-card[data-tfy-accent="blue"] {
    --tfy-card-accent: #3f8cff;
    --tfy-card-tint: rgba(63, 140, 255, 0.09);
}

html[data-tfy-theme="dark"] .tfy-dashboard-card,
html[data-tfy-theme="dark"] .tfy-kpi-card {
    background:
        linear-gradient(180deg, var(--tfy-card-tint) 0, rgba(15, 20, 32, 0) 44%),
        var(--tfy-surface) !important;
}

/* Entity breadcrumbs and entity selectors: compact in tables, readable in forms. */
.tfy-entity-chip {
    color: var(--tfy-entity-text) !important;
    background: var(--tfy-entity-bg) !important;
    border: 1px solid var(--tfy-entity-border) !important;
    border-radius: 0.45rem !important;
    box-shadow: none !important;
}

.tfy-entity-chip,
.tfy-entity-chip * {
    color: var(--tfy-entity-text) !important;
}

.tfy-entity-chip-table {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    padding: 0.2rem 0.48rem !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    text-align: center !important;
}

.tfy-entity-chip-form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.35rem !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.45rem 0.65rem !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

html[data-tfy-theme="dark"] .tfy-entity-chip {
    color: #b9dff0 !important;
    background: #162235 !important;
    border-color: #354865 !important;
}

html[data-tfy-theme="dark"] .tfy-entity-chip * {
    color: #b9dff0 !important;
}

/* Complete the dark-mode treatment on ITIL/ticket forms and timeline panels. */
html[data-tfy-theme="dark"] .itil-object,
html[data-tfy-theme="dark"] .itil-object .card,
html[data-tfy-theme="dark"] .itil-object .card-body,
html[data-tfy-theme="dark"] .itil-object .card-header,
html[data-tfy-theme="dark"] .itil-form,
html[data-tfy-theme="dark"] .itil-right-panel,
html[data-tfy-theme="dark"] .item-main-form,
html[data-tfy-theme="dark"] .item-main-form .card,
html[data-tfy-theme="dark"] .form-page,
html[data-tfy-theme="dark"] .timeline,
html[data-tfy-theme="dark"] .timeline-item,
html[data-tfy-theme="dark"] .timeline-content,
html[data-tfy-theme="dark"] .timeline-body,
html[data-tfy-theme="dark"] .actor_entry,
html[data-tfy-theme="dark"] .accordion-item,
html[data-tfy-theme="dark"] .accordion-button,
html[data-tfy-theme="dark"] .tab-content,
html[data-tfy-theme="dark"] fieldset {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
    background-image: none !important;
}

html[data-tfy-theme="dark"] .itil-object .card-header,
html[data-tfy-theme="dark"] .itil-right-panel .card-header,
html[data-tfy-theme="dark"] .item-main-form .card-header,
html[data-tfy-theme="dark"] .accordion-button {
    background-color: var(--tfy-surface-2) !important;
}

html[data-tfy-theme="dark"] .itil-object .form-control,
html[data-tfy-theme="dark"] .itil-object .form-select,
html[data-tfy-theme="dark"] .itil-object .input-group-text,
html[data-tfy-theme="dark"] .itil-object .ts-control,
html[data-tfy-theme="dark"] .itil-object .select2-selection,
html[data-tfy-theme="dark"] .itil-object .dropdown-toggle,
html[data-tfy-theme="dark"] .item-main-form .form-control,
html[data-tfy-theme="dark"] .item-main-form .form-select,
html[data-tfy-theme="dark"] .item-main-form .input-group-text,
html[data-tfy-theme="dark"] .item-main-form .ts-control,
html[data-tfy-theme="dark"] .item-main-form .select2-selection,
html[data-tfy-theme="dark"] .item-main-form .dropdown-toggle {
    color: var(--tfy-text) !important;
    background-color: #151f30 !important;
    border-color: #34445d !important;
    background-image: none !important;
}

html[data-tfy-theme="dark"] .itil-object .form-control:focus,
html[data-tfy-theme="dark"] .itil-object .form-select:focus,
html[data-tfy-theme="dark"] .itil-object .ts-control.focus,
html[data-tfy-theme="dark"] .item-main-form .form-control:focus,
html[data-tfy-theme="dark"] .item-main-form .form-select:focus,
html[data-tfy-theme="dark"] .item-main-form .ts-control.focus {
    border-color: var(--tfy-blue) !important;
    box-shadow: 0 0 0 0.18rem rgba(59, 180, 232, 0.18) !important;
}

.itil-object .row > [class*="col"],
.item-main-form .row > [class*="col"],
.itil-right-panel,
.itil-right-panel .card-body,
.item-main-form {
    min-width: 0 !important;
}

.itil-right-panel,
.item-main-form {
    overflow-x: visible !important;
}

/* Entity cells in dark search lists should never fall back to white GLPI pills. */
html[data-tfy-theme="dark"] .search-results td .bg-white,
html[data-tfy-theme="dark"] .search-results td .bg-light,
html[data-tfy-theme="dark"] .search-results td .badge.text-bg-light,
html[data-tfy-theme="dark"] table td .bg-white,
html[data-tfy-theme="dark"] table td .bg-light,
html[data-tfy-theme="dark"] table td .badge.text-bg-light {
    color: #b9dff0 !important;
    background-color: #162235 !important;
    border: 1px solid #354865 !important;
}

/* The switch must always sit above GLPI overlays and accept a single click. */
#tfy-theme-toggle.tfy-theme-toggle-floating {
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
}

/* ========================================================================
   TECFINITY stability and dark-mode hotfix layer - 1.4.1
   ======================================================================== */

/* Keep the dashboard rainbow line clear of the action controls. JavaScript
   measures the right-hand toolbar and supplies the required safe area. */
.tfy-dashboard-branded {
    overflow: visible !important;
}

.tfy-dashboard-branded::before {
    top: 0 !important;
    right: var(--tfy-dashboard-line-right, 12px) !important;
    left: 12px !important;
    z-index: 1 !important;
    height: 2px !important;
    border-radius: 999px !important;
}

.tfy-dashboard-branded > * {
    position: relative;
    z-index: 2;
}

/* Subtle card bars stay visible, but do not cover content or icons. */
.tfy-dashboard-card::before,
.tfy-kpi-card::before {
    right: 6px !important;
    left: 6px !important;
    z-index: 1 !important;
    height: 2px !important;
    border-radius: 0 0 999px 999px !important;
}

.tfy-dashboard-card > *,
.tfy-kpi-card > * {
    position: relative;
    z-index: 2;
}

/* Theme switch: a larger reliable hit area, isolated from GLPI overlays. */
#tfy-theme-toggle.tfy-theme-toggle-floating {
    width: 40px !important;
    height: 40px !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 2147483646 !important;
    isolation: isolate !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

#tfy-theme-toggle.tfy-theme-toggle-floating::before {
    position: absolute;
    inset: -6px;
    content: "";
}

/* TinyMCE / rich-text editor chrome in dark mode. */
html[data-tfy-theme="dark"] .tox.tox-tinymce,
html[data-tfy-theme="dark"] .tox .tox-editor-container,
html[data-tfy-theme="dark"] .tox .tox-editor-header,
html[data-tfy-theme="dark"] .tox .tox-toolbar-overlord,
html[data-tfy-theme="dark"] .tox .tox-toolbar__primary,
html[data-tfy-theme="dark"] .tox .tox-menubar,
html[data-tfy-theme="dark"] .tox .tox-statusbar,
html[data-tfy-theme="dark"] .tox .tox-sidebar-wrap,
html[data-tfy-theme="dark"] .tox .tox-edit-area,
html[data-tfy-theme="dark"] .tox .tox-edit-area__iframe {
    color: var(--tfy-text) !important;
    background: #151f30 !important;
    border-color: #34445d !important;
    box-shadow: none !important;
}

html[data-tfy-theme="dark"] .tox .tox-toolbar__group {
    border-color: #34445d !important;
}

html[data-tfy-theme="dark"] .tox .tox-tbtn,
html[data-tfy-theme="dark"] .tox .tox-mbtn,
html[data-tfy-theme="dark"] .tox .tox-statusbar__path-item,
html[data-tfy-theme="dark"] .tox .tox-statusbar__wordcount {
    color: var(--tfy-text) !important;
    background: transparent !important;
}

html[data-tfy-theme="dark"] .tox .tox-tbtn svg,
html[data-tfy-theme="dark"] .tox .tox-mbtn svg {
    fill: var(--tfy-text) !important;
}

html[data-tfy-theme="dark"] .tox .tox-tbtn:hover,
html[data-tfy-theme="dark"] .tox .tox-tbtn:focus,
html[data-tfy-theme="dark"] .tox .tox-tbtn--enabled,
html[data-tfy-theme="dark"] .tox .tox-mbtn:hover,
html[data-tfy-theme="dark"] .tox .tox-mbtn:focus {
    color: #ffffff !important;
    background: #24334a !important;
}

html[data-tfy-theme="dark"] .tox .tox-tbtn:hover svg,
html[data-tfy-theme="dark"] .tox .tox-tbtn:focus svg,
html[data-tfy-theme="dark"] .tox .tox-tbtn--enabled svg {
    fill: #ffffff !important;
}

/* CKEditor/contenteditable fallback for pages that do not use TinyMCE. */
html[data-tfy-theme="dark"] .ck.ck-editor,
html[data-tfy-theme="dark"] .ck.ck-editor__main,
html[data-tfy-theme="dark"] .ck.ck-editor__editable,
html[data-tfy-theme="dark"] [contenteditable="true"].form-control,
html[data-tfy-theme="dark"] [contenteditable="true"].rich_text {
    color: var(--tfy-text) !important;
    background: #151f30 !important;
    border-color: #34445d !important;
}

html[data-tfy-theme="dark"] .ck.ck-toolbar,
html[data-tfy-theme="dark"] .ck.ck-button {
    color: var(--tfy-text) !important;
    background: #151f30 !important;
    border-color: #34445d !important;
}

/* Remove remaining bright form/footer strips on ticket, project and change pages. */
html[data-tfy-theme="dark"] .itil-footer,
html[data-tfy-theme="dark"] #itil-footer,
html[data-tfy-theme="dark"] .item-main-form .card-footer,
html[data-tfy-theme="dark"] .form-page .card-footer,
html[data-tfy-theme="dark"] .timeline-footer,
html[data-tfy-theme="dark"] .sticky-bottom:not(.toast-container),
html[data-tfy-theme="dark"] .fixed-bottom:not(.debug-toolbar) {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
    background-image: none !important;
}

/* Project/ticket vertical-tab counters should not appear as bright white pills. */
html[data-tfy-theme="dark"] .itil-object .badge.bg-white,
html[data-tfy-theme="dark"] .itil-object .badge.bg-light,
html[data-tfy-theme="dark"] .itil-object .badge.text-bg-light,
html[data-tfy-theme="dark"] .item-main-form .badge.bg-white,
html[data-tfy-theme="dark"] .item-main-form .badge.bg-light,
html[data-tfy-theme="dark"] .item-main-form .badge.text-bg-light,
html[data-tfy-theme="dark"] .nav-tabs .badge,
html[data-tfy-theme="dark"] .list-group .badge {
    color: #c9d9ea !important;
    background: #24334a !important;
    border: 1px solid #3a4b65 !important;
}

/* Color inputs keep their actual swatch but no longer sit in a white box. */
html[data-tfy-theme="dark"] input[type="color"] {
    min-width: 44px;
    padding: 3px !important;
    background: #151f30 !important;
    border: 1px solid #34445d !important;
    border-radius: 0.45rem !important;
}

html[data-tfy-theme="dark"] input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

html[data-tfy-theme="dark"] input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 0.28rem;
}

/* Dark dropdowns and autocomplete panels used by ITIL/project forms. */
html[data-tfy-theme="dark"] .tox .tox-menu,
html[data-tfy-theme="dark"] .tox .tox-collection,
html[data-tfy-theme="dark"] .tox .tox-dialog,
html[data-tfy-theme="dark"] .tox .tox-dialog__header,
html[data-tfy-theme="dark"] .tox .tox-dialog__footer,
html[data-tfy-theme="dark"] .select2-dropdown,
html[data-tfy-theme="dark"] .ts-dropdown {
    color: var(--tfy-text) !important;
    background: #151f30 !important;
    border-color: #34445d !important;
}

html[data-tfy-theme="dark"] .tox .tox-collection__item,
html[data-tfy-theme="dark"] .select2-results__option,
html[data-tfy-theme="dark"] .ts-dropdown .option {
    color: var(--tfy-text) !important;
    background: transparent !important;
}

html[data-tfy-theme="dark"] .tox .tox-collection__item--active,
html[data-tfy-theme="dark"] .select2-results__option--highlighted,
html[data-tfy-theme="dark"] .ts-dropdown .active {
    color: #ffffff !important;
    background: #24334a !important;
}


/* ========================================================================
   TECFINITY final polish layer - 1.4.2
   ======================================================================== */

/* The dashboard-wide line is removed completely. GLPI positions its action
   buttons differently between dashboards, and a pseudo-element cannot avoid
   every toolbar reliably. The fixed 2px TECFINITY header line remains. */
.tfy-dashboard-branded::before {
    display: none !important;
    content: none !important;
}

/* Keep exactly one modern semantic accent on each actual dashboard/KPI card. */
.tfy-dashboard-card,
.tfy-kpi-card {
    border-top: 0 !important;
}

.tfy-dashboard-card::before,
.tfy-kpi-card::before {
    top: 0 !important;
    right: 7px !important;
    left: 7px !important;
    z-index: 1 !important;
    height: 2px !important;
    border-radius: 0 0 999px 999px !important;
}

/* Dashboard text and legends must stay readable in dark mode. This covers
   DOM-based legends (Chart.js plugins, ApexCharts and Highcharts); canvas
   legends are additionally updated by JavaScript. */
html[data-tfy-theme="dark"] .tfy-dashboard-card,
html[data-tfy-theme="dark"] .tfy-kpi-card,
html[data-tfy-theme="dark"] .tfy-dashboard-card .text-muted,
html[data-tfy-theme="dark"] .tfy-kpi-card .text-muted,
html[data-tfy-theme="dark"] .tfy-dashboard-card small,
html[data-tfy-theme="dark"] .tfy-kpi-card small,
html[data-tfy-theme="dark"] .chart-legend,
html[data-tfy-theme="dark"] .chartjs-legend,
html[data-tfy-theme="dark"] .apexcharts-legend-text,
html[data-tfy-theme="dark"] .highcharts-legend-item text,
html[data-tfy-theme="dark"] .highcharts-axis-labels text,
html[data-tfy-theme="dark"] .tfy-dashboard-card svg text,
html[data-tfy-theme="dark"] .tfy-kpi-card svg text {
    color: #cbd7e6 !important;
    fill: #cbd7e6 !important;
}

html[data-tfy-theme="dark"] .tfy-dashboard-card .card-title,
html[data-tfy-theme="dark"] .tfy-kpi-card .card-title,
html[data-tfy-theme="dark"] .tfy-dashboard-card h1,
html[data-tfy-theme="dark"] .tfy-dashboard-card h2,
html[data-tfy-theme="dark"] .tfy-dashboard-card h3,
html[data-tfy-theme="dark"] .tfy-kpi-card h1,
html[data-tfy-theme="dark"] .tfy-kpi-card h2,
html[data-tfy-theme="dark"] .tfy-kpi-card h3 {
    color: #eef2f8 !important;
}

/* Prevent accidental double outlines. Only the real Entity column/control is
   decorated by JavaScript; nested links and badges must not draw a second box. */
.tfy-entity-chip .tfy-entity-chip,
.tfy-entity-chip a,
.tfy-entity-chip .badge,
.tfy-entity-chip span {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.tfy-entity-chip-table {
    text-decoration: none !important;
}

/* Dark list text: preserve readable links and muted metadata without turning
   titles into outlined pills. */
html[data-tfy-theme="dark"] .search-results tbody td,
html[data-tfy-theme="dark"] .search-results tbody td span,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody td,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody td span {
    color: #d7dfeb !important;
}

html[data-tfy-theme="dark"] .search-results tbody td a:not(.btn):not(.tfy-entity-chip),
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody td a:not(.btn):not(.tfy-entity-chip) {
    color: #63c8f1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

html[data-tfy-theme="dark"] .search-results tbody td a:not(.btn):not(.tfy-entity-chip):hover,
html[data-tfy-theme="dark"] table.tab_cadre_fixe tbody td a:not(.btn):not(.tfy-entity-chip):hover {
    color: #9be3ff !important;
    text-decoration: underline !important;
}



/* ========================================================================
   TECFINITY production release polish - 1.5.0
   ======================================================================== */

/* GLPI dashboard fullscreen/embed mode inserts its own GLPI logo. Replace it
   with the correct TECFINITY artwork in both light and dark modes. */
.dashboard.fullscreen .glpi_logo,
.dashboard.embed .glpi_logo,
.dashboard.fullscreen .glpi-logo,
.dashboard.embed .glpi-logo,
.tfy-dashboard-fullscreen-logo {
    width: 235px !important;
    height: 68px !important;
    background-color: transparent !important;
    background-image: var(--tfy-logo-color) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

html[data-tfy-theme="dark"] .dashboard.fullscreen .glpi_logo,
html[data-tfy-theme="dark"] .dashboard.embed .glpi_logo,
html[data-tfy-theme="dark"] .dashboard.fullscreen .glpi-logo,
html[data-tfy-theme="dark"] .dashboard.embed .glpi-logo,
html[data-tfy-theme="dark"] .tfy-dashboard-fullscreen-logo,
.dashboard.theme-dark.fullscreen .glpi_logo,
.dashboard.theme-dark.embed .glpi_logo {
    background-image: var(--tfy-logo-white) !important;
}

/* Chartist is used by GLPI dashboard widgets. Its HTML legend labels inherit
   GLPI's original dark text colour, so explicitly set all chart labels and
   legends to a readable dark-mode palette. Colour swatches remain unchanged. */
html[data-tfy-theme="dark"] .dashboard .ct-legend,
html[data-tfy-theme="dark"] .dashboard .ct-legend li,
html[data-tfy-theme="dark"] .dashboard .ct-label,
html[data-tfy-theme="dark"] .dashboard .ct-barlabel,
html[data-tfy-theme="dark"] .dashboard .ct-axis-title,
html[data-tfy-theme="dark"] .dashboard .ct-chart text,
html[data-tfy-theme="dark"] .dashboard .ct-chart tspan,
html[data-tfy-theme="dark"] .tfy-dashboard-card .ct-legend,
html[data-tfy-theme="dark"] .tfy-dashboard-card .ct-legend li,
html[data-tfy-theme="dark"] .tfy-dashboard-card .ct-label,
html[data-tfy-theme="dark"] .tfy-dashboard-card .ct-barlabel,
html[data-tfy-theme="dark"] .tfy-dashboard-card [class*="legend" i],
html[data-tfy-theme="dark"] .tfy-dashboard-card [class*="legend" i] *,
html[data-tfy-theme="dark"] .tfy-dashboard-card [class*="label" i]:not(.badge) {
    color: #cbd7e6 !important;
    fill: #cbd7e6 !important;
    opacity: 1 !important;
}

html[data-tfy-theme="dark"] .dashboard .ct-grid {
    stroke: rgba(203, 215, 230, 0.26) !important;
}

/* Preserve stronger contrast for widget titles while keeping legends muted. */
html[data-tfy-theme="dark"] .dashboard .main-label,
html[data-tfy-theme="dark"] .tfy-dashboard-card .main-label,
html[data-tfy-theme="dark"] .tfy-dashboard-card .card-title {
    color: #eef2f8 !important;
    fill: #eef2f8 !important;
}


/* ========================================================================
   TECFINITY header docking + dark-navigation fallback - 1.5.1
   ======================================================================== */

/* If GLPI keeps Bootstrap dark mode during navigation, keep the base page dark
   even before the branding script finishes refreshing the DOM. */
html[data-bs-theme="dark"] {
    color-scheme: dark;
    background: #09162a;
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .page,
html[data-bs-theme="dark"] .content-wrapper,
html[data-bs-theme="dark"] .page-body,
html[data-bs-theme="dark"] main {
    color: #e6edf7;
    background: #09162a !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .page-header,
html[data-bs-theme="dark"] .main-sidebar,
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: #13233a;
    color: #e6edf7;
}

/* Ticket right panel: make item chooser controls stack safely in narrow sidebars. */
.itil-right-panel .items_id .row,
.itil-right-panel .linked-tickets .row,
.itil-right-panel [class*="item"] .row {
    row-gap: 0.5rem;
}

.itil-right-panel .items_id .form-select,
.itil-right-panel .items_id .form-control,
.itil-right-panel [class*="item"] .form-select,
.itil-right-panel [class*="item"] .form-control {
    min-width: 0;
}


/* ========================================================================
   Shared GLPI header tools anchor - 1.5.2
   ======================================================================== */
#tfy-header-tools.tfy-header-tools {
    position: fixed !important;
    display: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1088 !important;
    pointer-events: none !important;
}

#tfy-header-tools.tfy-header-tools.tfy-header-tools-anchored {
    display: inline-flex !important;
}

#tfy-header-tools > * {
    pointer-events: auto !important;
    flex: 0 0 auto !important;
}

#tfy-header-tools #tfy-theme-toggle.tfy-theme-toggle-docked {
    position: relative !important;
    inset: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    border-radius: 10px !important;
}


/* ========================================================================
   GLPI 11.0.8 contrast fixes - 1.5.3
   ======================================================================== */

/* Ticket-list previews use a Bootstrap popover whose body owns a separate
   foreground colour. Styling only the outer .popover is therefore not enough. */
html[data-tfy-theme="dark"] .popover,
html[data-tfy-theme="dark"] .popover-header,
html[data-tfy-theme="dark"] .popover-body,
html[data-bs-theme="dark"] .popover,
html[data-bs-theme="dark"] .popover-header,
html[data-bs-theme="dark"] .popover-body {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
}

html[data-tfy-theme="dark"] .popover-body :is(p, div, span, strong, em, small),
html[data-bs-theme="dark"] .popover-body :is(p, div, span, strong, em, small) {
    color: inherit !important;
}

/* Knowledge-base category browsing is rendered as a tree rather than a normal
   Bootstrap list. Keep these selectors limited to known knowledge/tree hosts. */
html[data-tfy-theme="dark"] :is(
    #knowbaseitemcategories_tree,
    #knowledgebase_tree,
    .knowledgebase-tree,
    .knowledge-base-tree,
    [id*="knowbase" i][id*="tree" i],
    [class*="knowbase" i] .jstree
),
html[data-bs-theme="dark"] :is(
    #knowbaseitemcategories_tree,
    #knowledgebase_tree,
    .knowledgebase-tree,
    .knowledge-base-tree,
    [id*="knowbase" i][id*="tree" i],
    [class*="knowbase" i] .jstree
) {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
}

html[data-tfy-theme="dark"] :is(
    #knowbaseitemcategories_tree,
    #knowledgebase_tree,
    .knowledgebase-tree,
    .knowledge-base-tree,
    [id*="knowbase" i][id*="tree" i],
    [class*="knowbase" i] .jstree
) :is(.jstree-node, .jstree-anchor, .jstree-wholerow, li, a),
html[data-bs-theme="dark"] :is(
    #knowbaseitemcategories_tree,
    #knowledgebase_tree,
    .knowledgebase-tree,
    .knowledge-base-tree,
    [id*="knowbase" i][id*="tree" i],
    [class*="knowbase" i] .jstree
) :is(.jstree-node, .jstree-anchor, .jstree-wholerow, li, a) {
    color: var(--tfy-text) !important;
    background-color: transparent !important;
}

html[data-tfy-theme="dark"] :is(
    #knowbaseitemcategories_tree,
    #knowledgebase_tree,
    .knowledgebase-tree,
    .knowledge-base-tree,
    [id*="knowbase" i][id*="tree" i],
    [class*="knowbase" i] .jstree
) :is(.jstree-hovered, .jstree-clicked, .jstree-wholerow-hovered, .jstree-wholerow-clicked),
html[data-bs-theme="dark"] :is(
    #knowbaseitemcategories_tree,
    #knowledgebase_tree,
    .knowledgebase-tree,
    .knowledge-base-tree,
    [id*="knowbase" i][id*="tree" i],
    [class*="knowbase" i] .jstree
) :is(.jstree-hovered, .jstree-clicked, .jstree-wholerow-hovered, .jstree-wholerow-clicked) {
    color: #ffffff !important;
    background-color: var(--tfy-surface-3) !important;
}

/* TinyMCE uses an overflow toolbar for the expanded button palette. */
html[data-tfy-theme="dark"] .tox :is(
    .tox-toolbar,
    .tox-toolbar__overflow,
    .tox-toolbar__primary,
    .tox-toolbar-overlord,
    .tox-editor-header,
    .tox-edit-area,
    .tox-edit-area__iframe
),
html[data-bs-theme="dark"] .tox :is(
    .tox-toolbar,
    .tox-toolbar__overflow,
    .tox-toolbar__primary,
    .tox-toolbar-overlord,
    .tox-editor-header,
    .tox-edit-area,
    .tox-edit-area__iframe
) {
    color: var(--tfy-text) !important;
    background: #151f30 !important;
    border-color: #34445d !important;
}

/* Entity-recursion switches in item and project headers must not inherit the
   light compact-control background. */
html[data-tfy-theme="dark"] :is(.item-main-form, .form-page, .itil-object)
    :is(.form-check, .form-switch, [class*="recursive" i], [class*="sub-entit" i]),
html[data-bs-theme="dark"] :is(.item-main-form, .form-page, .itil-object)
    :is(.form-check, .form-switch, [class*="recursive" i], [class*="sub-entit" i]) {
    color: var(--tfy-text) !important;
    background-color: transparent !important;
    border-color: var(--tfy-border) !important;
}

html[data-tfy-theme="dark"] :is(.item-main-form, .form-page, .itil-object)
    :is(.form-check-label, [class*="recursive" i] label, [class*="sub-entit" i] label),
html[data-bs-theme="dark"] :is(.item-main-form, .form-page, .itil-object)
    :is(.form-check-label, [class*="recursive" i] label, [class*="sub-entit" i] label) {
    color: var(--tfy-text) !important;
}

/* The split Answer menu deliberately uses pastel action backgrounds. Those
   backgrounds need a dark foreground in both themes. */
:is(.itil-footer, #itil-footer, .timeline-footer, .timeline-actions, .itil-actions)
    .dropdown-menu :is(
        .dropdown-item,
        .btn-warning,
        .btn-info,
        .btn-success,
        .btn-light,
        .bg-warning,
        .bg-info,
        .bg-success,
        .bg-light,
        .text-bg-warning,
        .text-bg-info,
        .text-bg-success,
        .text-bg-light
    ),
:is(.itil-footer, #itil-footer, .timeline-footer, .timeline-actions, .itil-actions)
    .dropdown-menu :is(
        .dropdown-item,
        .btn-warning,
        .btn-info,
        .btn-success,
        .btn-light,
        .bg-warning,
        .bg-info,
        .bg-success,
        .bg-light,
        .text-bg-warning,
        .text-bg-info,
        .text-bg-success,
        .text-bg-light
    ) * {
    color: #172033 !important;
}

:is(.itil-footer, #itil-footer, .timeline-footer, .timeline-actions, .itil-actions)
    .dropdown-menu :is(.dropdown-item, .btn):disabled {
    color: #566277 !important;
    opacity: 1 !important;
}

/* GLPI 11 uses several footer wrappers depending on the active ITIL object. */
html[data-tfy-theme="dark"] :is(
    .itil-footer,
    #itil-footer,
    .timeline-footer,
    .timeline-actions,
    .itil-actions,
    .timeline-item-add,
    .itil-object .sticky-bottom,
    .itil-object .fixed-bottom
),
html[data-bs-theme="dark"] :is(
    .itil-footer,
    #itil-footer,
    .timeline-footer,
    .timeline-actions,
    .itil-actions,
    .timeline-item-add,
    .itil-object .sticky-bottom,
    .itil-object .fixed-bottom
) {
    color: var(--tfy-text) !important;
    background: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
    background-image: none !important;
}

/* Cover chart legends that are not nested in the card node decorated by JS. */
html[data-tfy-theme="dark"] .dashboard [class*="legend" i],
html[data-tfy-theme="dark"] .dashboard [class*="legend" i] *,
html[data-bs-theme="dark"] .dashboard [class*="legend" i],
html[data-bs-theme="dark"] .dashboard [class*="legend" i] * {
    color: #cbd7e6 !important;
    fill: #cbd7e6 !important;
    opacity: 1 !important;
}

/* GLPI applies the ticket footer colour to the nested buttons bar, which
   otherwise covers the dark background set on #itil-footer itself. */
html[data-tfy-theme="dark"] #itil-footer > .buttons-bar,
html[data-bs-theme="dark"] #itil-footer > .buttons-bar {
    color: var(--tfy-text) !important;
    background-color: var(--tfy-surface) !important;
    border-color: var(--tfy-border) !important;
}

html[data-tfy-theme="dark"] #itil-footer > .buttons-bar > .form-buttons,
html[data-bs-theme="dark"] #itil-footer > .buttons-bar > .form-buttons {
    color: inherit !important;
    background-color: inherit !important;
    border-color: var(--tfy-border) !important;
}

/* GLPI 11 renders the ticket-detail Entity as .glpi-badge, not as a
   Bootstrap .badge or the entity chip used in result tables. */
html[data-tfy-theme="dark"] .itil-object .glpi-badge,
html[data-tfy-theme="dark"] .item-main-form .glpi-badge,
html[data-bs-theme="dark"] .itil-object .glpi-badge,
html[data-bs-theme="dark"] .item-main-form .glpi-badge,
html[data-glpi-theme-dark="1"] .itil-object .glpi-badge,
html[data-glpi-theme-dark="1"] .item-main-form .glpi-badge {
    color: #b9dff0 !important;
    background: #162235 !important;
    border: 1px solid #354865 !important;
}

html[data-tfy-theme="dark"] .itil-object .glpi-badge *,
html[data-tfy-theme="dark"] .item-main-form .glpi-badge *,
html[data-bs-theme="dark"] .itil-object .glpi-badge *,
html[data-bs-theme="dark"] .item-main-form .glpi-badge *,
html[data-glpi-theme-dark="1"] .itil-object .glpi-badge *,
html[data-glpi-theme-dark="1"] .item-main-form .glpi-badge * {
    color: #b9dff0 !important;
}