html, body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* PROPORTIONAL SIZING (Steven, 2026-10-09: "Go textbook"). Every size on the portal is in rem - this stylesheet, Bootstrap
   and the shared ones (Shared.Ui; the CRM never sets a root size, so there they are the same pixels as before) - so the
   ROOT size sets the scale of the whole page. It slides with the window: 100% (the browser's own text size, 16px as a
   rule) on a large screen, down to 85% on a small laptop - the width or the height, whichever is the tighter - so the
   page keeps its proportions and only the size changes. 1280 x 720 or less: 85%; about 1440 x 820: 90%; 1920 x 1000
   or more: 100%. Ctrl + still zooms as ever. */
html { font-size: clamp(.85rem, min(.375vw + .55rem, .857vh + .464rem), 1rem); }

a, .btn-link {
    color: #344767;
}

.btn-primary {
    color: #fff;
    background-color: #344767;
    border-color: #344767;
}

/* ---- Login / account look, mirroring live yourvirtualhrm.com ---- */
.vhrm-auth-page {
    position: fixed;
    inset: 0;
    background: url('assets/img/carousel1.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vhrm-auth-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 40, 0.45);
}

.vhrm-auth-card-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26.25rem;
    padding: 1rem;
}

.vhrm-auth-card {
    border-radius: 1rem;
    background: #fff;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

.vhrm-btn {
    background-color: #344767;
    border-color: #344767;
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .6rem 1rem;
    border-radius: .5rem;
}

.vhrm-btn:hover, .vhrm-btn:focus {
    background-color: #2a3a55;
    border-color: #2a3a55;
    color: #fff;
}

.vhrm-link {
    color: #344767;
    text-decoration: none;
    font-size: .9rem;
}

.vhrm-link:hover { text-decoration: underline; }

/* ---- Authenticated portal shell — matches the original Argon layout ---- */
/* The band's bottom padding is the navy between the Dashboard pill / the logo's text and the page
   (Steven, 2026-10-05: "needs a larger border between it and the page"). NOT overflow: hidden - that
   once clipped the account menu, which hangs below the band. */
.portal-hero { background: #08203d; padding: 0.625rem 0 1.25rem; }
/* Logo left, nav on the same row aligned to the logo's bottom. The account icons are pinned to
   the hero's top-right corner and fit within the existing band — no extra height needed. */
.portal-hero-top { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
/* THE LOGO (2026-10-05): assets/img/mainlogo-portal.png - the artwork cut tight out of mainlogo.jpg (which
   carried empty navy all round) and saved at twice this size, so it is sharp; shrinking the big JPEG in
   the browser (and then cropping it with object-fit) turned it soft and jagged. Its bottom edge is the
   bottom of "HR MANAGER", so the Dashboard pill - aligned to the row's bottom - lines up with the text.
   The top margin keeps it where it always sat (the JPEG's empty navy above the artwork). */
.portal-hero-logo { display: block; flex: 0 0 auto; width: 9.4375rem; height: 5.625rem; margin-top: .875rem; }
.portal-hero-top .portal-gbar { margin-bottom: 0; }
.portal-hero-home { display: block; flex: 0 0 auto; }

/* THE CLIENT'S OWN LOGO, on the right beside the welcome (2026-10-05), its bottom on the line of "HR
   MANAGER". Framed as
   the CRM says: Light = a white pill, Dark = a navy pill (white artwork), None = straight on the band (a
   transparent logo). Never taller than our logo; wide ones narrow to fit. */
.client-logo { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0;
               height: 4rem; max-width: 13.75rem; border-radius: .75rem; }
.client-logo img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; }
.client-logo-light { background: #fff; padding: .5rem .875rem; }
.client-logo-dark { background: #12305a; padding: .5rem .875rem; border: 1px solid rgba(255,255,255,.25); }
.client-logo-none { padding: 0; }

/* AN ADMIN'S "VIEW AS" BAR (2026-10-05): across the top, amber, and saying "read only" in words. */
.viewas-bar { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap;
              background: #fff3cd; color: #5c4400; border-bottom: 2px solid #e0b100; padding: .5rem 1rem; font-size: .875rem; }
.viewas-eye { font-style: normal; }
.viewas-exit { border: 1px solid #5c4400; background: #fff; color: #5c4400; border-radius: .375rem; padding: .1875rem .875rem; font: inherit; font-weight: 600; cursor: pointer; }
.viewas-exit:hover { background: #5c4400; color: #fff; }

/* THE RIGHT-HAND GROUP (2026-10-05): the client's logo, then who is signed in and for which client -
   pushed right (margin-left: auto), under their initials, bottoms on the line of "HR MANAGER". A
   comfortable gap between the logo and the words. */
.portal-hero-right { margin-left: auto; display: flex; align-items: flex-end; gap: 1.375rem; min-width: 0; }
/* The small negative margin takes off the space a line box keeps below its letters, so it is the
   LETTERS of the client name that sit level with the bottom of "HR MANAGER". */
.portal-welcome { text-align: right; color: #fff; line-height: 1.2; min-width: 0; max-width: 28.75rem; margin-bottom: -3px; }
.portal-welcome-hi { font-size: 1.15rem; font-weight: 600; }
.portal-welcome-client { font-size: .9rem; color: #b9c9dc; margin-top: 2px; }
.portal-content { background: #f4f5f7; min-height: 55vh; }

/* Account icons pinned to the top-right of the navy hero (messages + SW avatar) */
.portal-icons { position: absolute; top: 0; right: 1.5rem; display: flex; align-items: center; gap: .875rem; z-index: 20; }

/* Messages icon-button with red notification badge */
.icon-btn {
    position: relative; width: 2.375rem; height: 2.375rem; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.35); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.icon-btn:hover { background: rgba(255,255,255,.16); }
.icon-badge {
    position: absolute; top: -3px; right: -3px; min-width: 1.125rem; height: 1.125rem; padding: 0 .25rem;
    background: #d92d20; color: #fff; border-radius: .5625rem; font-size: .6875rem; font-weight: 700;
    line-height: 1.125rem; text-align: center; border: 2px solid #08203d;
}

/* Nav on the navy hero (no white slab): rounded text nav, blue pill = active */
.portal-gbar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.portal-gbar .gb {
    padding: .5rem 1rem; font-size: .875rem; color: #dfe7f0; text-decoration: none;
    border-radius: 1.25rem; white-space: nowrap; transition: background .15s, color .15s;
}
.portal-gbar .gb:hover:not(.active) { background: rgba(255,255,255,.08); color: #fff; }
/* Active = Davidson primary-blue pill */
.portal-gbar .gb.active { background: #005883; color: #fff; font-weight: 600; }
/* Messages nav item — red count badge matching the top-right icon */
.portal-gbar .gb-messages { position: relative; display: inline-flex; align-items: center; gap: .4375rem; }
.portal-gbar .gb-badge {
    min-width: 1.125rem; height: 1.125rem; padding: 0 .25rem; background: #d92d20; color: #fff;
    border-radius: .5625rem; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; text-align: center;
}

/* SW avatar + dropdown — accent-blue circle with a white ring */
.portal-user { position: relative; }
.user-avatar {
    width: 2.375rem; height: 2.375rem; border-radius: 50%; background: #0C7BB8; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem;
    border: 2px solid rgba(255,255,255,.35); cursor: pointer; padding: 0;
}
.user-avatar:hover { background: #0a6ba1; }
.user-menu {
    position: absolute; right: 0; top: calc(100% + .5rem); min-width: 10rem; background: #fff;
    border-radius: .5rem; box-shadow: 0 .375rem 1.25rem rgba(0,0,0,.25); overflow: hidden; z-index: 1050;
    display: none;
}
.user-menu.open { display: block; }
.user-menu a {
    display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; font-size: .8125rem;
    color: #18223B; text-decoration: none;
}
.user-menu a:hover { background: #f0f2f5; }
.user-menu a svg { flex: 0 0 auto; }
/* Logout is a form button (it POSTs), styled exactly like the My Profile link above it - it showed
   as a grey browser button until 2026-10-05. */
.user-menu-logout {
    display: flex; align-items: center; gap: .5rem; width: 100%; padding: .625rem .875rem; margin: 0;
    font: inherit; font-size: .8125rem; line-height: inherit; color: #18223B; text-align: left;
    background: none; border: 0; border-top: 1px solid #eee; border-radius: 0; cursor: pointer;
}
.user-menu-logout:hover { background: #f0f2f5; }
.user-menu-logout svg { flex: 0 0 auto; }

/* Grow the Documents panel - and the right-hand column beside it - down to just above the docked ticker, never
   behind it: a height from the window, content that exceeds it scrolling inside. Their top ≈9.8rem (the header band
   and the page's padding); the ticker's room ≈3.75rem. (In rem since 2026-10-09, so they follow the page's scale.) */
.doc-hub-card { height: calc(100vh - 9.8125rem - 3.75rem); min-height: 20rem; display: flex; flex-direction: column; }
/* Ticker tucked away: both grow down into its space. */
html.news-collapsed .doc-hub-card { height: calc(100vh - 9.8125rem - 1rem); }

/* THE RIGHT-HAND COLUMN (Steven, 2026-10-09: "the talking head and the marketing carousel to shrink proportionally,
   not all on the carousel"; "the gap between the three is about double what it should be"): Simon, the question
   panel and Our Partners as ONE block the Document Templates card's height. The question keeps its own height;
   Simon and the carousel share the rest about 45 / 55, each with a floor (≈11rem, ≈9rem) - below those the page
   scrolls rather than squash them further. 0.75rem between the three (was Bootstrap's 1.5rem). Side by side only (lg
   up); stacked on a narrow screen, each keeps a height of its own. */
.vhm-simon { height: 19.75rem; }
.partners-card { aspect-ratio: 3 / 2; min-height: 8.75rem; }
@media (min-width: 992px) {
    .vhm-col { display: flex; flex-direction: column; gap: .75rem; height: calc(100vh - 9.8125rem - 3.75rem); min-height: 28rem; }
    html.news-collapsed .vhm-col { height: calc(100vh - 9.8125rem - 1rem); }
    .vhm-col > .card { margin-bottom: 0 !important; }
    /* 45 / 55 in the carousel's favour (Steven, 2026-10-09: on a large screen "the talking head is given more space"):
       the slides are about 3:2, Simon's frame needs only about 16:9, so these shares keep both near their own shape. */
    .vhm-col > .vhm-simon { flex: 45 1 0; min-height: 11.25rem; height: auto; }
    .vhm-col > #vhm-card, .vhm-col > .vhm-placeholder { flex: 0 0 auto; }
    .vhm-col > .partners-card { flex: 55 1 0; min-height: 8.75rem; height: auto; aspect-ratio: auto; }
}

/* The Document Templates card (2026-10-05): heading, the folders scrolling in the middle, and the
   "can't find it" line docked at the foot. */
.doc-hub-card > .card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.doc-hub-h { font-size: 1.05rem; font-weight: 700; color: #18223B; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.doc-hub-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.doc-hub-msg { color: #005883; font-size: .95rem; margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid #e6e8ec; flex: 0 0 auto; }
.doc-hub-msg a { color: #005883; text-decoration: underline; }

/* Cards — restore the rounded look Argon gave (border-radius:1rem) now that Argon is dropped */
.card { border-radius: 1rem; border: 0; box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); }
.border-radius-lg { border-radius: .75rem; }
.text-sm { font-size: .875rem; }

/* News ticker: the shared NewsTickerBar's own look - the strip, its label, controls, tuck-away strip and tab - is
   Shared.Ui news-ticker.css since 2026-10-08 (moved there unchanged). What stays here is how these pages make room. */
/* Keep page content clear of the docked ticker (40px height + 8px gap + breathing room) */
body { padding-bottom: 4rem; }
/* Tucked away (html.news-collapsed, set before first paint): the page grows into its space. */
html.news-collapsed body { padding-bottom: .5rem; }

/* Our Partners carousel: the shared PartnersCarousel (Shared.Ui carousel.css, 2026-10-06) fills the card. */
.card-body.p-0 { width: 100%; height: 100%; }

/* Virtual HR Manager - two states (2026-10-06): Simon over the question box in the card, or the conversation
   popped out over the page. Header and input always visible; only the conversation scrolls. */
/* Since 2026-10-09 (Steven: "make it more obvious where you type"): Simon has a card of his own (.vhm-simon), and
   #vhm-card is the panel below him - the bar and the box, as tall as they are - which pops out as before. */
.vhm-simon { display: flex; flex-direction: column; overflow: hidden; background: #fff; }   /* its height: the column, above */
#vhm-card { display: flex; flex-direction: column; overflow: hidden; }
.vhm-head { flex: 0 0 auto; background-color: #08203d; color: #fff; padding: .6875rem .875rem; font-weight: 600; font-size: .9375rem;
            display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
/* Popped out: the ✕ at the bar's right puts it back (an icon, so it says "Close" on hover and to a screen reader). */
.vhm-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; margin: -4px -6px -4px 0;
             padding: 0; border: 0; border-radius: .375rem; background: transparent; color: #fff; font-size: 1.25rem; cursor: pointer; }
.vhm-close:hover, .vhm-close:focus-visible { background: rgba(255,255,255,.15); outline: none; }
.vhm-close:focus-visible { box-shadow: 0 0 0 2px #fff; }
/* In: just the box - the chat panel's (empty) cover hidden, the box a little roomier than the panel's own. */
#vhm-card:not(.vhm-popped) .asst-cover { display: none; }
#vhm-card:not(.vhm-popped) .asst-foot { border-top: 0; }
#vhm-card:not(.vhm-popped) .asst-foot input { padding: .9375rem 1rem; font-size: .9062rem; }
#vhm-card:not(.vhm-popped) .asst-foot button:not(.asst-pop) { padding: 0 1.375rem; }
/* The body holds the shared chat panel (Shared.Ui assistant-chat.css, 2026-10-06), which fills it: Simon
   or the conversation above, the one question box along the foot. */
.vhm-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.vhm-body > .asst-card { flex: 1 1 auto; min-height: 0; height: auto; }
/* Simon replica — exactly like the live site: a WIDE box (video is square 1080x1080) with
   object-fit:contain on a WHITE background. The contain bars are invisible because the clip's
   own backdrop is white, so Simon appears centered and uncropped in a wide window. Pure white
   on the <video> element so no dark edge shows around the contained frame. */
#vhm-video { width: 100%; height: 100%; object-fit: contain; background-color: #fff; display: block; }

/* POPPED OUT (2026-10-05): the card lifted into a large reading window - the conversation only, bigger type,
   the page dimmed behind. Same elements, so the conversation carries on. Its button is the icon by Send. */
/* Where the card was, while it is popped out: the same size (set from the card as it leaves), so the
   rest of the page stays exactly where it was. */
.vhm-placeholder { display: flex; align-items: center; justify-content: center; color: #8a94a6; font-size: .875rem; }
.vhm-placeholder[hidden] { display: none; }
.vhm-backdrop { position: fixed; inset: 0; background: rgba(8, 20, 40, .45); z-index: 1055; }
.vhm-backdrop[hidden] { display: none; }
#vhm-card.vhm-popped {
    position: fixed; z-index: 1056; top: 6vh; left: 50%; transform: translateX(-50%);
    width: min(62.5rem, 92vw); height: 86vh; margin: 0; box-shadow: 0 .625rem 2.5rem rgba(0,0,0,.35);
}
/* Popped out is always the conversation, never Simon (the component hides him too). */
#vhm-card.vhm-popped .asst-cover { display: none; }
#vhm-card.vhm-popped .asst-log[hidden] { display: block; }
#vhm-card.vhm-popped .asst-log { font-size: 1rem; line-height: 1.7; padding: 0 1.75rem 1.25rem; }
#vhm-card.vhm-popped .asst-msg.asst-q { margin: 0 -28px .875rem; padding: .625rem 1.75rem; }
#vhm-card.vhm-popped .asst-msg { margin-bottom: 1.125rem; }
#vhm-card.vhm-popped .asst-foot input { font-size: 1rem; padding: .875rem 1.125rem; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Error surfaces (CMS.Web pattern). #blazor-error-ui = fatal-circuit banner; .page-error =
   in-page ErrorBoundary content. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2000;
    background: #b32121;
    color: #fff;
    padding: .75rem 2.5rem .75rem 1rem;
    font-size: .875rem;
    box-shadow: 0 -1px .25rem rgba(0,0,0,0.3);
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; right: .875rem; top: .625rem; cursor: pointer; }

.page-error { max-width: 40rem; padding: 2rem 0; }
.page-error h1 { font-size: 1.375rem; margin-bottom: .75rem; color: #191F45; }

/* Registering and signing in (2026-09-28): the account pages inside AuthCard. */
.auth-h { color: #191F45; }
.auth-sub { font-size: .9rem; }
.auth-hint { font-size: .82rem; color: #6c757d; margin: 0 0 .875rem; }
.pw-rules { font-size: .82rem; color: #6c757d; margin: -4px 0 1rem; padding-left: 1.125rem; }
.code-input { letter-spacing: .4em; font-size: 1.25rem; text-align: center; }
.dev-code { font-size: .82rem; color: #6c757d; background: #f1f3f5; border: 1px dashed #adb5bd; border-radius: .25rem; padding: .25rem .5rem; text-align: center; margin: -6px 0 .875rem; }
.cant-list { font-size: .9rem; margin-bottom: 1.125rem; }
.cant-list dt { color: #191F45; font-weight: 600; margin-top: .625rem; }
.cant-list dd { margin: 2px 0 0; color: #444; }
/* My Profile (2026-10-05) - the old portal's single white card of labelled fields, with the password
   and mobile changed through their own dialogs (a button beside each read-only box). */
.profile-card { max-width: 47.5rem; }
.profile-card .card-body { padding: 1.75rem 2rem; }
.profile-h { font-size: 1.35rem; font-weight: 600; color: #191F45; margin: 0 0 1.25rem; }
.profile-label { font-size: .8rem; font-weight: 700; color: #191F45; margin-bottom: .3rem; }
.profile-card .form-control[readonly] { background: #eef0f3; }
.profile-row { display: flex; gap: .5rem; }
.profile-row .form-control { flex: 1 1 auto; }
.profile-row .btn { flex: 0 0 auto; white-space: nowrap; }
.profile-acts { display: flex; gap: .5rem; }
.profile-btn { min-width: 5.625rem; }
.profile-btn-outline { border: 1px solid #191F45; color: #191F45; background: #fff; font-weight: 500; }
.profile-btn-outline:hover { background: #f0f2f5; color: #191F45; }
.profile-note { font-size: .85rem; color: #555; margin: .25rem 0 0; }
.profile-dlg-h { font-size: 1.1rem; font-weight: 600; color: #191F45; margin: 0; }