@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/*
 * ALCOA shared guidebook
 *
 * This file is loaded for every layout when the Guidebook preset is active. Keep the selectors
 * scoped to html[data-guidebook-active="true"] so shared modules retain their existing theme.
 */

html[data-guidebook-active="true"] {
    --hr-primary: #0056B3;
    --hr-secondary: #E6F2FF;
    --hr-accent: #00B8C6;
    --hr-success: #4CAF50;
    --hr-warning: #FFC107;
    --hr-danger: #E53935;
    --hr-info: #42A5F5;
    --hr-ink: #123B73;
    --hr-body: #355579;
    --hr-muted: #6D86A4;
    --hr-border: #D6E9FB;
    --hr-surface: #FFFFFF;
    --hr-surface-soft: #F7FBFF;
    --hr-sidebar: var(--hr-primary);
    --hr-icon-stroke: #123B73;
    --hr-icon-blue: #42A5F5;
    --hr-icon-blue-soft: #B9DDF9;
    --hr-icon-teal: #00B8C6;
    --hr-icon-yellow: #FFC107;
    --hr-icon-surface: #FFFFFF;
    --hr-icon-ring: #D6E9FB;

    /* Velzon variables used by the shared layout and Bootstrap components. */
    --vz-primary: var(--hr-primary);
    --vz-primary-rgb: 0, 86, 179;
    --vz-primary-bg-subtle: var(--hr-secondary);
    --vz-primary-border-subtle: #B8D8F7;
    --vz-primary-text-emphasis: #003B7A;
    --vz-success: var(--hr-success);
    --vz-success-rgb: 76, 175, 80;
    --vz-success-bg-subtle: #ECF8ED;
    --vz-success-border-subtle: #B9E4BC;
    --vz-success-text-emphasis: #28752C;
    --vz-warning: var(--hr-warning);
    --vz-warning-rgb: 255, 193, 7;
    --vz-warning-bg-subtle: #FFF8E1;
    --vz-warning-border-subtle: #FFE082;
    --vz-warning-text-emphasis: #8B6500;
    --vz-danger: var(--hr-danger);
    --vz-danger-rgb: 229, 57, 53;
    --vz-danger-bg-subtle: #FDEDEC;
    --vz-danger-border-subtle: #F4B8B6;
    --vz-danger-text-emphasis: #A52320;
    --vz-info: var(--hr-info);
    --vz-info-rgb: 66, 165, 245;
    --vz-info-bg-subtle: #EDF7FE;
    --vz-info-border-subtle: #B9DDF9;
    --vz-info-text-emphasis: #1D69A7;
    --vz-body-bg: var(--hr-surface-soft);
    --vz-body-color: var(--hr-body);
    --vz-body-color-rgb: 53, 85, 121;
    --vz-heading-color: var(--hr-ink);
    --vz-secondary-color: var(--hr-muted);
    --vz-secondary-color-rgb: 109, 134, 164;
    --vz-secondary-bg: var(--hr-surface);
    --vz-secondary-bg-rgb: 255, 255, 255;
    --vz-tertiary-bg: var(--hr-surface-soft);
    --vz-light: var(--hr-surface-soft);
    --vz-border-color: var(--hr-border);
    --vz-border-color-translucent: rgba(0, 86, 179, .12);
    --vz-card-bg: var(--hr-surface);
    --vz-header-bg: var(--hr-surface);
    --vz-header-border: var(--hr-border);
    --vz-header-item-color: var(--hr-primary);
    --vz-header-item-sub-color: var(--hr-muted);
    --vz-header-item-bg: var(--hr-secondary);
    --vz-topbar-search-bg: var(--hr-secondary);
    --vz-topbar-user-bg: var(--hr-secondary);
    --vz-footer-bg: var(--hr-surface);
    --vz-footer-color: var(--hr-muted);
    --vz-vertical-menu-bg: var(--hr-sidebar);
    --vz-vertical-menu-border: var(--hr-sidebar);
    --vz-vertical-menu-item-color: rgba(255, 255, 255, .82);
    --vz-vertical-menu-item-hover-color: #FFFFFF;
    --vz-vertical-menu-item-active-color: #FFFFFF;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, .16);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, .70);
    --vz-vertical-menu-sub-item-hover-color: #FFFFFF;
    --vz-vertical-menu-sub-item-active-color: #FFFFFF;
    --vz-vertical-menu-title-color: #B7D8F7;

    /* Bootstrap variables are inherited by descendants in the HR route. */
    --bs-primary: var(--hr-primary);
    --bs-primary-rgb: 0, 86, 179;
    --bs-success: var(--hr-success);
    --bs-success-rgb: 76, 175, 80;
    --bs-warning: var(--hr-warning);
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: var(--hr-danger);
    --bs-danger-rgb: 229, 57, 53;
    --bs-info: var(--hr-info);
    --bs-info-rgb: 66, 165, 245;

    --guidebook-primary: var(--hr-primary);
    --guidebook-secondary: var(--hr-secondary);
    --guidebook-accent: var(--hr-accent);
    --guidebook-success: var(--hr-success);
    --guidebook-warning: var(--hr-warning);
    --guidebook-danger: var(--hr-danger);
    --guidebook-info: var(--hr-info);
    --guidebook-ink: var(--hr-ink);
    --guidebook-body: var(--hr-body);
    --guidebook-muted: var(--hr-muted);
    --guidebook-border: var(--hr-border);
    --guidebook-surface: var(--hr-surface);
    --guidebook-surface-soft: var(--hr-surface-soft);
}

html[data-guidebook-active="true"] body,
html[data-guidebook-active="true"] button,
html[data-guidebook-active="true"] input,
html[data-guidebook-active="true"] select,
html[data-guidebook-active="true"] textarea {
    font-family: "Poppins", sans-serif;
}

html[data-guidebook-active="true"] body {
    color: var(--hr-body);
    background: var(--hr-surface-soft);
    letter-spacing: .005em;
}

html[data-guidebook-active="true"] h1,
html[data-guidebook-active="true"] h2,
html[data-guidebook-active="true"] h3,
html[data-guidebook-active="true"] h4,
html[data-guidebook-active="true"] h5,
html[data-guidebook-active="true"] h6,
html[data-guidebook-active="true"] .h1,
html[data-guidebook-active="true"] .h2,
html[data-guidebook-active="true"] .h3,
html[data-guidebook-active="true"] .h4,
html[data-guidebook-active="true"] .h5,
html[data-guidebook-active="true"] .h6,
html[data-guidebook-active="true"] .card-title,
html[data-guidebook-active="true"] .page-title-box h4 {
    color: var(--hr-ink);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
}

