/* Palette and type are forcorp.com's: #034799 primary, #3c75ba link, #1c3e65 navy,
   #555 body copy, #F5F7FA page background; Rokkitt for text, Poppins for buttons. */
body { font-family: 'Rokkitt', Cambria, Georgia, serif !important; font-size: 20px; color: #555555 !important; line-height: 1.3 !important; letter-spacing: -0.3px !important; }

/* ---- Page frame ------------------------------------------------------------ */

/* Flat white bar, bookended with the footer by the same hairline. Upstream fixes it
   to the viewport and offsets the content by a guessed height; in normal flow the
   height can follow the logo instead. */
#app-bar { position: static !important; background: white; padding: 20px 10px; box-shadow: none !important; border-bottom: 1px solid #e5e8ee; }
#app-bar nav, #app-bar .mdc-top-app-bar__section { padding: 0; }
#app-bar .mdc-top-app-bar__row { min-height: 0; height: auto; }
#app-bar .cas-brand a { display: flex; }
img.cas-logo { max-width: 210px; height: auto !important; }
.mdc-top-app-bar--fixed-adjust { padding-top: 0; }

.mdc-drawer-app-content { background: #F5F7FA; padding: 24px 0 40px; }
/* CAS 8 blurs and fades the content in on every page load; nothing else at Forcorp
   transitions between pages, so pages simply appear. */
.fade-in { animation: none !important; }

/* Content pages get a readable measure; the form pages share one narrow width */
#main-content { max-width: 960px; }
#main-content:has(#loginForm), #main-content:has(#reset), #main-content:has(#pwdmain) { max-width: 560px; }

.cas-footer { background: white; border-top: 1px solid #e5e8ee; padding: 20px 0 !important; }
#copyright { font-size: 15px; color: #888888; }
/* The "Apereo CAS" link is hardcoded in the footer fragment rather than driven by
   the poweredBy message, so hiding it is the only way short of forking. */
#poweredBy { display: none !important; }

/* ---- Cards ----------------------------------------------------------------- */

/* One card treatment everywhere: blue top accent, hairline border, no elevation. */
.mdc-card.card { background: #fff; border: 1px solid #e1e5ea; border-top: 8px solid #034799; border-radius: 3px; box-shadow: none !important; }
/* Content cards (logout, landing) at the login card's inset; their inner card-body
   would otherwise add Bootstrap's own padding on top. */
.mdc-card.card.p-4 { padding: 32px 40px !important; }
.mdc-card.card.p-4 > .card-body { padding: 0; }
#loginForm { border: none !important; font-size: 20px; }
/* Upstream stacks card-body padding on the reset form's own p-4 */
#reset .card-body { padding: 16px 0 0; }
#reset .cas-field.p-4 { padding: 16px 40px 0 !important; }
#reset .mdc-card__actions_actions { padding: 28px 40px 32px !important; }

/* Separators we have no use for */
#loginForm hr { display: none; }

/* ---- Typography ------------------------------------------------------------ */

#main-content h2, #main-content h3 { font-family: 'Rokkitt', Cambria, Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #444; margin: 0 0 20px; }
/* Headings on the narrow form cards are centred, as on the login card */
#reset h3, #main-content:has(.w-lg-66) h2, #main-content:has(.w-lg-66) h3 { text-align: center; }
.card-body > p, .card > p { margin: 0 0 12px; }

.mdc-drawer-app-content a, .cas-footer a { color: #3c75ba; text-decoration: none; transition: color .2s; }
.mdc-drawer-app-content a:hover, .cas-footer a:hover { color: #034799; text-decoration: underline; text-underline-offset: 2px; }

/* Decorative icons: page headings, the submit button and the password-reset link.
   Functional icons (caps-lock warning, field validation) are left alone. */
h2 > i,
#submitBtn > i,
#pmlinks .mdi { display: none; }

/* ---- Form fields ----------------------------------------------------------- */

/* Login and password-reset fields. Their labels sit above the input rather than
   floating inside it, so these rules supply what MDC otherwise would. */
.cas-field label { display: block; font-size: 18px; color: #555; margin-bottom: 0.3em; }
.cas-field input.form-control { width: 100%; padding: 0.6em 0.7em; font-size: 18px; font-family: inherit; color: #333 !important; background: #fff; border: 1px solid #c4ccd6; border-radius: 3px; }
.cas-field input.form-control:focus { border-color: #034799; outline: 3px solid rgba(3, 71, 153, 0.15); }
.mdc-floating-label, .mdc-form-field { font-family: 'Rokkitt', Cambria, Georgia, serif !important; font-size: 18px; }

/* Even rhythm between fields. Bootstrap's spacing utilities are !important. */
#fm1 .cas-field.my-3 { margin: 0 0 20px !important; }
#fm1 .form-check { padding-left: 0; margin: 4px 0 24px; min-height: 0; }
#fm1 .form-check p:empty { display: none; }

/* Remember Me. The label is a block by default, so it stacks under the switch. */
#rememberMeSwitchButtonPanel { display: flex; align-items: center; gap: 0.6em; }
#rememberMeSwitchButtonPanel label { display: inline; margin: 0; font-size: 18px; color: #555; }
/* The tick/dash glyphs in the handle read as status icons */
.mdc-switch__icons { display: none; }
.mdc-switch--selected .mdc-switch__track::after { background: #034799 !important; }
.mdc-switch--selected .mdc-switch__handle::after { background: #1c3e65 !important; }

/* ---- Buttons --------------------------------------------------------------- */

/* Square, flat buttons in forcorp.com's style, sized to the 44px inputs, with none of
   MDC's elevation, scaling or coloured drop-shadow. Keep this scoped to .mdc-button:
   a bare `button` selector also catches the Remember Me switch. */
.mdc-button { height: 44px; padding: 0 24px !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; font-family: 'Poppins', Arial, Helvetica, sans-serif !important; font-size: 14px; font-weight: 700 !important; letter-spacing: 0.5px; transition: background-color .2s, color .2s, border-color .2s; }
.mdc-button:hover, .mdc-button:focus-visible { transform: none !important; box-shadow: none !important; }
.drop-button::before, .drop-button::after { display: none; }

button.mdc-button--raised, button.mdc-button--unelevated { background: #034799 !important; color: #fff !important; }
button.mdc-button--raised:hover, button.mdc-button--unelevated:hover,
button.mdc-button--raised:focus-visible, button.mdc-button--unelevated:focus-visible { background: #1c3e65 !important; }

/* Secondary buttons. Upstream writes "mdc-button--outline", not the MDC spelling
   "mdc-button--outlined"; match what the templates emit. */
.mdc-button--outline { background: white !important; color: #1c3e65 !important; border: 1px solid #c4ccd6 !important; }
.mdc-button--outline:hover, .mdc-button--outline:focus-visible { background: #F5F7FA !important; border-color: #034799 !important; }

.mdc-button:focus-visible, a:focus-visible { outline: 3px solid rgba(3, 71, 153, 0.25); outline-offset: 2px; }

/* Login: the reset link sits on the submit button's row, right-aligned. It is a
   sibling of the form rather than of the button, so it is pulled up by the button's
   height; this holds while the reset link is the only pmlinks entry. */
#loginForm #submitBtn { min-width: 140px; margin: 8px 0 0; }
#pmlinks { margin: -44px 0 0 !important; text-align: right; font-size: 16px; line-height: 44px; }
#pmlinks br { display: none; }

/* ---- Password reset flow --------------------------------------------------- */

/* The change-password, instructions-sent and update-success cards are two thirds of
   the page upstream; give them the login card's width and padding instead. */
#main-content:has(.w-lg-66) { max-width: 560px; }
.mdc-card.w-lg-66 { width: 100% !important; padding: 32px 40px !important; }

#passwordManagementForm .cas-field.my-3 { margin: 0 0 20px !important; }
#passwordManagementForm .cas-field.form-group:last-child { margin-top: 8px; }
/* The policy and mismatch notices are empty until they fire; let the banners carry
   the spacing so the empty state adds none. */
#password-strength-msg, #password-strength-notes { margin: 0 !important; }
#password-strength-msg .banner, #password-strength-notes .banner { margin: 0 0 20px !important; }
button.mdc-button--raised:disabled { background: #9db3d1 !important; cursor: not-allowed; }

/* Strength meter, reduced to "Strength: Weak" in a state colour. The MDC bar behind it
   never gets a width from passwordMeter.js, and the alert glyph duplicates the colour. */
#password-strength-icon, #strengthProgressBar .mdc-linear-progress { display: none; }
#passwordManagementForm .cas-field.flex-column { flex-direction: row !important; align-items: baseline; gap: 6px; }
#strengthProgressBar { display: inline; height: auto; background: none; }
#progress-strength-indicator { width: auto !important; text-align: left; background: none; font-weight: 700; }
.progress-bar-danger #progress-strength-indicator { color: #c0392b; }
.progress-bar-warning #progress-strength-indicator { color: #b7791f; }
.progress-bar-success #progress-strength-indicator { color: #2e7d32; }

/* Info banners (existing-session notice on the login form), in the same idiom */
.banner-info { background: #eef4fb !important; border: 1px solid #cfdcee !important; border-left: 4px solid #3c75ba !important; color: #1c3e65 !important; border-radius: 3px !important; box-shadow: none !important; padding: 12px 16px !important; margin: 0 0 20px; font-size: 18px; }
.banner-info p { margin: 0; }

/* Warning banners (password suggestions), in the same idiom as .banner-danger */
.banner-warning { background: #fff8e6 !important; border: 1px solid #f0dca0 !important; border-left: 4px solid #e0a800 !important; color: #7a5a00 !important; border-radius: 3px !important; box-shadow: none !important; padding: 12px 16px !important; font-size: 18px; }
.banner-warning .mdi { color: #e0a800 !important; }

/* Reveal button attached to the field. The generate button fills both fields with
   characters nobody can read back, so it is hidden. */
#pwdmain .generate-password { display: none; }
#pwdmain .reveal-password { height: 44px; width: 44px; min-width: 0; padding: 0 !important; margin: 0; background: #fff !important; color: #555 !important; border: 1px solid #c4ccd6 !important; border-left: 0 !important; border-radius: 0 3px 3px 0 !important; }
#pwdmain .reveal-password:hover { background: #F5F7FA !important; color: #034799 !important; }
#pwdmain .reveal-password .mdi { font-size: 20px; }
#pwdmain #password { border-radius: 3px 0 0 3px; }

/* ---- Notices --------------------------------------------------------------- */

/* Justified by default, which opens rivers at this font size */
#securityNotice, .security-notice { text-align: left; font-size: 16px; color: #777; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #eee; }

/* Error messages. Upstream draws a "!" glyph before the heading via ::before. */
.banner-danger { background: #fbeeee !important; border: 1px solid #f0c6c6 !important; border-left: 4px solid #e64b4b !important; color: #8a2a2a !important; border-radius: 3px !important; box-shadow: none !important; padding: 14px 16px !important; margin: 0 0 20px; }
.banner-danger h1:before, .banner-danger h2:before, .banner-danger h3:before, .banner-danger h4:before, .banner-danger h5:before { content: none; }
#main-content .banner-danger h2 { font-size: 18px; color: inherit; margin: 0 0 6px; text-align: left; }
.banner-danger p { font-size: 18px; margin: 0; }

/* ---- Application launcher on the generic success page ---------------------- */

.applications-label { font-family: 'Poppins', Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #888; margin: 32px 0 12px !important; }
#applications { margin: 0; }
/* The accent bar belongs to the tile, not the title, so it spans the full height
   with the title top-aligned */
.application { display: flex; align-items: flex-start; border: 1px solid #ddd; border-left: 5px solid #034799; border-radius: 3px; margin-bottom: 16px; text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.application:last-child { margin-bottom: 0; }
.application:hover { border-color: #3c75ba; border-left-color: #034799; box-shadow: 0 2px 8px rgba(3, 71, 153, 0.08); }
/* Product names keep their own casing (eLands, eTracker) rather than forcorp.com's
   uppercase headings */
.application-title { flex: 0 0 240px; padding: 20px; color: #034799; font-family: 'Poppins', Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-align: left; transition: color .2s; }
.application:hover .application-title { color: #3c75ba; }
/* The tile is a link; keep the description in body grey so only the title reads as one */
.application-description { flex: 1; padding: 20px 8px 20px 20px; font-size: 18px; line-height: 1.35; text-align: left; color: #555; }
/* Chevron as the click affordance */
.application::after { content: "\203A"; align-self: center; padding: 0 20px; font-size: 34px; line-height: 1; color: #c4ccd6; transition: color .2s; }
.application:hover::after { color: #3c75ba; }
@media (max-width: 767.99px) {
    .application { flex-direction: column; }
    .application-title { flex: none; padding-bottom: 0; }
    .application-description { padding-right: 20px; }
    .application::after { display: none; }
}