/* LFCWW Connect portal – pieces only the CMS version has (account menu, messages, video cards, photos). */

/* account menu in the top bar */
.avatar .av-in { font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.pop-user { min-width: 240px; }
.pop-user .pop-mail { padding: 0 10px 8px; margin-top: -4px; color: var(--muted); font-size: 12px; word-break: break-all; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pop-user a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.pop-user a:hover { background: var(--ground); }
.pop-user a .i { width: 16px; height: 16px; color: var(--ac); }

/* success / error messages (session flash) */
.content > .alert { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; font-weight: 600; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.content > .alert-success { color: #1f6f45; background: #eef8f1; box-shadow: 0 0 0 1px rgba(47, 163, 107, .25); }
.content > .alert-error { color: #8a0b1f; background: #fbeef0; box-shadow: 0 0 0 1px rgba(179, 18, 43, .25); }
.content > .alert-info { color: var(--ink-2); }

/* calendar: nothing in the database for this month */
.cal-empty { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ground); color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }

/* news photos */
.n-card .n-img { position: relative; width: calc(100% + 36px); margin: -18px -18px 6px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px 20px 0 0; }
.article-img { width: 100%; margin: 18px 0 4px; border-radius: 18px; aspect-ratio: 16 / 9; object-fit: cover; }

/* training video cards */
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 14px; }
.vid { display: flex; flex-direction: column; gap: 6px; }
.vid[hidden] { display: none; }
.vid-th { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--deep) center / cover no-repeat; color: var(--hl); box-shadow: 0 10px 22px -16px rgba(43, 29, 25, .6); transition: transform .2s; }
.vid:hover .vid-th { transform: translateY(-3px); }
.vid-th .i { width: 34px; height: 34px; }
.vid-th em { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font: 700 11px var(--sans); font-style: normal; }
.vid-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--ac); }
.vid b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.vid small { color: var(--muted); font-size: 12px; }

/* help desk card */
.help-hours { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--ground); color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }

/* pages kept from the older design: let them sit on the new cream ground */
.legacy { background: transparent; }
.legacy .main.profile-main { padding: 14px 0 0; }

/* ---------- sign-in, forgot and reset pages ---------- */
.auth-page { min-height: 100vh; }
.auth-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; max-width: 1240px; margin: 0 auto; }
.auth-wrap > main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 34px; background: none; box-shadow: none; }
.auth-top .brand { display: flex; align-items: center; gap: 10px; }
.auth-top .brand img { width: 40px; height: 40px; object-fit: contain; }
.auth-top .bn { display: flex; flex-direction: column; line-height: 1.15; }
.auth-top .bn b { font-size: 16px; font-weight: 800; }
.auth-top .bn small { color: var(--muted); font-size: 12px; }
.auth-art::after { background: linear-gradient(180deg, rgba(91, 10, 30, .55), rgba(58, 6, 20, .9)); }
.auth-card .alert { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; background: var(--ground); color: var(--ink-2); }
.auth-card .alert .i { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.auth-card .alert-error { background: #fbeef0; color: #8a0b1f; }
.auth-card .alert-success { background: #eef8f1; color: #1f6f45; }
.auth-card .alert-warn { background: #fff6e5; color: #7a4b00; }
.auth-card form { margin-top: 4px; }
.auth-card .alert + form, .auth-card .ms-btn + .sso-note + form { margin-top: 20px; }
.sso-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.sso-note .i { width: 14px; height: 14px; color: #1f6f45; }
.auth-card .eye { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -6px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.auth-card .eye:hover { background: var(--ground); color: var(--ink); }
.auth-card .eye .i { width: 17px; height: 17px; }
.auth-card .caps { display: none; margin-top: 6px; color: #8a4b00; font-size: 12px; font-weight: 600; }
.auth-card .caps.on { display: block; }
.auth-card .strength { height: 5px; margin-top: 8px; border-radius: 4px; background: var(--ground); overflow: hidden; }
.auth-card .strength i { display: block; width: 0; height: 100%; transition: width .2s, background .2s; }
.auth-card .hint { margin-top: 6px; color: var(--muted); font-size: 12px; }
.auth-card .hint span:not(:empty) { font-weight: 700; color: var(--ink-2); }
.auth-card .spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: authSpin .7s linear infinite; }
.auth-card .loading .spin { display: inline-block; }
.auth-card .ms-btn.loading .ms-logo { display: none; }
.auth-card .loading { pointer-events: none; opacity: .85; }
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 6px 16px 26px; color: var(--muted); font-size: 12.5px; }
.auth-foot a:hover { color: var(--ac-deep); }
@media (max-width: 860px) {
  .auth-top { padding: 14px 16px; }
  .auth-top .btn-ghost span { display: none; }
}
.auth-wrap { min-height: 84vh; } .auth-page > .foot { position: relative; z-index: 1; }