/* Final component layer. Loaded after Velzon and page plugins. */

:root {
    /* Velzon scopes this token to cards, while ERP components also use it globally. */
    --vz-card-bg: rgb(var(--vz-secondary-bg-rgb, 255, 255, 255));
    /* The complete HK Grotesk family ships locally with Velzon. */
    --vz-font-sans-serif: hkgrotesk, "Segoe UI", sans-serif;
    --vz-body-font-family: var(--vz-font-sans-serif);
}

body,
button,
input,
select,
textarea,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--vz-font-sans-serif);
}

html.erp-is-processing,
html.erp-is-processing body {
    overflow: hidden;
}

/* Keep workspace drawers fully opaque and above Bootstrap's backdrop. */
.page-content .offcanvas.erp-item-drawer {
    --vz-offcanvas-bg: rgb(var(--vz-body-bg-rgb, 247, 247, 249));
    --bs-offcanvas-bg: rgb(var(--vz-body-bg-rgb, 247, 247, 249));
    --vz-card-bg: rgb(var(--vz-secondary-bg-rgb, 255, 255, 255));
    z-index: 1060;
    isolation: isolate;
    opacity: 1 !important;
    background: rgb(var(--vz-body-bg-rgb, 247, 247, 249)) !important;
    backdrop-filter: none !important;
}

.page-content .offcanvas.erp-item-drawer > .offcanvas-header {
    position: relative;
    z-index: 3;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--vz-primary-rgb), .1), transparent 38%),
        rgb(var(--vz-secondary-bg-rgb, 255, 255, 255)) !important;
    backdrop-filter: none !important;
}

.page-content .offcanvas.erp-item-drawer > .offcanvas-body,
.page-content .offcanvas.erp-item-drawer .erp-drawer-workspace,
.page-content .offcanvas.erp-item-drawer .erp-drawer-tab-content {
    position: relative;
    z-index: 1;
    background: rgb(var(--vz-body-bg-rgb, 247, 247, 249));
}

.page-content .offcanvas.erp-item-drawer .erp-drawer-tabs {
    background: rgb(var(--vz-secondary-bg-rgb, 255, 255, 255));
    backdrop-filter: none;
}

.main-content,
.page-content,
.page-content > .container-fluid,
.page-content .row > *,
.page-content .card,
.page-content .card-body,
.page-content .alert {
    min-width: 0;
}

.page-content .alert {
    overflow: hidden;
    overflow-wrap: anywhere;
    isolation: isolate;
    background-color: var(--vz-alert-bg, var(--vz-card-bg, #fff));
    opacity: 1;
    backdrop-filter: none;
}

.page-content :is(.card, .card-body, .erp-operation-card):has(.choices.is-open) {
    overflow: visible !important;
}

.page-content .erp-task-comment-scroll {
    max-height: 360px;
    padding-right: .3rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.page-content .erp-task-comment-scroll > *,
.page-content .erp-task-comment-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Dashboard hero: keep operational counters readable even when utility styles change. */
.page-content .erp-hero-signals {
    display: flex !important;
    align-items: stretch;
    gap: .75rem !important;
}

.page-content .erp-hero-signal {
    display: grid !important;
    grid-template-columns: 2.65rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .75rem !important;
    min-width: 154px;
    padding: .7rem .9rem .7rem .65rem !important;
    border: 1px solid color-mix(in srgb, var(--vz-primary) 11%, var(--vz-border-color)) !important;
    border-radius: .85rem !important;
    background: color-mix(in srgb, var(--vz-card-bg) 91%, transparent) !important;
    box-shadow: 0 .45rem 1.4rem rgba(16, 37, 68, .045), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.page-content .erp-hero-signal > i {
    display: grid !important;
    width: 2.65rem !important;
    height: 2.65rem !important;
    place-items: center;
    border-radius: .72rem !important;
    font-size: 1.15rem !important;
}

.page-content .erp-hero-signal > span,
.page-content .erp-hero-signal strong,
.page-content .erp-hero-signal small {
    display: block !important;
}

.page-content .erp-hero-signal strong {
    margin: 0 !important;
    color: var(--vz-heading-color) !important;
    font-size: 1.25rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

.page-content .erp-hero-signal small {
    margin-top: .32rem !important;
    color: var(--vz-secondary-color) !important;
    font-size: var(--erp-type-micro) !important;
    line-height: 1.2;
    white-space: nowrap;
}

.page-content .erp-hero-weather .erp-weather-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.page-content .erp-hero-weather [data-weather-temperature] {
    display: inline-block;
    margin-right: .2rem;
    font-size: 2.8rem !important;
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.045em;
}

.page-content .erp-hero-weather .erp-weather-unit {
    display: inline-block;
    margin-bottom: .2rem;
    margin-left: .1rem;
    color: var(--vz-heading-color);
    font-size: .9rem;
    font-weight: 700;
}

.page-content .erp-hero-weather [data-weather-condition] {
    margin-top: .55rem !important;
}

.page-content .erp-hero-weather [data-weather-details] {
    display: block;
    margin-top: .3rem;
    color: var(--vz-secondary-color);
    line-height: 1.55;
    word-spacing: .08rem;
}

.page-content .erp-hero-weather .erp-weather-foot {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .85rem;
    padding-top: .75rem;
}

.page-content .erp-hero-weather .erp-weather-foot > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Project travel: the list and editor are distinct cards, matching quick task UI. */
.page-content .erp-project-travel-create-card {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vz-warning) 24%, var(--vz-border-color)) !important;
    box-shadow: 0 .8rem 2.25rem rgba(16, 37, 68, .07) !important;
}

.page-content .erp-project-travel-create-card > .card-header {
    padding: 1.15rem 1.3rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--vz-warning) 13%, var(--vz-border-color));
    background: linear-gradient(135deg, rgba(var(--vz-warning-rgb), .09), color-mix(in srgb, var(--vz-card-bg) 94%, transparent));
}

.page-content .erp-project-travel-create-card .erp-kicker {
    display: inline-flex;
    align-items: center;
    padding: .3rem .55rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--vz-warning) 70%, var(--vz-heading-color));
    background: rgba(var(--vz-warning-rgb), .12);
    font-size: var(--erp-type-micro);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page-content .erp-project-travel-create-card > .card-body.erp-project-travel-form {
    padding: 1.35rem !important;
    background: var(--vz-card-bg) !important;
}

