:root {
    /* Crewpr brand palette */
    --crewpr-brand: #1CB2D0;
    --crewpr-brand-hover: #17A4BE;
    --crewpr-text-on-brand: #ffffff;

    /* Camunda EOL banner */
    --eol-banner-bg: #883843;
    --eol-banner-text: #ffffff;
}

/* 1) Hide the old inline SVG logo */
.login-header .login-logo {
    display: none !important;
}

/* 2) Custom header background/logo */
.form-signin .login-header {
    background: url(/images/crewpr-icon.svg) no-repeat center top !important;
    background-size: 300px 60px;
    width: 100%;
    height: 100px;
}

/* 3) Center the app-name under your new logo */
.app-name {
    position: relative;
    text-align: center;
    top: 90%;
}

/* 4) Replace Camunda’s “primary” teal everywhere with Crewpr blue */

/* buttons */


/* links */
a,
.cam-widget-footer a {
    color: black !important;
}

/* header top border */
[cam-widget-header] {
    border-top-color: var(--crewpr-brand) !important;
}

/* progress bars */
.progress-bar,
.cam-progress-bar {
    background-color: var(--crewpr-brand) !important;
}

/* navbar toggle (mobile) bars */
.navbar-toggle .icon-bar {
    background-color: var(--crewpr-brand) !important;
}


/* 5) Camunda EOL banner (functional override) */
[cam-widget-header] .ce-eol-banner {
    background-color: var(--eol-banner-bg);
    color: var(--eol-banner-text);
    text-align: center;
    height: 20px;
    font-size: 0.9em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: none;
}


/* → Custom “Log in” button styling */
.form-signin button[type="submit"].btn.btn-lg.btn-primary {
    /* Base look */
    background-color: var(--crewpr-brand);
    border-color: var(--crewpr-brand);
    color: var(--crewpr-text-on-brand);

    /* Sizing & shape */
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    border-radius: 0.25rem;

    /* Depth & transition */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* → Hover + focus (when not disabled) */
.form-signin
button[type="submit"].btn.btn-lg.btn-primary:not(:disabled):hover,
.form-signin
button[type="submit"].btn.btn-lg.btn-primary:not(:disabled):focus {

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

}