html[data-guidebook-active="true"] .fw-medium { font-weight: 500 !important; }
html[data-guidebook-active="true"] .fw-semibold { font-weight: 600 !important; }
html[data-guidebook-active="true"] .fw-bold { font-weight: 700 !important; }
html[data-guidebook-active="true"] .ff-secondary { font-family: "Poppins", sans-serif !important; }
html[data-guidebook-active="true"] .hr-kpi-card h2,
html[data-guidebook-active="true"] .hr-kpi-card .fs-21,
html[data-guidebook-active="true"] .leave-status-count,
html[data-guidebook-active="true"] .approval-status-count,
html[data-guidebook-active="true"] .counter-value,
html[data-guidebook-active="true"] [data-hr-kpi],
html[data-guidebook-active="true"] .kpi-value {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
}
html[data-guidebook-active="true"] a { color: var(--hr-primary); }
html[data-guidebook-active="true"] a:hover { color: #003B7A; }
html[data-guidebook-active="true"] .text-muted { color: var(--hr-muted) !important; }
html[data-guidebook-active="true"] .text-dark { color: var(--hr-ink) !important; }

/* Shared shell: primary blue navigation with light-blue active states. */
html[data-guidebook-active="true"] #page-topbar {
    background: var(--hr-surface);
    border-bottom: 1px solid var(--hr-border);
    box-shadow: 0 2px 12px rgba(0, 86, 179, .06);
}

html[data-guidebook-active="true"] #page-topbar .header-item,
html[data-guidebook-active="true"] #page-topbar .header-item i,
html[data-guidebook-active="true"] #page-topbar .topnav-hamburger .hamburger-icon span {
    color: var(--hr-primary);
}

html[data-guidebook-active="true"] #page-topbar .header-item:hover,
html[data-guidebook-active="true"] #page-topbar .btn-topbar:hover {
    color: var(--hr-primary);
    background: var(--hr-secondary);
}

html[data-guidebook-active="true"] .app-menu,
html[data-guidebook-active="true"] .app-menu .navbar-brand-box {
    background: var(--hr-sidebar);
    border-color: var(--hr-sidebar);
}

html[data-guidebook-active="true"] .app-menu .nav-link {
    color: var(--vz-vertical-menu-item-color);
    border-radius: 8px;
    margin: 2px 10px;
}

html[data-guidebook-active="true"] .app-menu .nav-link i,
html[data-guidebook-active="true"] .app-menu .menu-title {
    color: #B7D8F7;
}

html[data-guidebook-active="true"] .app-menu .nav-link:hover,
html[data-guidebook-active="true"] .app-menu .nav-link.active,
html[data-guidebook-active="true"] .app-menu .nav-link[aria-current="page"] {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .16);
}

html[data-guidebook-active="true"] .app-menu .nav-link:hover i,
html[data-guidebook-active="true"] .app-menu .nav-link.active i,
html[data-guidebook-active="true"] .app-menu .nav-link[aria-current="page"] i {
    color: #FFFFFF;
}