.page-content .erp-project-travel-create-card .row {
    --vz-gutter-y: 1.15rem;
}

.page-content .erp-project-travel-create-card .form-label {
    margin-bottom: .45rem;
    font-size: var(--erp-type-micro);
    font-weight: 700;
}

.page-content .erp-project-travel-create-card .form-text {
    margin-top: .42rem;
}

.page-content .erp-project-travel-create-card .erp-travel-picker-map {
    min-height: 310px;
    margin-top: .15rem;
    overflow: hidden;
    border: 1px solid var(--vz-border-color);
    border-radius: .85rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

/* Reusable image picker: hide the native input and expose one deliberate action. */
.page-content input.erp-media-editor-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.page-content .erp-media-picker {
    display: grid !important;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100%;
    min-height: 86px;
    padding: .95rem 1rem !important;
    border: 1px dashed color-mix(in srgb, var(--vz-primary) 34%, var(--vz-border-color)) !important;
    border-radius: .9rem !important;
    background: linear-gradient(145deg, rgba(var(--vz-primary-rgb), .055), color-mix(in srgb, var(--vz-light) 42%, var(--vz-card-bg))) !important;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-content .erp-media-picker:hover,
.page-content .erp-media-picker:focus {
    border-color: rgba(var(--vz-primary-rgb), .55) !important;
    outline: 0;
    box-shadow: 0 .75rem 2rem rgba(16, 37, 68, .08);
    transform: translateY(-1px);
}

.page-content .erp-media-picker-icon {
    display: grid !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    place-items: center;
    border-radius: .8rem !important;
    color: var(--vz-primary);
    background: rgba(var(--vz-primary-rgb), .11);
    font-size: 1.4rem !important;
}

.page-content .erp-media-picker-copy {
    display: block !important;
    min-width: 0;
}

.page-content .erp-media-picker-copy strong,
.page-content .erp-media-picker-copy small {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-content .erp-media-picker-copy strong {
    color: var(--vz-heading-color);
    font-size: .78rem !important;
    font-weight: 700;
}

.page-content .erp-media-picker-copy small {
    margin-top: .32rem;
    color: var(--vz-secondary-color);
    font-size: var(--erp-type-micro) !important;
}

.page-content .erp-media-picker > .btn {
    display: inline-flex !important;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
    border-radius: .65rem;
    white-space: nowrap;
}

/* Choices.js: keep searchable options inside the field and above card boundaries. */
.page-content .choices {
    position: relative !important;
    min-width: 0;
}

.page-content .choices.is-open {
    z-index: 1095 !important;
}

.page-content .choices__list--dropdown,
.page-content .choices__list[aria-expanded] {
    inset-inline: 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: calc(100vw - 2rem) !important;
    padding: .4rem !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--vz-primary) 20%, var(--vz-border-color)) !important;
    border-radius: .78rem !important;
    background: var(--vz-card-bg) !important;
    box-shadow: 0 1.15rem 2.8rem rgba(16, 37, 68, .18) !important;
}

.page-content .choices__list--dropdown > .choices__list,
.page-content .choices__list[aria-expanded] > .choices__list {
    box-sizing: border-box;
    max-height: 19rem !important;
    padding: .2rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

.page-content .choices__list--dropdown .choices__item--choice,
.page-content .choices__list[aria-expanded] .choices__item--choice {
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 .12rem !important;
    padding: .72rem .9rem !important;
    overflow: visible !important;
    border-radius: .5rem;
    clip: auto !important;
    clip-path: none !important;
    text-align: start !important;
    text-indent: 0 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    transform: none !important;
}

.page-content .choices__list--dropdown .choices__item--choice::after,
.page-content .choices__list[aria-expanded] .choices__item--choice::after {
    display: none !important;
    content: none !important;
}

.page-content .choices__input {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 .4rem !important;
    border-radius: .55rem !important;
}

/* Keyboard users must always see where the next action will happen. */
.erp-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 100050;
    padding: .7rem 1rem;
    border-radius: .7rem;
    background: #102544;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(15, 35, 64, .24);
    transform: translateY(calc(-100% - 1rem));
    transition: transform .16s ease;
}

.erp-skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

#erp-main-content:focus,
#erp-platform-content:focus,
#erp-auth-content:focus,
#document-signing-content:focus {
    outline: 0;
}

