/* ===========================================================================
   Ascendant CRM — Keycloak login theme (crm-v2 / crm-v3)
   Consolidated from the CRM login design (style-login.css + style.css :root).
   Self-contained: bundles Gotham + Font Awesome spinner, no external CDNs,
   grid replaced with flexbox.
   =========================================================================== */

/* --- Theme colors (default domain) ------------------------------------------
   Per-domain overrides in the original app: #19ae63, #f04e30. Defaults: */
:root {
    --primary-theme-color:   #f1c247;  /* gold — button bg, loader bg */
    --secondary-theme-color: #6897ed;  /* blue — button hover */
}

/* --- Fonts ------------------------------------------------------------------ */
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Medium.woff2') format('woff2'), url('../fonts/Gotham-Medium.woff') format('woff'); font-weight:500;    font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Book.woff2')   format('woff2'), url('../fonts/Gotham-Book.woff')   format('woff'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Bold.woff2')   format('woff2'), url('../fonts/Gotham-Bold.woff')   format('woff'); font-weight:bold;   font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Thin.woff2')   format('woff2'), url('../fonts/Gotham-Thin.woff')   format('woff'); font-weight:100;    font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Light.woff2')  format('woff2'), url('../fonts/Gotham-Light.woff')  format('woff'); font-weight:300;    font-style:normal; font-display:swap; }

@font-face { font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:block; }

.fa { display:inline-block; font:normal normal normal 14px/1 'FontAwesome'; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.fa-spinner:before { content:"\f110"; }

/* --- Base reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { font-size:100% !important; font-family:'Gotham', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
body { margin:0; }

/* --- Full-screen loading overlay -------------------------------------------- */
.loader {
    position:fixed; left:0; top:0;
    width:100%; height:100%;
    z-index:9999;
    background:var(--primary-theme-color);
    opacity:.9; color:#000;
    font-size:50px; text-align:center;
}
.loader i.fa.fa-spinner {
    transform:translate(-50%,-50%);
    position:absolute; top:50%; left:50%;
}

/* --- Layout (flexbox replacement for the Bootstrap grid) -------------------- */
.cf  { width:100%; padding:0 15px; }
.row-center {
    display:flex; flex-wrap:wrap;
    align-items:center; align-content:center;
    min-height:100vh;
}
.col-half {
    position:relative;
    flex:0 0 50%; max-width:50%;
    padding:0 15px;
}

/* --- Outer section: white bg + rounded image panel on the right half -------- */
.login-outer {
    width:100%;
    background:#fff;
    background-size:contain;
    min-height:100vh;
    position:relative;
    background-position:right top;
}
.login-outer::after {
    position:absolute;
    right:24px; top:0; bottom:0;
    height:95%; width:50%;
    background:url(../img/login-background.jpg) no-repeat right top;
    background-size:cover;
    content:"";
    margin:auto;
    border-radius:24px;
}

/* --- Centered card ---------------------------------------------------------- */
.login-container { margin:auto; width:490px; max-width:100%; }
.login-part {
    float:left; width:100%;
    background:#fff;
    padding:40px 68px 50px;
    z-index:2; position:relative;
    text-align:center;
}
.login-part img { max-width:100%; height:auto; }
.login-inner { float:left; width:100%; text-align:left; }
.login-inner h1 { margin:30px 0 10px; color:#212129; }
.login-inner label {
    width:100%; font-size:1rem; color:#131313;
    font-weight:400; margin-bottom:8px; display:block;
}

/* --- Inputs ----------------------------------------------------------------- */
.login-inner input,
.login-inner select {
    min-height:45px !important;
    line-height:22.5px !important;
    width:100% !important;
    border:1px solid #c9c9c9 !important;
    margin:0 0 10px;
    padding:10px;
    color:rgba(88,88,88,1) !important;
    border-radius:12px !important;
    -webkit-text-fill-color:rgba(88,88,88,1) !important;
    -webkit-appearance:none; -moz-appearance:none;
    font-family:'Gotham', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size:0.825rem !important;
}
@media only screen and (min-device-width:300px) and (max-device-width:1966px) and (-webkit-min-device-pixel-ratio:2) {
    .login-inner input,
    .login-inner select { padding:10px 10px 0; }
}
.has-error { border:1px solid #b10101 !important; }

/* --- Forgot-password row ---------------------------------------------------- */
.forget-password { display:inline-block; width:100%; }
.forget-password a { color:#3d8ef9; font-size:13px; }

/* --- Submit button ---------------------------------------------------------- */
.login-inner button {
    border:1px solid var(--primary-theme-color) !important;
    background:var(--primary-theme-color);
    opacity:1 !important;
    border-radius:10px !important;
    font-weight:700 !important;
    color:#383838 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    height:calc(1.5em + 0.69rem + 15px) !important;
    line-height:calc(1.5em + 0.69rem + 15px) !important;
    width:100%; padding:0;
    cursor:pointer;
}
.login-inner button:hover {
    border:1px solid var(--secondary-theme-color) !important;
    color:#fff !important;
    background:var(--secondary-theme-color) !important;
    text-decoration:none !important;
    box-shadow:none !important;
}
.login-inner p { margin:10px 0 0 0; font-size:1rem; }
.login-inner p a { color:#3f8df9; text-decoration:underline; }

/* --- Keycloak error banner -------------------------------------------------- */
.kc-feedback {
    width:100%;
    background:#fdecea;
    border:1px solid #f5c2c0;
    color:#b10101;
    border-radius:12px;
    padding:10px 14px;
    margin:0 0 14px;
    font-size:0.85rem;
    text-align:left;
}

/* --- Alert box (Bootstrap 4 .alert / .alert-danger; error inside #spanUsername) --- */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    text-align: left;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-danger hr { border-top-color: #f1b0b7; }
.alert-danger .alert-link { color: #491217; }

/* --- Bootstrap utility shims (only the ones the markup uses) ---------------- */
.mb-3 { margin-bottom:1rem !important; }
.mb-0 { margin-bottom:0 !important; }
.my-3 { margin-top:1rem !important; margin-bottom:1rem !important; }
.d-block { display:block !important; }
.text-black-50 { color:rgba(0,0,0,.5) !important; }
.text-dark { color:#212529 !important; }
.text-right { text-align:right !important; }
.fw-semibold { font-weight:600 !important; }

/* --- Mobile: image becomes full-bleed background, card full width ----------- */
@media (max-width:768px) {
    .col-half { flex:0 0 100%; max-width:100%; }
    .login-outer::after {
        right:0; top:0; bottom:0;
        height:100%; width:100%;
        border-radius:0;
    }
    .login-container { width:100%; }
    .login-part { padding:40px; }
    .login-inner p { font-size:12px; text-align:center; padding-top:10px; }
}