:root { --blue:#2d408a; --dark:#20275e; --light:#edf0fa; --panel:#b5bad2; --bg:#f2f4f8; --border:#dfe3eb; --text:#252936; --muted:#6d7280; --danger:#a52834; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial, Helvetica, sans-serif; }
button, input { font:inherit; }
a { color:var(--blue); }

.login-page { position:relative; display:flex; min-height:100vh; flex-direction:column; align-items:center; padding:clamp(42px,8vh,96px) 20px 72px; background:var(--blue); color:#fff; font-family:"Arial Narrow",Arial,sans-serif; }
.portal-heading { margin:0 0 38px; text-align:center; font-size:clamp(28px,3.1vw,40px); font-weight:300; line-height:1.08; letter-spacing:1px; text-transform:uppercase; }
.portal-heading span { font-weight:700; }
.portal-heading strong { display:block; margin-top:2px; font-weight:700; letter-spacing:2px; }
.login-shell { position:relative; width:min(100%,586px); padding-top:83px; }
.logo-card { position:absolute; z-index:2; top:0; left:50%; display:flex; width:min(300px,calc(100% - 48px)); height:132px; align-items:center; justify-content:center; padding:18px; transform:translateX(-50%); border:12px solid var(--dark); border-radius:11px; background:#f7f4ea; }
.logo-card img { display:block; width:100%; max-height:82px; object-fit:contain; }
.login-panel { width:100%; min-height:381px; padding:86px clamp(28px,6.4vw,79px) 22px; background:var(--panel); }
.validation-errors { margin:0 0 9px; color:#801924; font-size:12px; font-weight:700; line-height:1.35; text-align:center; }
.validation-errors ul { margin:0; padding:0; list-style:none; }
.field-row { display:flex; height:46px; margin-bottom:9px; background:#fff; }
.field-icon { display:flex; width:48px; flex:0 0 48px; align-items:center; justify-content:center; background:#f1f1f1; color:#a3a3a3; font-size:20px; }
.portal-input { width:100%; min-width:0; border:0; outline:0; background:#fff; color:#4d4d4d; padding:0 15px; font-size:12px; letter-spacing:.5px; text-transform:uppercase; }
.portal-input:focus { box-shadow:inset 0 0 0 2px var(--blue); }
.login-actions { width:min(277px,100%); margin:36px auto 0; text-align:center; }
.login-button { display:block; width:100%; height:47px; border:0; background:var(--blue); color:#fff; cursor:pointer; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.login-button:hover { background:#243675; }
.login-button:disabled { opacity:.65; cursor:wait; }
.login-help { margin:5px -20px 0; color:#4d4d4d; font-size:10px; line-height:1.35; letter-spacing:.7px; text-transform:uppercase; }
.portal-footer { position:absolute; right:42px; bottom:28px; color:#fff; font-size:17px; font-weight:700; letter-spacing:2px; text-decoration:none; text-transform:uppercase; }

.portal-page { min-height:100vh; }
.portal-header { background:var(--blue); color:#fff; box-shadow:0 2px 12px rgba(22,32,75,.16); }
.portal-header__inner { display:flex; width:min(1120px,calc(100% - 40px)); min-height:92px; margin:auto; align-items:center; justify-content:space-between; gap:30px; }
.portal-brand { flex:0 0 auto; line-height:1; text-transform:uppercase; }
.portal-brand__name { font-size:23px; font-weight:300; letter-spacing:.6px; }
.portal-brand__section { display:block; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:2.4px; }
.portal-account { display:flex; min-width:0; align-items:center; gap:14px; }
.employer-logo { width:62px; height:54px; border-radius:7px; background:#fff; object-fit:contain; padding:4px; }
.employer-name { min-width:0; max-width:260px; }
.employer-name__label { display:block; margin-bottom:4px; color:#cbd2f0; font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
.employer-name__value { display:block; overflow:hidden; font-size:15px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.logout-button { min-height:38px; margin-left:8px; padding:0 16px; border:1px solid rgba(255,255,255,.55); border-radius:4px; background:transparent; color:#fff; cursor:pointer; font-size:12px; font-weight:700; text-transform:uppercase; }
.logout-button:hover { background:#fff; color:var(--blue); }
.portal-main { width:min(1120px,calc(100% - 40px)); margin:auto; padding:50px 0 36px; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.eyebrow { display:block; margin-bottom:10px; color:var(--blue); font-size:11px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase; }
.page-title { margin:0; font-size:clamp(30px,4vw,46px); font-weight:400; line-height:1.05; }
.page-subtitle { max-width:620px; margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.6; }
.document-count { flex:0 0 auto; padding:10px 14px; border-radius:4px; background:var(--light); color:var(--blue); font-size:12px; font-weight:700; text-transform:uppercase; }
.info-panel { display:flex; margin-bottom:22px; gap:14px; padding:16px 18px; border-left:4px solid var(--blue); border-radius:0 6px 6px 0; background:#fff; box-shadow:0 5px 22px rgba(38,44,71,.06); }
.info-panel__icon { display:flex; width:26px; height:26px; flex:0 0 26px; align-items:center; justify-content:center; border-radius:50%; background:var(--light); color:var(--blue); font-weight:700; }
.info-panel p { margin:2px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.documents-card { overflow:hidden; border:1px solid var(--border); border-radius:8px; background:#fff; box-shadow:0 8px 30px rgba(38,44,71,.08); }
.documents-card__header { display:flex; min-height:82px; align-items:center; justify-content:space-between; gap:24px; padding:18px 22px; border-bottom:1px solid var(--border); }
.documents-card__title { margin:0; font-size:18px; }
.documents-card__description { margin:5px 0 0; color:var(--muted); font-size:12px; }
.document-search { width:min(310px,100%); height:42px; padding:0 14px; border:1px solid #cfd3dd; border-radius:4px; outline:none; }
.document-search:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,64,138,.12); }
.status-message { margin:16px 22px 0; padding:12px 14px; border-radius:4px; background:#fae8ea; color:var(--danger); font-size:13px; font-weight:700; }
.documents-table-wrap { overflow-x:auto; }
.documents-table { width:100%; border-collapse:collapse; }
.documents-table th { padding:13px 18px; border-bottom:1px solid var(--border); background:#f7f8fa; color:#555b69; font-size:10px; letter-spacing:1px; text-align:left; text-transform:uppercase; }
.documents-table td { padding:17px 18px; border-bottom:1px solid #eaecf1; color:#424754; font-size:13px; vertical-align:middle; }
.documents-table th:last-child,.documents-table td:last-child { width:162px; text-align:center; }
.document-empty { padding:38px 20px!important; color:var(--muted)!important; text-align:center!important; }
.form-actions { display:flex; justify-content:center; gap:7px; }
.form-action { display:inline-flex; width:36px; height:34px; align-items:center; justify-content:center; border:1px solid #cfd3dd; border-radius:4px; background:#fff; color:var(--blue); cursor:pointer; font-size:17px; }
.form-action:hover { border-color:var(--blue); background:var(--light); }

.pdf-page { display:flex; height:100vh; flex-direction:column; background:#30333a; }
.pdf-toolbar { display:flex; min-height:58px; align-items:center; justify-content:space-between; gap:20px; padding:10px 18px; background:var(--dark); color:#fff; }
.pdf-toolbar button,.pdf-toolbar a { padding:9px 13px; border:1px solid rgba(255,255,255,.55); border-radius:4px; background:transparent; color:#fff; cursor:pointer; text-decoration:none; }
.pdf-frame { width:100%; height:calc(100vh - 58px); border:0; background:#fff; }
.simple-message { width:min(640px,calc(100% - 40px)); margin:12vh auto; padding:35px; border-radius:8px; background:#fff; box-shadow:0 8px 30px rgba(38,44,71,.08); text-align:center; }

#blazor-error-ui { color-scheme:light only; background:#fff3cd; bottom:0; display:none; left:0; padding:.8rem 1.25rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; }

@media (max-width:700px) {
  .login-page { justify-content:center; padding-top:34px; }
  .portal-heading { margin-bottom:28px; font-size:27px; }
  .login-shell { padding-top:68px; }
  .logo-card { height:112px; border-width:10px; }
  .login-panel { min-height:352px; padding-top:73px; }
  .portal-footer { right:0; width:100%; font-size:14px; text-align:center; }
  .portal-header__inner { min-height:122px; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; }
  .portal-account { width:100%; }
  .employer-logo { display:none; }
  .logout-button { margin-left:auto; }
  .page-intro,.documents-card__header { align-items:flex-start; flex-direction:column; }
  .documents-table thead { display:none; }
  .documents-table tr { display:block; padding:10px 0; border-bottom:1px solid var(--border); }
  .documents-table td { display:flex; justify-content:space-between; gap:20px; padding:8px 18px; border:0; text-align:right!important; }
  .documents-table td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
  .document-empty { display:block!important; }
}