.page-content :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.app-menu :is(a, button):focus-visible,
#page-topbar :is(a, button, input):focus-visible {
    outline: 3px solid rgba(var(--vz-primary-rgb), .24) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--vz-primary) !important;
}

@media (pointer: coarse) {
    :is(.page-content, #page-topbar, .app-menu) :is(.btn, button, [role="button"]) {
        min-height: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .page-content .erp-hero-signal {
        flex: 1 1 145px;
        min-width: 0;
    }

    .page-content .erp-media-picker {
        grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    }

    .page-content .erp-media-picker-icon {
        width: 2.8rem !important;
        height: 2.8rem !important;
    }

    .page-content .erp-media-picker > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .page-content .choices__list--dropdown,
    .page-content .choices__list[aria-expanded] {
        max-width: 100% !important;
    }
}

/* Equal-height families: repeated cards stay aligned within each Bootstrap row. */
.page-content .row > [class*="col-"]:has(> :where(
    .erp-setting-switch,
    .erp-setting-choice,
    .erp-settings-kpi,
    .erp-security-note,
    .erp-planning-setting-metric,
    .erp-stat-card,
    .erp-glass-kpi,
    .erp-audit-kpi,
    .erp-role-card,
    .erp-source-card,
    .erp-brand-asset-card,
    .erp-expense-file-card,
    .erp-media-card
)) {
    display: flex;
    min-width: 0;
    align-items: stretch;
}

.page-content .row > [class*="col-"] > :where(
    .erp-setting-switch,
    .erp-setting-choice,
    .erp-settings-kpi,
    .erp-security-note,
    .erp-planning-setting-metric,
    .erp-stat-card,
    .erp-glass-kpi,
    .erp-audit-kpi,
    .erp-role-card,
    .erp-source-card,
    .erp-brand-asset-card,
    .erp-expense-file-card,
    .erp-media-card
) {
    width: 100%;
    height: 100%;
}

.page-content .erp-setting-switch {
    width: 100%;
    height: 5.35rem;
    min-height: 5.35rem;
}

.page-content .erp-setting-switch > .flex-grow-1 {
    min-width: 0;
}

.page-content .erp-setting-switch .form-check-label {
    display: block;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-content .erp-setting-switch p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .2rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.page-content .erp-setting-switch > .form-switch,
.page-content .erp-setting-switch > .erp-setting-choice-icon {
    flex: 0 0 auto;
}

.page-content .erp-security-note,
.page-content .erp-planning-setting-metric {
    min-height: 5.35rem;
}

@media (max-width: 575.98px) {
    .page-content .erp-setting-switch {
        height: auto;
        min-height: 5.35rem;
    }

    .page-content .erp-setting-switch .form-check-label {
        white-space: normal;
    }
}