/* Sidebar icons use the illustration files directly. The old Velzon icon
   glyph is hidden so the coloured guidebook asset is the icon itself. */
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i,
html[data-guidebook-icons-active="true"] .app-menu .navbar-brand-box i,
html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i {
    display: inline-block;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;
    margin-right: .55rem !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav .nav-sm i {
    width: 1.45rem;
    height: 1.45rem;
    flex-basis: 1.45rem;
    margin-right: .4rem !important;
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i::before,
html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i::before { display: none; }

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="dashboard"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="overview"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="list"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="bar-chart"] {
    background-image: url("/static/images/hr-guidebook-icons/overview.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="user"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="team"] {
    background-image: url("/static/images/hr-guidebook-icons/person.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="calendar"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="cake"] {
    background-image: url("/static/images/hr-guidebook-icons/calendar.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="bank"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="payroll"] {
    background-image: url("/static/images/hr-guidebook-icons/payroll.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="folder"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="file"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="archive"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="draft"] {
    background-image: url("/static/images/hr-guidebook-icons/documents.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="megaphone"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="notification"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="mail"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="inbox"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="feedback"] {
    background-image: url("/static/images/hr-guidebook-icons/notifications.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="briefcase"] {
    background-image: url("/static/images/hr-guidebook-icons/job.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="settings"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="config"] {
    background-image: url("/static/images/hr-guidebook-icons/settings.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="add"] {
    background-image: url("/static/images/hr-guidebook-icons/add.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="history"] {
    background-image: url("/static/images/hr-guidebook-icons/history.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="search"] {
    background-image: url("/static/images/hr-guidebook-icons/search.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="questionnaire"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="customer-service"] {
    background-image: url("/static/images/hr-guidebook-icons/support.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="git-merge"] {
    background-image: url("/static/images/hr-guidebook-icons/merge.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="check"]:not([class*="calendar"]):not([class*="mail"]) {
    background-image: url("/static/images/hr-guidebook-icons/status-success.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="close"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="forbid"] {
    background-image: url("/static/images/hr-guidebook-icons/status-danger.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="time"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="loader"] {
    background-image: url("/static/images/hr-guidebook-icons/status-pending.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="more"] {
    width: 1.25rem;
    height: 1.25rem;
    flex-basis: 1.25rem;
    background-image: url("/static/images/hr-guidebook-icons/more.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-brand-box i[class*="record"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="record"] {
    background-image: url("/static/images/hr-guidebook-icons/more.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i[class*="user"] {
    background-image: url("/static/images/hr-guidebook-icons/person.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i[class*="lock"] {
    background-image: url("/static/images/hr-guidebook-icons/security.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i[class*="customer-service"],
html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i[class*="logout"] {
    background-image: url("/static/images/hr-guidebook-icons/support.svg");
}

/* Leave status cards use the same semantic Guidebook illustrations as the
   application shell while retaining their legacy Remix classes as fallback. */
html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon::before {
    display: none;
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="overview"] {
    background-image: url("/static/images/hr-guidebook-icons/overview.svg");
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="documents"] {
    background-image: url("/static/images/hr-guidebook-icons/documents.svg");
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="notifications"] {
    background-image: url("/static/images/hr-guidebook-icons/notifications.svg");
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="status-pending"] {
    background-image: url("/static/images/hr-guidebook-icons/status-pending.svg");
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="status-success"] {
    background-image: url("/static/images/hr-guidebook-icons/status-success.svg");
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="status-danger"] {
    background-image: url("/static/images/hr-guidebook-icons/status-danger.svg");
}

html[data-guidebook-icons-active="true"] [data-leave-index] .leave-status-guidebook-icon[data-guidebook-icon="notification-off"] {
    background-image: url("/static/images/hr-guidebook-icons/notification-off.svg");
}

/* Profile icons use the same semantic Guidebook assets as the application shell.
   Keep the legacy icon classes on the markup so the Velzon preset remains the fallback. */
html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon] {
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon]::before {
    display: none;
}

html[data-guidebook-icons-active="true"] .user-profile-page .profile-tab-icon {
    width: 1.45rem;
    height: 1.45rem;
    flex-basis: 1.45rem;
}

html[data-guidebook-icons-active="true"] .user-profile-page .avatar-title [data-guidebook-icon] {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
}

html[data-guidebook-icons-active="true"] .user-profile-page .avatar-sm [data-guidebook-icon] {
    width: 1.35rem;
    height: 1.35rem;
    flex-basis: 1.35rem;
}

html[data-guidebook-icons-active="true"] .user-profile-page .avatar-xs [data-guidebook-icon] {
    width: 1.15rem;
    height: 1.15rem;
    flex-basis: 1.15rem;
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="overview"] {
    background-image: url("/static/images/hr-guidebook-icons/overview.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="person"] {
    background-image: url("/static/images/hr-guidebook-icons/person.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="notifications"] {
    background-image: url("/static/images/hr-guidebook-icons/notifications.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="notification-off"] {
    background-image: url("/static/images/hr-guidebook-icons/notification-off.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="documents"] {
    background-image: url("/static/images/hr-guidebook-icons/documents.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="payroll"] {
    background-image: url("/static/images/hr-guidebook-icons/payroll.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="job"] {
    background-image: url("/static/images/hr-guidebook-icons/job.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="security"] {
    background-image: url("/static/images/hr-guidebook-icons/security.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="history"] {
    background-image: url("/static/images/hr-guidebook-icons/history.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="search"] {
    background-image: url("/static/images/hr-guidebook-icons/search.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="status-success"] {
    background-image: url("/static/images/hr-guidebook-icons/status-success.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="status-danger"] {
    background-image: url("/static/images/hr-guidebook-icons/status-danger.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="clock"] {
    background-image: url("/static/images/hr-guidebook-icons/clock.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="announcements"] {
    background-image: url("/static/images/hr-guidebook-icons/announcements.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="external-link"] {
    background-image: url("/static/images/hr-guidebook-icons/external-link.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="profile"] {
    background-image: url("/static/images/hr-guidebook-icons/profile.svg");
}

html[data-guidebook-icons-active="true"] .user-profile-page [data-guidebook-icon="more"] {
    background-image: url("/static/images/hr-guidebook-icons/more.svg");
}

/* Account identity follows the light HR guidebook instead of the generic
   sidebar/account defaults. */
html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .topbar-user {
    background-color: var(--hr-secondary);
    border-left: 1px solid var(--hr-border);
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .topbar-user .user-name-text {
    color: var(--hr-ink);
    font-weight: 600;
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .topbar-user .user-name-sub-text {
    color: var(--hr-muted);
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .topbar-user .header-profile-user.bg-primary {
    color: #FFFFFF !important;
    background-color: var(--hr-primary) !important;
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-panel {
    background: var(--hr-sidebar);
    border-top-color: rgba(255, 255, 255, .16);
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-title {
    color: #B7D8F7;
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-current-user {
    color: #FFFFFF;
    font-weight: 600;
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-current-role {
    color: rgba(255, 255, 255, .70);
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-avatar {
    color: var(--hr-primary) !important;
    background-color: var(--hr-secondary);
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-link {
    color: rgba(255, 255, 255, .82) !important;
}

html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-link:hover,
html[data-guidebook-active="true"]:not([data-bs-theme="dark"]) .sidebar-account-link:focus {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, .16);
}

html[data-guidebook-active="true"] .page-content { background: var(--hr-surface-soft); }
html[data-guidebook-active="true"] .page-title-box {
    padding: 1rem 1.5rem 1.25rem;
    min-width: 0;
}
html[data-guidebook-active="true"] .page-title-box > h4,
html[data-guidebook-active="true"] .page-title-box > .page-title-right {
    min-width: 0;
}
html[data-guidebook-active="true"] .page-title-box > h4 {
    margin-right: 1rem;
    line-height: 1.35;
}
html[data-guidebook-active="true"] .page-title-box .page-title-right {
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
}
html[data-guidebook-active="true"] .page-title-box .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
html[data-guidebook-active="true"] .page-title-box .breadcrumb-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-guidebook-active="true"] .page-title-box h4 { color: var(--hr-ink); }
html[data-guidebook-active="true"] .page-title-box .breadcrumb-item,
html[data-guidebook-active="true"] .page-title-box .breadcrumb-item::before { color: var(--hr-muted); }
html[data-guidebook-active="true"] .page-title-box .breadcrumb-item.active { color: var(--hr-primary); }

/* Profile icon language: the reference illustration is translated into
   reusable medallions so every profile shortcut shares one visual rhythm. */
html[data-guidebook-active="true"] .hr-profile-avatar {
    position: relative;
    display: inline-flex;
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    align-items: center;
    justify-content: center;
    color: var(--hr-icon-stroke);
    background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, var(--hr-icon-surface) 68%, var(--hr-secondary) 100%);
    border: 1px solid rgba(66, 165, 245, .22);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(0, 86, 179, .16), 0 0 18px rgba(66, 165, 245, .12);
}

html[data-guidebook-active="true"] .hr-profile-avatar__initials {
    position: absolute;
    right: -.3rem;
    bottom: -.25rem;
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--hr-primary);
    border: 2px solid var(--hr-surface);
    border-radius: 50%;
    font-family: "Poppins", sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .01em;
}

html[data-guidebook-active="true"] .hr-profile-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

html[data-guidebook-active="true"] .hr-icon-outline {
    stroke: var(--hr-icon-stroke);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-guidebook-active="true"] .hr-icon-fill-blue { fill: var(--hr-icon-blue); }
html[data-guidebook-active="true"] .hr-icon-fill-blue-soft { fill: var(--hr-icon-blue-soft); }
html[data-guidebook-active="true"] .hr-icon-fill-teal { fill: var(--hr-icon-teal); }
html[data-guidebook-active="true"] .hr-icon-fill-yellow { fill: var(--hr-icon-yellow); }
html[data-guidebook-active="true"] .hr-icon-fill-surface { fill: var(--hr-icon-surface); }

html[data-guidebook-active="true"] .hr-icon-detail {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-guidebook-active="true"] .hr-icon-detail-navy { stroke: var(--hr-icon-stroke); }
html[data-guidebook-active="true"] .hr-icon-detail-teal { stroke: var(--hr-icon-teal); }

html[data-guidebook-active="true"] .hr-profile-section-icon .hr-profile-svg {
    width: 2.35rem;
    height: 2.35rem;
}

html[data-guidebook-active="true"] .hr-profile-section-title {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

html[data-guidebook-active="true"] .hr-profile-section-icon,
html[data-guidebook-active="true"] .hr-profile-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--hr-icon-stroke);
    background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, var(--hr-icon-surface) 68%, var(--hr-secondary) 100%);
    border: 1px solid rgba(66, 165, 245, .22);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0, 86, 179, .15), 0 0 14px rgba(66, 165, 245, .1);
}

html[data-guidebook-active="true"] .hr-profile-section-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

html[data-guidebook-active="true"] .hr-profile-section-icon.is-job { color: var(--hr-primary); }
html[data-guidebook-active="true"] .hr-profile-section-icon.is-contact { color: var(--hr-accent); }

html[data-guidebook-active="true"] .hr-profile-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}

html[data-guidebook-active="true"] .hr-profile-action {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .45rem;
    padding: .35rem .25rem .55rem;
    color: var(--hr-ink);
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

html[data-guidebook-active="true"] .hr-profile-action::after {
    width: 2.55rem;
    height: 3px;
    content: "";
    background: var(--hr-info);
    border-radius: 999px;
    opacity: .72;
    transition: width 180ms ease, opacity 180ms ease;
}

html[data-guidebook-active="true"] .hr-profile-action:hover,
html[data-guidebook-active="true"] .hr-profile-action:focus-visible {
    color: var(--hr-primary);
    background: var(--hr-secondary);
    border-color: #B8D8F7;
    transform: translateY(-2px);
}

html[data-guidebook-active="true"] .hr-profile-action:hover::after,
html[data-guidebook-active="true"] .hr-profile-action:focus-visible::after {
    width: 3.1rem;
    opacity: 1;
}

html[data-guidebook-active="true"] .hr-profile-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 86, 179, .14);
}

html[data-guidebook-active="true"] .hr-profile-action__icon {
    width: 3.75rem;
    height: 3.75rem;
    padding: .18rem;
}

html[data-guidebook-active="true"] .hr-profile-action.is-leave .hr-profile-action__icon { color: var(--hr-info); }
html[data-guidebook-active="true"] .hr-profile-action.is-payroll .hr-profile-action__icon { color: var(--hr-primary); }
html[data-guidebook-active="true"] .hr-profile-action.is-documents .hr-profile-action__icon { color: var(--hr-warning); }
html[data-guidebook-active="true"] .hr-profile-action.is-training .hr-profile-action__icon { color: var(--hr-accent); }

@media (max-width: 575.98px) {
    html[data-guidebook-active="true"] .hr-profile-avatar {
        width: 4.25rem;
        height: 4.25rem;
        flex-basis: 4.25rem;
    }

    html[data-guidebook-active="true"] .hr-profile-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }
}

/* Surfaces and data-dense controls. */
html[data-guidebook-active="true"] .card {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 86, 179, .06) !important;
}

html[data-guidebook-active="true"] .card-header {
    color: var(--hr-ink);
    background: var(--hr-surface-soft);
    border-color: var(--hr-border) !important;
}

html[data-guidebook-active="true"] .card-footer { border-color: var(--hr-border) !important; }
html[data-guidebook-active="true"] .table { --vz-table-border-color: var(--hr-border); color: var(--hr-body); }
html[data-guidebook-active="true"] .table thead th,
html[data-guidebook-active="true"] .table-light th {
    color: var(--hr-ink);
    background: var(--hr-surface-soft) !important;
    border-color: var(--hr-border) !important;
    font-weight: 600;
}
html[data-guidebook-active="true"] .table-hover > tbody > tr:hover > * { background: var(--hr-secondary); }
html[data-guidebook-active="true"] .list-group-item { border-color: var(--hr-border); }

html[data-guidebook-active="true"] .form-label { color: var(--hr-ink); font-weight: 500; }
html[data-guidebook-active="true"] .form-control,
html[data-guidebook-active="true"] .form-select,
html[data-guidebook-active="true"] .input-group-text {
    color: var(--hr-body);
    background: var(--hr-surface);
    border-color: #C9E0F5;
    border-radius: 8px !important;
}
html[data-guidebook-active="true"] .input-group > .input-group-text { border-radius: 8px 0 0 8px !important; }
html[data-guidebook-active="true"] .input-group > .form-control { border-radius: 0 8px 8px 0 !important; }
html[data-guidebook-active="true"] .form-control:focus,
html[data-guidebook-active="true"] .form-select:focus {
    border-color: var(--hr-primary);
    box-shadow: 0 0 0 .2rem rgba(0, 86, 179, .14);
}
html[data-guidebook-active="true"] .form-check-input:checked {
    background-color: var(--hr-primary);
    border-color: var(--hr-primary);
}

/* Primary, secondary and status actions from the reference guide. */
html[data-guidebook-active="true"] .btn { border-radius: 8px !important; font-weight: 500; }
html[data-guidebook-active="true"] .btn-primary,
html[data-guidebook-active="true"] .bg-primary {
    color: #FFFFFF !important;
    background-color: var(--hr-primary) !important;
    border-color: var(--hr-primary) !important;
}
html[data-guidebook-active="true"] .btn-primary:hover,
html[data-guidebook-active="true"] .btn-primary:focus,
html[data-guidebook-active="true"] .btn-primary:active {
    background-color: #003B7A !important;
    border-color: #003B7A !important;
}
html[data-guidebook-active="true"] .btn-light,
html[data-guidebook-active="true"] .btn-soft-primary,
html[data-guidebook-active="true"] .bg-primary-subtle,
html[data-guidebook-active="true"] .bg-soft-primary {
    color: var(--hr-primary) !important;
    background-color: var(--hr-secondary) !important;
    border-color: #B8D8F7 !important;
}
html[data-guidebook-active="true"] .btn-light:hover,
html[data-guidebook-active="true"] .btn-soft-primary:hover {
    background-color: #D5EAFE !important;
    border-color: #91C3F2 !important;
}
html[data-guidebook-active="true"] .btn-info,
html[data-guidebook-active="true"] .bg-info { color: #FFFFFF !important; background-color: var(--hr-info) !important; border-color: var(--hr-info) !important; }
html[data-guidebook-active="true"] .btn-success,
html[data-guidebook-active="true"] .bg-success { color: #FFFFFF !important; background-color: var(--hr-success) !important; border-color: var(--hr-success) !important; }
html[data-guidebook-active="true"] .btn-warning,
html[data-guidebook-active="true"] .bg-warning { color: #4A3900 !important; background-color: var(--hr-warning) !important; border-color: var(--hr-warning) !important; }
html[data-guidebook-active="true"] .btn-danger,
html[data-guidebook-active="true"] .bg-danger { color: #FFFFFF !important; background-color: var(--hr-danger) !important; border-color: var(--hr-danger) !important; }
html[data-guidebook-active="true"] .btn-soft-success { color: #28752C !important; background: #ECF8ED !important; border-color: #B9E4BC !important; }
html[data-guidebook-active="true"] .btn-soft-info { color: #1D69A7 !important; background: #EDF7FE !important; border-color: #B9DDF9 !important; }
html[data-guidebook-active="true"] .btn-soft-warning { color: #8B6500 !important; background: #FFF8E1 !important; border-color: #FFE082 !important; }
html[data-guidebook-active="true"] .btn-soft-danger { color: #A52320 !important; background: #FDEDEC !important; border-color: #F4B8B6 !important; }

html[data-guidebook-active="true"] .text-primary { color: var(--hr-primary) !important; }
html[data-guidebook-active="true"] .text-info { color: #1D69A7 !important; }
html[data-guidebook-active="true"] .text-success { color: #28752C !important; }
html[data-guidebook-active="true"] .text-warning { color: #8B6500 !important; }
html[data-guidebook-active="true"] .text-danger { color: #A52320 !important; }
html[data-guidebook-active="true"] .bg-info-subtle { color: #1D69A7 !important; background-color: #EDF7FE !important; }
html[data-guidebook-active="true"] .bg-success-subtle { color: #28752C !important; background-color: #ECF8ED !important; }
html[data-guidebook-active="true"] .bg-warning-subtle { color: #8B6500 !important; background-color: #FFF8E1 !important; }
html[data-guidebook-active="true"] .bg-danger-subtle { color: #A52320 !important; background-color: #FDEDEC !important; }
html[data-guidebook-active="true"] .bg-soft-info { color: #1D69A7 !important; background-color: #EDF7FE !important; }
html[data-guidebook-active="true"] .bg-soft-success { color: #28752C !important; background-color: #ECF8ED !important; }
html[data-guidebook-active="true"] .bg-soft-warning { color: #8B6500 !important; background-color: #FFF8E1 !important; }
html[data-guidebook-active="true"] .bg-soft-danger { color: #A52320 !important; background-color: #FDEDEC !important; }

/* Status language: completed/active, pending/attention, error/critical and
   informational/system follow the exact reference colours. */
html[data-guidebook-active="true"] .alert-primary { color: #003B7A; background: var(--hr-secondary); border-color: #B8D8F7; }
html[data-guidebook-active="true"] .alert-success { color: #28752C; background: #ECF8ED; border-color: #B9E4BC; }
html[data-guidebook-active="true"] .alert-warning { color: #6E5200; background: #FFF8E1; border-color: #FFE082; }
html[data-guidebook-active="true"] .alert-danger { color: #A52320; background: #FDEDEC; border-color: #F4B8B6; }
html[data-guidebook-active="true"] .alert-info { color: #1D69A7; background: #EDF7FE; border-color: #B9DDF9; }
html[data-guidebook-active="true"] .progress-bar { background-color: var(--hr-primary); }

/* Pills and tabs use the same blue hierarchy as the reference navigation. */
html[data-guidebook-active="true"] .nav-pills .nav-link,
html[data-guidebook-active="true"] .nav-tabs .nav-link { color: var(--hr-primary); border-radius: 8px; }
html[data-guidebook-active="true"] .nav-pills .nav-link.active,
html[data-guidebook-active="true"] .nav-pills .show > .nav-link,
html[data-guidebook-active="true"] .nav-tabs .nav-link.active {
    color: #FFFFFF;
    background-color: var(--hr-primary);
    border-color: var(--hr-primary);
}
html[data-guidebook-active="true"] .nav-tabs { border-color: var(--hr-border); }
html[data-guidebook-active="true"] .badge { font-weight: 600; }
html[data-guidebook-active="true"] .modal-content { border: 1px solid var(--hr-border); border-radius: 12px; }
html[data-guidebook-active="true"] .modal-header,
html[data-guidebook-active="true"] .modal-footer { border-color: var(--hr-border); }

/* Accent teal is intentionally limited to live/innovative data moments. */
html[data-guidebook-active="true"] .hr-accent,
html[data-guidebook-active="true"] .text-accent,
html[data-guidebook-active="true"] .hr-live-indicator { color: var(--hr-accent) !important; }
html[data-guidebook-active="true"] .bg-accent { color: #FFFFFF !important; background-color: var(--hr-accent) !important; }
html[data-guidebook-active="true"] .border-accent { border-color: var(--hr-accent) !important; }
html[data-guidebook-active="true"] .hr-live-indicator::before {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .35rem;
    content: "";
    vertical-align: .06em;
    background: var(--hr-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 184, 198, .14);
}

@media (max-width: 991.98px) {
    html[data-guidebook-active="true"] .page-title-box { padding-top: .75rem; }
    html[data-guidebook-active="true"] .app-menu .nav-link { margin-left: 6px; margin-right: 6px; }
}

/* Dark HR theme. The guidebook colours remain recognizable, while surfaces,
   borders and text are lifted to preserve contrast on the dark canvas. */
html[data-guidebook-active="true"][data-bs-theme="dark"] {
    color-scheme: dark;
    --hr-primary: #4B9FEA;
    --hr-secondary: #18324A;
    --hr-accent: #31C9D1;
    --hr-success: #65C26A;
    --hr-warning: #FFD54F;
    --hr-danger: #EF625E;
    --hr-info: #64B5F6;
    --hr-ink: #EAF4FF;
    --hr-body: #C5D3E0;
    --hr-muted: #94A8BC;
    --hr-border: #33495E;
    --hr-surface: #20262D;
    --hr-surface-soft: #181D23;
    --hr-sidebar: #003B7A;
    --hr-icon-stroke: #D9ECFF;
    --hr-icon-blue: #64B5F6;
    --hr-icon-blue-soft: #285C87;
    --hr-icon-teal: #31C9D1;
    --hr-icon-yellow: #FFD54F;
    --hr-icon-surface: #20262D;
    --hr-icon-ring: #33495E;

    --vz-primary: var(--hr-primary);
    --vz-primary-rgb: 75, 159, 234;
    --vz-primary-bg-subtle: #163A5C;
    --vz-primary-border-subtle: #285C87;
    --vz-primary-text-emphasis: #B9D9F6;
    --vz-success: var(--hr-success);
    --vz-success-rgb: 101, 194, 106;
    --vz-success-bg-subtle: #193A23;
    --vz-success-border-subtle: #2E6B3A;
    --vz-success-text-emphasis: #A6E2AA;
    --vz-warning: var(--hr-warning);
    --vz-warning-rgb: 255, 213, 79;
    --vz-warning-bg-subtle: #443917;
    --vz-warning-border-subtle: #806B25;
    --vz-warning-text-emphasis: #FFE99A;
    --vz-danger: var(--hr-danger);
    --vz-danger-rgb: 239, 98, 94;
    --vz-danger-bg-subtle: #482322;
    --vz-danger-border-subtle: #813B39;
    --vz-danger-text-emphasis: #FFB0AD;
    --vz-info: var(--hr-info);
    --vz-info-rgb: 100, 181, 246;
    --vz-info-bg-subtle: #19364D;
    --vz-info-border-subtle: #2B5C7F;
    --vz-info-text-emphasis: #B8E0FF;
    --vz-body-bg: var(--hr-surface-soft);
    --vz-body-color: var(--hr-body);
    --vz-body-color-rgb: 197, 211, 224;
    --vz-emphasis-color: var(--hr-ink);
    --vz-heading-color: var(--hr-ink);
    --vz-secondary-color: var(--hr-muted);
    --vz-secondary-color-rgb: 148, 168, 188;
    --vz-secondary-bg: var(--hr-surface);
    --vz-secondary-bg-rgb: 32, 38, 45;
    --vz-tertiary-bg: #252C34;
    --vz-tertiary-bg-rgb: 37, 44, 52;
    --vz-light: #252C34;
    --vz-light-rgb: 37, 44, 52;
    --vz-border-color: var(--hr-border);
    --vz-border-color-translucent: rgba(145, 190, 231, .20);
    --vz-card-bg: var(--hr-surface);
    --vz-header-bg: #202830;
    --vz-header-border: var(--hr-border);
    --vz-header-item-color: var(--hr-ink);
    --vz-header-item-bg: #29343F;
    --vz-topbar-search-bg: #171C22;
    --vz-topbar-user-bg: #29343F;
    --vz-footer-bg: var(--hr-surface);
    --vz-footer-color: var(--hr-muted);
    --vz-vertical-menu-bg: var(--hr-sidebar);
    --vz-vertical-menu-border: var(--hr-sidebar);
    --vz-vertical-menu-item-color: rgba(255, 255, 255, .86);
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, .18);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, .72);
    --vz-vertical-menu-title-color: #A7C9E8;

    --bs-primary: var(--hr-primary);
    --bs-primary-rgb: 75, 159, 234;
    --bs-success: var(--hr-success);
    --bs-success-rgb: 101, 194, 106;
    --bs-warning: var(--hr-warning);
    --bs-warning-rgb: 255, 213, 79;
    --bs-danger: var(--hr-danger);
    --bs-danger-rgb: 239, 98, 94;
    --bs-info: var(--hr-info);
    --bs-info-rgb: 100, 181, 246;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] body,
html[data-guidebook-active="true"][data-bs-theme="dark"] .page-content {
    color: var(--hr-body);
    background-color: var(--hr-surface-soft);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] #page-topbar {
    background: var(--hr-surface);
    border-bottom-color: var(--hr-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] #page-topbar .header-item,
html[data-guidebook-active="true"][data-bs-theme="dark"] #page-topbar .header-item i,
html[data-guidebook-active="true"][data-bs-theme="dark"] #page-topbar .topnav-hamburger .hamburger-icon span {
    color: var(--hr-ink);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] #page-topbar .header-item:hover,
html[data-guidebook-active="true"][data-bs-theme="dark"] #page-topbar .btn-topbar:hover {
    color: var(--hr-ink);
    background: var(--hr-secondary);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .page-title-box {
    background: var(--hr-surface) !important;
    border-bottom-color: var(--hr-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .20);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .card,
html[data-guidebook-active="true"][data-bs-theme="dark"] .modal-content,
html[data-guidebook-active="true"][data-bs-theme="dark"] .dropdown-menu,
html[data-guidebook-active="true"][data-bs-theme="dark"] .offcanvas {
    color: var(--hr-body);
    background-color: var(--hr-surface);
    border-color: var(--hr-border) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .card-header,
html[data-guidebook-active="true"][data-bs-theme="dark"] .table thead th,
html[data-guidebook-active="true"][data-bs-theme="dark"] .table-light th {
    color: var(--hr-ink);
    background-color: var(--hr-surface-soft) !important;
    border-color: var(--hr-border) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .table,
html[data-guidebook-active="true"][data-bs-theme="dark"] .table > :not(caption) > * > *,
html[data-guidebook-active="true"][data-bs-theme="dark"] .list-group-item {
    color: var(--hr-body);
    border-color: var(--hr-border);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    color: var(--hr-ink);
    background-color: var(--hr-secondary);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .form-control,
html[data-guidebook-active="true"][data-bs-theme="dark"] .form-select,
html[data-guidebook-active="true"][data-bs-theme="dark"] .input-group-text {
    color: var(--hr-body);
    background-color: #171C22;
    border-color: var(--hr-border);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .form-control::placeholder {
    color: #7F96AB;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .form-control:focus,
html[data-guidebook-active="true"][data-bs-theme="dark"] .form-select:focus {
    color: var(--hr-ink);
    background-color: #1B2229;
    border-color: var(--hr-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--vz-primary-rgb), .22);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-light,
html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-soft-primary,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-primary-subtle,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-soft-primary {
    color: #B9D9F6 !important;
    background-color: var(--hr-secondary) !important;
    border-color: var(--vz-primary-border-subtle) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-light:hover,
html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-soft-primary:hover {
    color: var(--hr-ink) !important;
    background-color: #214563 !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-soft-success,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-success-subtle,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-soft-success {
    color: #A6E2AA !important;
    background-color: var(--vz-success-bg-subtle) !important;
    border-color: var(--vz-success-border-subtle) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-soft-info,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-info-subtle,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-soft-info {
    color: #B8E0FF !important;
    background-color: var(--vz-info-bg-subtle) !important;
    border-color: var(--vz-info-border-subtle) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-soft-warning,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-warning-subtle,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-soft-warning {
    color: #FFE99A !important;
    background-color: var(--vz-warning-bg-subtle) !important;
    border-color: var(--vz-warning-border-subtle) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .btn-soft-danger,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-danger-subtle,
html[data-guidebook-active="true"][data-bs-theme="dark"] .bg-soft-danger {
    color: #FFB0AD !important;
    background-color: var(--vz-danger-bg-subtle) !important;
    border-color: var(--vz-danger-border-subtle) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .text-primary { color: #8BC5F4 !important; }
html[data-guidebook-active="true"][data-bs-theme="dark"] .text-info { color: #B8E0FF !important; }
html[data-guidebook-active="true"][data-bs-theme="dark"] .text-success { color: #A6E2AA !important; }
html[data-guidebook-active="true"][data-bs-theme="dark"] .text-warning { color: #FFE99A !important; }
html[data-guidebook-active="true"][data-bs-theme="dark"] .text-danger { color: #FFB0AD !important; }
html[data-guidebook-active="true"][data-bs-theme="dark"] .text-muted { color: var(--hr-muted) !important; }
html[data-guidebook-active="true"][data-bs-theme="dark"] .text-dark { color: var(--hr-ink) !important; }

html[data-guidebook-active="true"][data-bs-theme="dark"] .alert-primary {
    color: #B9D9F6;
    background: var(--vz-primary-bg-subtle);
    border-color: var(--vz-primary-border-subtle);
}
html[data-guidebook-active="true"][data-bs-theme="dark"] .alert-success {
    color: #A6E2AA;
    background: var(--vz-success-bg-subtle);
    border-color: var(--vz-success-border-subtle);
}
html[data-guidebook-active="true"][data-bs-theme="dark"] .alert-warning {
    color: #FFE99A;
    background: var(--vz-warning-bg-subtle);
    border-color: var(--vz-warning-border-subtle);
}
html[data-guidebook-active="true"][data-bs-theme="dark"] .alert-danger {
    color: #FFB0AD;
    background: var(--vz-danger-bg-subtle);
    border-color: var(--vz-danger-border-subtle);
}
html[data-guidebook-active="true"][data-bs-theme="dark"] .alert-info {
    color: #B8E0FF;
    background: var(--vz-info-bg-subtle);
    border-color: var(--vz-info-border-subtle);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .nav-tabs,
html[data-guidebook-active="true"][data-bs-theme="dark"] .nav-tabs .nav-link {
    border-color: var(--hr-border);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .nav-tabs .nav-link:not(.active) {
    color: #AFC7DC;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .modal-header,
html[data-guidebook-active="true"][data-bs-theme="dark"] .modal-footer,
html[data-guidebook-active="true"][data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--hr-border) !important;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .dropdown-item {
    color: var(--hr-body);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .dropdown-item:hover,
html[data-guidebook-active="true"][data-bs-theme="dark"] .dropdown-item:focus {
    color: var(--hr-ink);
    background-color: var(--hr-secondary);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .page-title-box .breadcrumb-item,
html[data-guidebook-active="true"][data-bs-theme="dark"] .page-title-box .breadcrumb-item::before {
    color: var(--hr-muted);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .page-title-box .breadcrumb-item.active,
html[data-guidebook-active="true"][data-bs-theme="dark"] .page-title-box .breadcrumb-item a {
    color: #8BC5F4;
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-profile-action:hover,
html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-profile-action:focus-visible {
    border-color: var(--hr-border);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-profile-avatar,
html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-profile-section-icon,
html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-profile-action__icon {
    background: radial-gradient(circle at 35% 28%, var(--hr-icon-surface) 0%, var(--hr-icon-surface) 68%, var(--hr-surface-soft) 100%);
    border-color: var(--hr-icon-ring);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-profile-action:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--vz-primary-rgb), .22);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-map-stage {
    background-color: var(--hr-surface-soft);
    border-color: var(--hr-border);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-map-status,
html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-map-error,
html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-map-legend {
    color: var(--hr-body);
    background-color: var(--hr-surface);
    border-color: var(--hr-border);
}

html[data-guidebook-active="true"][data-bs-theme="dark"] .hr-map-error { color: #FFB0AD; }

/* Guidebook sidebar fallback. Every visible icon remains coloured when a
   module does not have a dedicated semantic mapping. */
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i,
html[data-guidebook-icons-active="true"] .app-menu .navbar-brand-box i,
html[data-guidebook-icons-active="true"] .app-menu .sidebar-account-panel i {
    background-image: url("/static/images/hr-guidebook-icons/more.svg");
}

html[data-guidebook-active="true"] .auth-one-bg {
    background-color: var(--guidebook-primary) !important;
}

html[data-guidebook-active="true"] .auth-one-bg .bg-overlay {
    background: linear-gradient(135deg, rgba(0, 86, 179, .90), rgba(0, 184, 198, .68));
}

html[data-guidebook-active="true"] body.landing-body {
    color: var(--guidebook-body);
    font-family: "Poppins", sans-serif;
    background: var(--guidebook-surface-soft);
}

/* The existing sidebar palette rules are intentionally broad and carry a
   higher selector specificity. These final Guidebook rules make the preset
   authoritative without changing the stored Velzon sidebar preference. */
html[data-guidebook-active="true"] .app-menu,
html[data-guidebook-active="true"] .app-menu .navbar-brand-box {
    background: var(--guidebook-primary) !important;
    border-color: var(--guidebook-primary) !important;
}

html[data-guidebook-active="true"] .navbar-menu .navbar-nav .nav-link,
html[data-guidebook-active="true"] .navbar-menu .navbar-nav .menu-title,
html[data-guidebook-active="true"] .navbar-menu .navbar-nav .nav-link span:not(.badge),
html[data-guidebook-active="true"] .navbar-menu .navbar-nav .menu-title span,
html[data-guidebook-active="true"] .navbar-menu .navbar-nav .nav-sm .nav-link {
    color: rgba(255, 255, 255, .84) !important;
}

html[data-guidebook-icons-active="true"] .navbar-menu .navbar-nav .nav-link i,
html[data-guidebook-icons-active="true"] .navbar-menu .navbar-nav .nav-link svg {
    color: transparent !important;
}

html[data-guidebook-active="true"] .navbar-menu .navbar-nav .nav-link:hover,
html[data-guidebook-active="true"] .navbar-menu .navbar-nav .nav-link.active,
html[data-guidebook-active="true"] .navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, .16) !important;
}

html[data-guidebook-active="true"] .sidebar-account-title,
html[data-guidebook-active="true"] .sidebar-account-current-user,
html[data-guidebook-active="true"] .sidebar-account-current-role,
html[data-guidebook-active="true"] .sidebar-account-link {
    color: rgba(255, 255, 255, .84) !important;
}

html[data-guidebook-active="true"] .sidebar-account-panel {
    background: var(--guidebook-primary) !important;
    border-top-color: rgba(255, 255, 255, .16) !important;
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="home"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="dashboard"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="overview"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="list"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="bar-chart"] {
    background-image: url("/static/images/hr-guidebook-icons/overview.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="time"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="calendar"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="cake"] {
    background-image: url("/static/images/hr-guidebook-icons/calendar.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="money"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="dollar"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="wallet"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="bank"] {
    background-image: url("/static/images/hr-guidebook-icons/payroll.svg");
}

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="shield"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="toggle"],
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav i[class*="lock"] {
    background-image: url("/static/images/hr-guidebook-icons/security.svg");
}

html[data-guidebook-active="true"] .topbar-user {
    background-color: var(--guidebook-secondary) !important;
    border-left-color: var(--guidebook-border) !important;
}

/* Semantic Guidebook icon contract. The data attribute is the source of truth
   for Guidebook icons; legacy glyph classes remain available to Velzon only. */
html[data-guidebook-icons-active="true"] [data-guidebook-icon] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

html[data-guidebook-icons-active="true"] [data-guidebook-icon]::before {
    display: none !important;
}

html[data-guidebook-icons-active="true"] .app-menu [data-guidebook-icon] {
    display: inline-block;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;
    margin-right: .55rem !important;
    color: transparent !important;
    font-size: 0 !important;
}

html[data-guidebook-icons-active="true"] .app-menu .nav-sm [data-guidebook-icon] {
    width: 1.45rem;
    height: 1.45rem;
    flex-basis: 1.45rem;
    margin-right: .4rem !important;
}

html[data-guidebook-icons-active="true"] #page-topbar [data-guidebook-icon] {
    display: inline-block;
    width: 1.55rem;
    height: 1.55rem;
    margin-right: .25rem;
    color: transparent !important;
    font-size: 0 !important;
    vertical-align: middle;
}

html[data-guidebook-icons-active="true"] #page-topbar .dropdown-menu [data-guidebook-icon] {
    width: 1.2rem;
    height: 1.2rem;
}

html[data-guidebook-icons-active="true"] .hamburger-icon[data-guidebook-icon] {
    display: inline-block;
    width: 1.55rem;
    height: 1.55rem;
    background-image: url("/static/images/hr-guidebook-icons/menu.svg") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

html[data-guidebook-icons-active="true"] .hamburger-icon[data-guidebook-icon] > span {
    display: none;
}

/* Explicit asset mapping keeps theme mode, settings, notifications and
   announcements visually distinct. */
html[data-guidebook-icons-active="true"] [data-guidebook-icon="menu"] { background-image: url("/static/images/hr-guidebook-icons/menu.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="environment"] { background-image: url("/static/images/hr-guidebook-icons/environment.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="install"] { background-image: url("/static/images/hr-guidebook-icons/install.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="fullscreen"] { background-image: url("/static/images/hr-guidebook-icons/fullscreen.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="theme-moon"] { background-image: url("/static/images/hr-guidebook-icons/theme-moon.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="theme-sun"] { background-image: url("/static/images/hr-guidebook-icons/theme-sun.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="customizer"] { background-image: url("/static/images/hr-guidebook-icons/customizer.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="settings"] { background-image: url("/static/images/hr-guidebook-icons/settings.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="notifications"] { background-image: url("/static/images/hr-guidebook-icons/notifications.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="announcements"] { background-image: url("/static/images/hr-guidebook-icons/announcements.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="profile"] { background-image: url("/static/images/hr-guidebook-icons/profile.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="hub"] { background-image: url("/static/images/hr-guidebook-icons/hub.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="team"] { background-image: url("/static/images/hr-guidebook-icons/team.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="logout"] { background-image: url("/static/images/hr-guidebook-icons/logout.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="clock"] { background-image: url("/static/images/hr-guidebook-icons/clock.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="notification-off"] { background-image: url("/static/images/hr-guidebook-icons/notification-off.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="arrow-right"] { background-image: url("/static/images/hr-guidebook-icons/arrow-right.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="external-link"] { background-image: url("/static/images/hr-guidebook-icons/external-link.svg") !important; }
html[data-guidebook-icons-active="true"] [data-guidebook-icon="information"] { background-image: url("/static/images/hr-guidebook-icons/information.svg") !important; }

html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="overview"] { background-image: url("/static/images/hr-guidebook-icons/overview.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="person"] { background-image: url("/static/images/hr-guidebook-icons/person.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="calendar"] { background-image: url("/static/images/hr-guidebook-icons/calendar.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="payroll"] { background-image: url("/static/images/hr-guidebook-icons/payroll.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="documents"] { background-image: url("/static/images/hr-guidebook-icons/documents.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="job"] { background-image: url("/static/images/hr-guidebook-icons/job.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="add"] { background-image: url("/static/images/hr-guidebook-icons/add.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="history"] { background-image: url("/static/images/hr-guidebook-icons/history.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="search"] { background-image: url("/static/images/hr-guidebook-icons/search.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="support"] { background-image: url("/static/images/hr-guidebook-icons/support.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="security"] { background-image: url("/static/images/hr-guidebook-icons/security.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="status-success"] { background-image: url("/static/images/hr-guidebook-icons/status-success.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="status-pending"] { background-image: url("/static/images/hr-guidebook-icons/status-pending.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="status-danger"] { background-image: url("/static/images/hr-guidebook-icons/status-danger.svg") !important; }
html[data-guidebook-icons-active="true"] .app-menu .navbar-nav [data-guidebook-icon="more"] { background-image: url("/static/images/hr-guidebook-icons/more.svg") !important; }