/* Kelmer Procurement brand — warm charcoal shell (Kelmer browns/greys; not teal/maritime) */
:root {
    --kelmer-grey: #6b6563;
    --kelmer-yellow: #ffab2e;
    --site-nav-accent: var(--kelmer-yellow);
    --site-shell-warm-950: #23201e;
    --site-shell-warm-900: #2e2a27;
    --site-shell-warm-800: #3a3532;
    --site-shell-warm-700: #48423e;
    --site-page-bg: #f5f4f1;
    --site-page-elevated: #fdfcfa;
    --site-shell-border-soft: rgba(58, 53, 50, 0.14);
    --site-shell-shadow: 0 4px 18px rgba(35, 32, 30, 0.07);
    --site-primary: #5a524c;
    --site-primary-hover: #433c38;
    --site-primary-border: #4a4340;
}

body {
    font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--site-page-bg);
    color: #252423;
}

.text-kelmer-yellow {
    color: var(--kelmer-yellow) !important;
}

.text-kelmer-grey {
    color: var(--kelmer-grey) !important;
}

.xbl-demo-account-card {
    z-index: 1040;
    max-width: 22rem;
    pointer-events: none;
}

.xbl-demo-account-card-inner {
    pointer-events: auto;
    border-left: 4px solid var(--kelmer-yellow);
    background: var(--site-page-elevated);
}

/* Wider main layout: navbar and page body both use .container.cntMain */
@media (min-width: 1200px) {
    .container.cntMain {
        max-width: 1420px;
    }
}
@media (min-width: 1600px) {
    .container.cntMain {
        max-width: 1580px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--kelmer-grey);
}

.alert h1,
.alert h2,
.alert h3,
.alert h4 {
    color: #fff !important;
}

.tit_pag i {
    margin-left: 5px;
    font-size: var(--xbl-fs-display);
    vertical-align: bottom;
}

.tit_pag {
    margin-bottom: 2px;
    color: var(--kelmer-grey);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.mainnav {
    margin-bottom: 20px;
}

.site-navbar-top {
    color: rgba(255, 255, 255, 0.94);
    background-color: var(--site-shell-warm-800);
    background-image: linear-gradient(
        108deg,
        var(--site-shell-warm-950) 0%,
        var(--site-shell-warm-700) 46%,
        var(--site-shell-warm-900) 100%
    );
    border-bottom: 3px solid var(--kelmer-yellow);
    box-shadow: 0 4px 20px rgba(35, 32, 30, 0.2);
}

.site-navbar-top .site-nav-logo-kelmer {
    display: block;
    max-height: 40px;
    width: auto;
}

.site-nav-xeneta:hover {
    color: var(--site-nav-accent) !important;
}

.site-nav-logo-xeneta {
    display: block;
    height: 28px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}

/* Main nav strip: warm paper, not flat Bootstrap white */
.site-navbar-main {
    --bs-navbar-color: var(--kelmer-grey);
    background-color: var(--site-page-elevated) !important;
    border-color: var(--site-shell-border-soft) !important;
    box-shadow: var(--site-shell-shadow);
}

.site-navbar-main .navbar-toggler {
    border-color: rgba(107, 101, 99, 0.35);
}

.nav-eurusd {
    font-variant-numeric: tabular-nums;
}

.nav-support-btn:hover,
.nav-support-btn:focus {
    color: var(--site-nav-accent) !important;
}

.site-navbar-brand {
    color: var(--site-nav-accent) !important;
    font-size: var(--xbl-fs-lead);
}

.site-navbar .nav-link {
    color: var(--kelmer-grey);
    font-size: var(--xbl-fs-reduced);
    --bs-nav-link-padding-x: 0.55rem;
    --bs-nav-link-padding-y: 0.35rem;
    border-radius: 0.25rem;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #352f2c;
    background-color: rgba(107, 101, 99, 0.09);
    font-size: var(--xbl-fs-reduced);
}

.site-navbar .nav-link.active {
    color: #2a2624;
    font-size: var(--xbl-fs-reduced);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--kelmer-yellow);
    background-color: rgba(255, 171, 46, 0.08);
}

/* Touch-sized defaults only; keep .form-control-sm / .form-select-sm compact (tables, pager, filters). */
.form-control:not(.form-control-sm) {
    font-size: var(--xbl-fs-body) !important;
    padding: 0.75rem !important;
    min-height: 44px !important;
    color: #2227af;
}

/*
 * Native <select> paints the caption in the content box; fixed height + 0.75rem vertical padding
 * left less room than one line-height, so text sat high/clipped. Fit padding to 44px − border − lh(1.5).
 */
.form-select:not(.form-select-sm) {
    font-size: var(--xbl-fs-body) !important;
    padding: 0.5625rem 0.75rem !important;
    min-height: 44px !important;
    height: 44px;
    line-height: 1.5;
    color: #2227af;
}

/* Bundles admin: composition search-and-add picker */
.admin-bundles-composition-search-wrap .admin-bundles-composition-results {
    z-index: 1080;
    max-height: 16rem;
    overflow-y: auto;
}

.admin-bundles-composition-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem;
    font-weight: normal;
}

.admin-bundles-composition-chip .btn-close {
    font-size: 0.55rem;
}

.min-h-chips {
    min-height: 1.75rem;
}

/* Packages admin: bundle filter dropdown */
.admin-packages-bundle-field .ui-filter-dropdown-caption {
    font-size: var(--xbl-fs-body) !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.admin-packages-bundle-field .ui-filter-dropdown-toggle {
    min-height: 44px;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem !important;
    font-size: var(--xbl-fs-body) !important;
    line-height: 1.5;
    color: #2227af;
}

.admin-packages-bundle-meta {
    font-weight: 600;
    color: var(--site-primary);
}

.form-group label,
.form-group .form-label {
    font-size: var(--xbl-fs-body) !important;
    font-weight: 600;
    align-self: center;
    justify-self: center;
}

.form-group {
    margin-bottom: 15px;
}

.nav-tabs {
    font-size: var(--xbl-fs-body);
    font-family: "Source Sans 3", system-ui, sans-serif;
    border-bottom: 1px solid var(--site-shell-border-soft);
}

.btn-primary {
    color: #fff;
    background-color: var(--site-primary);
    border-color: var(--site-primary-border);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--site-primary-hover);
    border-color: var(--site-primary-hover);
}

/* Add CTAs: blue (toolbar primary is otherwise brand brown) */
.btn-primary.bsgt-intro-action-btn,
#freight-open-add-lane.btn-primary,
#freight-add-lane-submit.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0a58ca;
}

.btn-primary.bsgt-intro-action-btn:hover,
.btn-primary.bsgt-intro-action-btn:focus,
#freight-open-add-lane.btn-primary:hover,
#freight-open-add-lane.btn-primary:focus,
#freight-add-lane-submit.btn-primary:hover,
#freight-add-lane-submit.btn-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a53be;
}

.btn-primary.bsgt-intro-action-btn:active,
#freight-open-add-lane.btn-primary:active,
#freight-add-lane-submit.btn-primary:active {
    color: #fff;
    background-color: #0a58ca;
    border-color: #0a53be;
}

@media (max-width: 768px) {
    .nav-item a.nav-link {
        font-size: var(--xbl-fs-nav-touch) !important;
        --bs-nav-link-padding-x: 1rem !important;
        --bs-nav-link-padding-y: 1rem !important;
    }
}

#elapsed {
    font-size: var(--xbl-fs-reduced);
    color: #6c757d;
}

.hidden {
    display: none;
}