/* Vero4 portal, November 2026. This layer preserves native osTicket actions. */
body.v4-portal-client,
body.v4-portal-staff {
  --v4-ink: #16232a;
  --v4-green: #075056;
  --v4-orange: #ff5b04;
  --v4-canvas: #e4eef0;
  --v4-paper: #fff;
  --v4-muted: #52656c;
  --v4-line: #ccdadd;
  --v4-radius: 14px;
  margin: 0;
  min-width: 0;
  color: var(--v4-ink);
  background: var(--v4-canvas);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.v4-portal-client *, body.v4-portal-staff * { box-sizing: border-box; }
body.v4-portal-client a, body.v4-portal-staff a { color: var(--v4-green); }
body.v4-portal-client a, body.v4-portal-client a:hover { margin-bottom: 0; border-bottom: 0; }
body.v4-portal-client a:hover, body.v4-portal-staff a:hover { color: var(--v4-ink); }
body.v4-portal-client ::selection, body.v4-portal-staff ::selection { color: #fff; background: var(--v4-green); }
body.v4-portal-client :focus-visible, body.v4-portal-staff :focus-visible { outline: 3px solid var(--v4-green); outline-offset: 3px; }
body.v4-portal-client h1, body.v4-portal-client h2, body.v4-portal-client h3,
body.v4-portal-staff h1, body.v4-portal-staff h2, body.v4-portal-staff h3 { color: var(--v4-ink); font-family: inherit; }
body.v4-portal-client h1 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 54px); line-height: 1.08; letter-spacing: -.055em; font-weight: 600; }
body.v4-portal-client h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
body.v4-portal-client h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
body.v4-portal-client p { line-height: 1.6; }

/* Full-width brand shell, with the same centered edges on every client view. */
.v4-portal-client #container { width: 100%; min-width: 0; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.v4-portal-client #header,
.v4-portal-client .v4-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; height: auto; min-height: 92px; padding: 20px max(28px, calc((100% - 1180px) / 2)); color: var(--v4-canvas); background: var(--v4-ink); border: 0; }
.v4-portal-client #header #logo { order: -1; display: flex; flex: 0 0 auto; align-items: center; width: auto; height: auto; margin: 0; padding: 0; float: none; text-decoration: none; }
.v4-portal-client #header #logo img,
.v4-portal-client .v4-brand img { display: block; width: 132px; height: auto; max-height: 50px; object-fit: contain; }
.v4-portal-client #header .valign-helper { display: none; }
.v4-portal-client #header .pull-right { float: none; min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
.v4-portal-client #header p { width: auto; margin: 0; padding: 0; color: var(--v4-canvas); font-size: 13px; line-height: 1.7; }
.v4-portal-client #header p:empty { display: none; }
.v4-portal-client #header a { color: var(--v4-canvas); }
.v4-portal-client #header a:hover { color: var(--v4-orange); }
.v4-portal-client #header :focus-visible { outline-color: var(--v4-orange); }
.v4-brand-note { padding-left: 20px; margin-left: 20px; border-left: 1px solid rgba(228,238,240,.25); color: var(--v4-canvas); font-size: 13px; letter-spacing: .02em; }
.v4-portal-client #nav { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; width: 100%; height: auto; min-height: 62px; margin: 0; padding: 8px max(28px, calc((100% - 1180px) / 2)); border: 0; border-bottom: 1px solid var(--v4-line); background: #fff; box-shadow: none; list-style: none; }
.v4-portal-client #nav li { display: block; float: none; margin: 0; padding: 0; border: 0; }
.v4-portal-client #nav li a { display: flex; align-items: center; min-height: 44px; height: auto; margin: 0; padding: 10px 17px; border-radius: 8px; color: var(--v4-muted); background: transparent; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .16s, color .16s; }
.v4-portal-client #nav li a:hover { color: var(--v4-green); background: #f0f5f6; }
.v4-portal-client #nav li a.active { color: #fff; background: var(--v4-green); }
.v4-portal-client #content { width: 100%; max-width: 1236px; min-height: calc(100svh - 292px); margin: 0 auto; padding: 48px 28px 64px; border: 0; background: transparent; }
.v4-portal-client #content > hr { border: 0; border-top: 1px solid var(--v4-line); margin: 28px 0; }
.v4-portal-client .v4-footer,
.v4-portal-client #footer { width: 100%; max-width: none; min-height: 100px; margin: 0; padding: 26px max(28px, calc((100% - 1180px) / 2)); border: 0; border-top: 1px solid var(--v4-line); color: var(--v4-muted); background: var(--v4-canvas); font-size: 12px; text-align: left; }
.v4-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; }
.v4-footer p { margin: 0; }
.v4-footer nav, .v4-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 1.2rem; }
.v4-footer a { text-underline-offset: 4px; }
.v4-skip { position: fixed; z-index: 10000; left: 20px; top: -90px; padding: 12px 18px; color: var(--v4-ink); background: var(--v4-orange); border-radius: 8px; }
.v4-skip:focus { top: 16px; }

/* Home and client sign-in. */
.v4-hero { padding: 24px 0 42px; max-width: 850px; }
.v4-portal-client .v4-hero h1 { max-width: 780px; font-size: clamp(36px, 5.5vw, 68px); }
.v4-portal-client .v4-eyebrow { margin: 0 0 18px; color: var(--v4-green); font-size: 11px; font-weight: 700; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.v4-hero > p:not(.v4-eyebrow), .v4-lead { max-width: 620px; margin: 20px 0 0; color: var(--v4-muted); font-size: 19px; line-height: 1.6; }
.v4-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 0; }
.v4-portal-client .v4-button,
.v4-portal-client .v4-button-secondary,
.v4-portal-staff .v4-button,
.v4-portal-staff .v4-button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 23px; border: 1px solid transparent; border-radius: 9px; color: var(--v4-ink); background: var(--v4-orange); box-shadow: none; font: 600 14px/1.4 Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: background .16s, color .16s, transform .16s; }
.v4-portal-client .v4-button:hover, .v4-portal-staff .v4-button:hover { color: #fff; background: var(--v4-green); transform: translateY(-1px); }
.v4-portal-client .v4-button:active, .v4-portal-staff .v4-button:active { transform: translateY(1px); }
.v4-portal-client .v4-button-secondary, .v4-portal-staff .v4-button-secondary { color: var(--v4-green); background: transparent; border-color: #a9bec3; }
.v4-portal-client .v4-button-secondary:hover, .v4-portal-staff .v4-button-secondary:hover { color: #fff; background: var(--v4-green); border-color: var(--v4-green); }
.v4-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 8px 0 36px; }
.v4-home-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 28px; border: 1px solid var(--v4-line); border-radius: var(--v4-radius); background: #fff; }
.v4-portal-client a.v4-home-card { border: 1px solid var(--v4-line); color: var(--v4-ink); text-decoration: none; transition: border-color .16s, transform .16s, box-shadow .16s; }
.v4-portal-client a.v4-home-card:hover { transform: translateY(-2px); border-color: var(--v4-green); box-shadow: 0 8px 22px rgba(22,35,42,.06); }
.v4-home-card h2, .v4-home-card h3, .v4-home-card p { margin: 0; }
.v4-home-card p { color: var(--v4-muted); font-size: 14px; }
.v4-home-card > .v4-card-number { color: var(--v4-green); font-size: 12px; font-weight: 700; }
.v4-home-card > .v4-button, .v4-home-card > a:last-child { margin-top: auto; }
.v4-access-note { max-width: 680px; margin: 28px 0; padding: 18px 22px; border-left: 3px solid var(--v4-green); border-radius: 0 10px 10px 0; color: var(--v4-ink); background: rgba(255,255,255,.65); font-size: 14px; }
.v4-access-note strong { display: block; margin-bottom: 4px; }
.v4-access-note p { margin: 0; color: var(--v4-muted); }
.v4-login-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .85fr); align-items: start; gap: clamp(42px, 7vw, 100px); padding: 18px 0 28px; }
.v4-login-intro { padding-top: 24px; }
.v4-portal-client .v4-login-intro h1 { font-size: clamp(38px, 4.7vw, 63px); }
.v4-login-intro .v4-access-note { margin-top: 36px; }
.v4-help-copy { max-width: 460px; font-size: 13px; color: var(--v4-muted); }
.v4-help-copy a { text-underline-offset: 3px; }
.v4-login-panel { min-width: 0; padding: 36px; border: 1px solid #d5e0e3; border-radius: 18px; background: #fff; box-shadow: 0 16px 42px rgba(22,35,42,.05); }
.v4-login-panel h2 { margin: 0 0 10px; }
.v4-login-panel > p { margin: 0 0 26px; color: var(--v4-muted); font-size: 14px; }
.v4-portal-client #clientLogin { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.v4-field { margin-bottom: 19px; }
.v4-field label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.v4-portal-client #clientLogin .v4-field input { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 11px 13px; border: 1px solid #b8ccd1; border-radius: 8px; color: var(--v4-ink); background: #fff; font: inherit; }
.v4-login-form > .v4-button { width: 100%; margin-top: 6px; }
.v4-login-recovery { margin: 16px 0 0; font-size: 13px; text-align: center; }
.v4-login-recovery a { display: inline-flex; align-items: center; min-height: 36px; text-underline-offset: 4px; }
.v4-staff-link { margin-top: 23px; padding-top: 23px; border-top: 1px solid var(--v4-line); font-size: 12px; text-align: center; }
.v4-staff-link span { display: block; margin-bottom: 5px; color: var(--v4-muted); }
.v4-staff-link a { display: inline-flex; align-items: center; min-height: 30px; text-underline-offset: 4px; }
.v4-external-auth { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--v4-line); }
.v4-external-auth .external-auth + .external-auth { margin-top: 10px; }
.v4-login-error { margin-bottom: 20px; padding: 12px 15px; color: #8a2b16; background: #fff2ed; border-left: 3px solid #b34c29; border-radius: 5px; font-size: 13px; }

/* Inputs, attachments, ticket conversations and notices keep their native hooks. */
.v4-portal-client input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
.v4-portal-client select,
.v4-portal-client textarea { max-width: 100%; padding: 10px 12px; border: 1px solid #b8ccd1; border-radius: 7px; color: var(--v4-ink); background: #fff; box-shadow: none; font: inherit; }
.v4-portal-client select { min-height: 44px; }
.v4-portal-client input[type="checkbox"], .v4-portal-client input[type="radio"] { accent-color: var(--v4-green); }
.v4-portal-client input[type="submit"], .v4-portal-client input[type="button"], .v4-portal-client input[type="reset"],
.v4-portal-client .btn { min-height: 44px; padding: 11px 22px; border: 1px solid transparent; border-radius: 8px; color: var(--v4-ink); background: var(--v4-orange); box-shadow: none; font: 600 14px/1.4 Arial, Helvetica, sans-serif; cursor: pointer; text-decoration: none; }
.v4-portal-client input[type="reset"] { color: var(--v4-muted); background: #fff; border-color: var(--v4-line); }
.v4-portal-client input[type="submit"]:hover, .v4-portal-client .btn:hover { color: #fff; background: var(--v4-green); }
.v4-portal-client .redactor-box { max-width: 100%; border: 1px solid #b8ccd1; border-radius: 8px; background: #fff; overflow: hidden; }
.v4-portal-client .redactor-toolbar { background: #f6f9f9; border-bottom: 1px solid var(--v4-line); box-shadow: none; }
.v4-portal-client .redactor-editor { min-height: 160px; font-family: inherit; font-size: 15px; line-height: 1.6; }
.v4-portal-client .thread-entry { margin-bottom: 24px; border-color: var(--v4-line); border-radius: 10px; }
.v4-portal-client .thread-entry .header { padding: 13px 18px; border-color: var(--v4-line); color: var(--v4-ink); background: #f1f6f7; font-size: 13px; }
.v4-portal-client .thread-entry .thread-body { padding: 22px; background: #fff; font-size: 15px; line-height: 1.65; }
.v4-portal-client .thread-entry .thread-body img { max-width: 100%; height: auto; }
.v4-portal-client #msg_error, .v4-portal-client .error_bar,
.v4-portal-staff #msg_error, .v4-portal-staff #error_bar { border: 1px solid #e4b8a7; border-left: 4px solid #a03a1e; border-radius: 8px; padding: 14px 18px; color: #7e2c18; background: #fff2ec; }
.v4-portal-client #msg_notice, .v4-portal-client .notice_bar,
.v4-portal-staff #msg_notice, .v4-portal-staff #notice_bar { border: 1px solid #afd0c8; border-left: 4px solid var(--v4-green); border-radius: 8px; padding: 14px 18px; color: var(--v4-green); background: #edf8f3; }
.v4-portal-client #msg_warning, .v4-portal-client .warning_bar,
.v4-portal-staff #msg_warning, .v4-portal-staff #warning_bar { border: 1px solid #e4cea8; border-left: 4px solid #a3721b; border-radius: 8px; padding: 14px 18px; color: #795416; background: #fff8e9; }
.v4-portal-client #content > [id^="msg_"] { margin-bottom: 28px; }
.v4-portal-client table { max-width: 100%; border-collapse: collapse; }
.v4-portal-client table.list { width: 100%; border: 1px solid var(--v4-line); background: #fff; }
.v4-portal-client table.list th { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--v4-line); color: var(--v4-muted); background: #f2f7f8; font-size: 12px; font-weight: 600; text-align: left; }
.v4-portal-client table.list td { padding: 16px; border: 0; border-bottom: 1px solid #e6edef; background: #fff; font-size: 14px; }
.v4-portal-client table.list tr:hover td { background: #f6fafa; }
.v4-portal-client #ticketTable td a { text-decoration: none; }
.v4-portal-client .pagination { margin-top: 24px; }
.v4-portal-client #ticketInfo { margin-bottom: 28px; }

/* Staff workspace: familiar structure, quieter chrome and more readable controls. */
.v4-portal-staff #container { width: calc(100% - 48px); max-width: 1640px; min-width: 0; margin: 24px auto; border: 1px solid var(--v4-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(22,35,42,.04); }
.v4-portal-staff #header { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: auto; min-height: 88px; padding: 20px 26px; border: 0; border-radius: 13px 13px 0 0; color: var(--v4-canvas); background: var(--v4-ink); }
.v4-portal-staff #header #logo { order: -1; display: flex; align-items: center; flex: 0 0 auto; float: none; height: auto; width: auto; margin: 0; }
.v4-portal-staff #header #logo img { width: 130px; height: auto; max-height: 45px; object-fit: contain; }
.v4-portal-staff #header .valign-helper { display: none; }
.v4-portal-staff #header #info { float: none; margin: 0; padding: 0; border: 0; color: var(--v4-canvas); background: transparent; font-size: 12px; line-height: 1.8; text-align: right; }
.v4-portal-staff #header a { color: var(--v4-canvas); }
.v4-portal-staff #header a:hover { color: var(--v4-orange); }
.v4-portal-staff #header :focus-visible { outline-color: var(--v4-orange); }
.v4-portal-staff #nav { min-height: 52px; height: auto; margin: 0; padding: 4px 18px; border: 0; border-bottom: 1px solid var(--v4-line); background: #fff; white-space: normal; }
.v4-portal-staff #nav > li { height: auto; min-width: 0; padding: 0; margin: 0 6px 0 0; border: 0; border-radius: 7px; box-shadow: none; }
.v4-portal-staff #nav > li > a { min-height: 44px; padding: 13px 16px; border: 0; color: var(--v4-muted); background: transparent; font-family: inherit; font-size: 14px; }
.v4-portal-staff #nav > li.active > a, .v4-portal-staff #nav > li > a.active,
.v4-portal-staff #nav > li > a:hover { color: var(--v4-green); background: #edf5f5; border-radius: 7px; }
.v4-portal-staff #sub_nav { height: auto; min-height: 46px; padding: 4px 24px; border: 0; border-bottom: 1px solid var(--v4-line); background: #f7fafa; }
.v4-portal-staff #sub_nav a { color: var(--v4-muted); font-size: 12px; }
.v4-portal-staff #sub_nav a.active, .v4-portal-staff #sub_nav a:hover { color: var(--v4-green); }
.v4-portal-staff #content { padding: 28px; border: 0; background: #fff; }
.v4-portal-staff #content > h1, .v4-portal-staff #content > h2 { margin-bottom: 22px; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.v4-portal-staff .table th { color: var(--v4-muted); background: #f3f8f8; }
.v4-portal-staff table.list th { padding-top: 12px; padding-bottom: 12px; border-color: var(--v4-line); color: var(--v4-muted); background: #f3f8f8; font-size: 12px; }
.v4-portal-staff table.list td { padding-top: 12px; padding-bottom: 12px; border-color: #e5edef; font-size: 13px; }
.v4-portal-staff input[type="text"], .v4-portal-staff input[type="email"], .v4-portal-staff input[type="password"], .v4-portal-staff input[type="number"],
.v4-portal-staff input[type="search"], .v4-portal-staff select, .v4-portal-staff textarea { max-width: 100%; border: 1px solid #b8ccd1; border-radius: 6px; padding: 7px 9px; color: var(--v4-ink); background: #fff; font-family: inherit; }
.v4-portal-staff input[type="checkbox"], .v4-portal-staff input[type="radio"] { accent-color: var(--v4-green); }
.v4-portal-staff input[type="submit"], .v4-portal-staff button[type="submit"], .v4-portal-staff .button.primary { min-height: 38px; padding: 9px 17px; border: 1px solid var(--v4-green); border-radius: 7px; color: #fff; background: var(--v4-green); text-shadow: none; box-shadow: none; font-family: inherit; font-weight: 600; }
.v4-portal-staff input[type="submit"]:hover, .v4-portal-staff button[type="submit"]:hover { background: var(--v4-ink); border-color: var(--v4-ink); }
.v4-portal-staff .redactor-box { border-color: var(--v4-line); border-radius: 7px; }
.v4-portal-staff .redactor-toolbar { background: #f6f9f9; box-shadow: none; }
.v4-portal-staff .thread-entry .header { background: #f2f7f8; border-color: var(--v4-line); }
.v4-portal-staff .thread-entry .thread-body { font-family: inherit; font-size: 14px; line-height: 1.6; }
.v4-portal-staff #footer { width: 100%; margin: 24px 0; padding: 12px 24px; border: 0; color: var(--v4-muted); background: transparent; font-size: 12px; text-align: center; }

/* The home has a dark editorial opening, followed by a compact service index. */
.v4-portal-client .v4-home .v4-hero { max-width: none; padding: 58px 64px 40px; margin: -14px 0 56px; border-radius: 18px; color: var(--v4-canvas); background: var(--v4-ink); }
.v4-portal-client .v4-home .v4-hero h1 { max-width: 900px; margin: 0; color: var(--v4-canvas); font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; }
.v4-portal-client .v4-home .v4-hero h1 span { color: var(--v4-orange); }
.v4-portal-client .v4-home .v4-hero .v4-eyebrow { margin-bottom: 27px; color: #b7d1d5; }
.v4-portal-client .v4-home .v4-hero .v4-hero-intro { max-width: 610px; color: var(--v4-canvas); font-size: 18px; }
.v4-portal-client .v4-home .v4-hero .v4-button-secondary { color: var(--v4-canvas); border: 1px solid #688087; }
.v4-portal-client .v4-home .v4-hero .v4-button-secondary:hover { color: var(--v4-ink); border-color: var(--v4-canvas); background: var(--v4-canvas); }
.v4-portal-client .v4-home .v4-hero .v4-access-note { max-width: none; margin: 36px 0 0; padding: 21px 0 0; border: 0; border-top: 1px solid #3c5058; border-radius: 0; color: #bfd3d8; background: transparent; font-size: 12px; }
.v4-portal-client .v4-home .v4-hero .v4-access-note i { margin-right: 7px; color: var(--v4-orange); }
.v4-portal-client .v4-home .v4-hero :focus-visible { outline-color: var(--v4-orange); }
.v4-section-heading { margin-bottom: 28px; }
.v4-section-heading .v4-eyebrow { margin-bottom: 12px; }
.v4-portal-client .v4-section-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.v4-home-services { margin-bottom: 44px; }
.v4-home-card { min-height: 252px; }
.v4-portal-client .v4-home-card h3 { max-width: 250px; margin: 7px 0 0; font-size: 23px; }
.v4-card-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: auto; padding-top: 15px; color: var(--v4-green); font-size: 13px; font-weight: 600; }
.v4-card-link > span { font-size: 22px; font-weight: 400; }
.v4-first-access { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px 0; border-top: 1px solid #b9ccd1; border-bottom: 1px solid #b9ccd1; }
.v4-first-access > div { max-width: 680px; }
.v4-first-access .v4-eyebrow { margin-bottom: 10px; }
.v4-portal-client .v4-first-access h2 { margin-bottom: 12px; }
.v4-first-access p:last-child { max-width: 620px; margin: 0; color: var(--v4-muted); font-size: 14px; }
.v4-first-access > a { flex: 0 0 auto; }
.v4-help-search { margin-top: 45px; }
.v4-help-search h2 { margin-bottom: 20px; }
.v4-help-search form { display: grid; grid-template-columns: minmax(0, 520px) auto; align-items: end; gap: 10px; max-width: 650px; }
.v4-help-search label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.v4-help-search input { width: 100%; min-height: 46px; }
.v4-help-search button { min-height: 46px; padding: 10px 22px; border: 0; border-radius: 8px; color: #fff; background: var(--v4-green); font-weight: 600; cursor: pointer; }
.v4-portal-client #header #logo:focus-visible, .v4-portal-staff #header #logo:focus-visible { outline: 3px solid var(--v4-orange); outline-offset: 6px; }
.v4-portal-client :is(#msg_error,#msg_warning,#msg_notice,.error_bar,.warning_bar,.notice_bar),
.v4-portal-staff :is(#msg_error,#msg_warning,#msg_notice,#error_bar,#warning_bar,#notice_bar) { height: auto; min-height: 48px; line-height: 1.5; }
.v4-portal-client #ticketTable { width: 100%; border: 1px solid var(--v4-line); background: #fff; }
.v4-portal-client #ticketTable th { padding: 14px; color: var(--v4-muted); background: #f2f7f8; border: 0; border-bottom: 1px solid var(--v4-line); font-size: 12px; }
.v4-portal-client #ticketTable td { padding: 14px; border: 0; border-bottom: 1px solid #e5edef; font-size: 14px; }
.v4-portal-client #ticketTable tr.alt td { background: #f6fafa; }
.v4-portal-client #reply { padding: 24px; border-color: var(--v4-line); border-radius: 10px; background: #fff; }
.v4-portal-client #reply textarea { width: 100% !important; max-width: 100%; }
.v4-portal-client #ticketForm { padding: 28px; border: 1px solid var(--v4-line); border-radius: 12px; background: #fff; }
.v4-portal-client #ticketForm > table { width: 100%; }
.v4-portal-client #ticketForm > table td { padding-top: 7px; padding-bottom: 7px; }
.v4-portal-client #ticketForm input, .v4-portal-client #ticketForm textarea, .v4-portal-client #ticketForm select { max-width: 100%; }
.v4-portal-client .infoTable, .v4-portal-client table.custom-data th { background: #f2f7f8; }
.v4-portal-staff table.list tbody tr:nth-child(2n+1) td { background: #f6fafa; }
.v4-portal-staff table.list tbody tr:hover td { background: #eaf4f3; }
.v4-portal-staff table.list tbody tr.highlight td { background: #e1f0ec; }

/* Staff login preserves password, external sign-in and two-step verification. */
body.v4-portal-staff#loginBody { min-height: 100svh; height: auto; text-align: left; background: var(--v4-canvas); }
.v4-staff-login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); width: min(1120px, calc(100% - 64px)); min-height: 630px; margin: max(40px, 8vh) auto; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(22,35,42,.06); }
.v4-staff-login-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 46px; padding: 46px; border-radius: 20px 0 0 20px; background: var(--v4-ink); color: var(--v4-canvas); }
.v4-staff-login-brand { display: inline-flex; align-self: flex-start; padding: 0; }
.v4-staff-login-brand img { display: block; width: 160px; height: auto; }
.v4-staff-login-intro .v4-eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--v4-orange); text-transform: uppercase; }
.v4-portal-staff .v4-staff-login-intro h1 { margin: 0 0 25px; color: var(--v4-canvas); font-size: 48px; line-height: 1.08; letter-spacing: -.05em; font-weight: 600; }
.v4-staff-login-intro p { max-width: 340px; color: #c4d6da; font-size: 16px; line-height: 1.65; }
.v4-portal-staff .v4-staff-back { align-self: flex-start; color: #c4d6da; font-size: 12px; text-underline-offset: 4px; }
.v4-portal-staff .v4-staff-back:hover { color: #fff; }
.v4-staff-login-intro :focus-visible { outline-color: var(--v4-orange); }
.v4-portal-staff .v4-staff-login #loginBox { position: relative; inset: auto; align-self: center; width: auto; min-width: 0; margin: 0; padding: 48px; border: 0; border-radius: 0; box-shadow: none; isolation: auto; background: #fff; text-align: left; }
.v4-portal-staff .v4-staff-login #loginBox:after { content: none; }
.v4-staff-login #loginBox > .v4-eyebrow { margin: 0 0 16px; color: var(--v4-green); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.v4-portal-staff .v4-staff-login h2 { margin: 0 0 16px; font-size: 29px; line-height: 1.15; letter-spacing: -.035em; }
.v4-portal-staff .v4-staff-login #login-message { margin: 0 0 12px; color: var(--v4-green); font-size: 13px; line-height: 1.5; font-weight: 400; text-align: left; }
.v4-staff-login .banner { color: var(--v4-muted); font-size: 14px; line-height: 1.5; }
.v4-staff-login #login { width: 100%; margin-top: 26px; }
.v4-staff-login #login fieldset { margin: 0; padding: 0; border: 0; }
.v4-staff-login .v4-field input { width: 100%; height: 48px; margin: 0; padding: 11px 13px; background: #fff; font-size: 15px; }
.v4-portal-staff .v4-staff-login #login input:focus { border-color: var(--v4-green); box-shadow: 0 0 0 3px rgba(7,80,86,.12); }
.v4-portal-staff .v4-staff-login #login .v4-button { width: 100%; height: auto; min-height: 48px; color: var(--v4-ink); background: var(--v4-orange); border-color: var(--v4-orange); }
.v4-portal-staff .v4-staff-login #login .v4-button:hover { color: #fff; background: var(--v4-green); border-color: var(--v4-green); }
.v4-portal-staff .v4-staff-login #company { position: static; width: auto; margin: 24px 0 0; color: var(--v4-muted); font-size: 11px; text-align: left; }
.v4-portal-staff .v4-staff-login #company .content { display: block; padding: 20px 0 0; border-top: 1px solid var(--v4-line); border-radius: 0; color: var(--v4-muted); background: none; text-shadow: none; box-shadow: none; }
.v4-portal-staff .v4-staff-login #loading { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; padding: 50px 25px; color: var(--v4-green); background: rgba(255,255,255,.95); }
.v4-portal-staff .v4-staff-login #loading h1 { font-size: 19px; line-height: 1.5; }
.v4-portal-staff .v4-staff-login .hidden { display: none; }

@media (max-width: 900px) {
  .v4-login-layout { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v4-login-panel { padding: 28px; }
  .v4-portal-client .v4-login-intro h1 { font-size: 42px; }
  .v4-home-grid { grid-template-columns: 1fr; gap: 14px; }
  .v4-home-card { padding: 24px; }
  .v4-portal-staff #container { width: calc(100% - 24px); margin: 12px auto; }
  .v4-portal-staff #header { padding: 18px; }
  .v4-portal-staff #content { padding: 22px; }
  .v4-portal-client .v4-home .v4-hero { padding: 42px; }
  .v4-first-access { align-items: flex-start; flex-direction: column; }
  .v4-staff-login { width: calc(100% - 36px); grid-template-columns: 1fr 1fr; }
  .v4-staff-login-intro, .v4-portal-staff .v4-staff-login #loginBox { padding: 32px; }
  .v4-portal-staff .v4-staff-login-intro h1 { font-size: 38px; }
}
@media (max-width: 680px) {
  .v4-portal-client #header, .v4-portal-client .v4-topbar { flex-wrap: wrap; gap: 15px; padding: 20px; min-height: 82px; }
  .v4-portal-client #header #logo img { width: 116px; }
  .v4-portal-client #header .pull-right { max-width: 100%; text-align: left; }
  .v4-portal-client #header p { font-size: 12px; }
  .v4-brand-note { padding-left: 14px; margin-left: 14px; font-size: 11px; }
  .v4-portal-client #nav { gap: 4px; padding: 8px 14px; }
  .v4-portal-client #nav li { flex: 1 1 auto; }
  .v4-portal-client #nav li a { justify-content: center; padding: 10px 12px; font-size: 12px; }
  .v4-portal-client #content { min-height: calc(100svh - 300px); padding: 30px 20px 44px; }
  .v4-portal-client .v4-hero { padding: 12px 0 30px; }
  .v4-portal-client .v4-hero h1 { font-size: 42px; }
  .v4-hero > p:not(.v4-eyebrow), .v4-lead { font-size: 17px; }
  .v4-actions { flex-direction: column; align-items: stretch; }
  .v4-actions > a { width: 100%; }
  .v4-home-grid { margin-top: 0; }
  .v4-login-layout { grid-template-columns: 1fr; gap: 28px; padding: 0; }
  .v4-login-intro { padding-top: 0; }
  .v4-portal-client .v4-login-intro h1 { font-size: 39px; }
  .v4-login-intro .v4-access-note { margin-top: 24px; }
  .v4-login-panel { padding: 26px 22px; border-radius: 14px; }
  .v4-portal-client .v4-login-panel h2 { font-size: 24px; }
  .v4-portal-client #clientLogin .v4-field input { font-size: 16px; }
  .v4-portal-client #footer, .v4-portal-client .v4-footer { padding: 24px 20px; }
  .v4-footer { align-items: flex-start; flex-direction: column; }
  .v4-portal-client .thread-entry .thread-body { padding: 16px; overflow-wrap: anywhere; }
  .v4-portal-client table.list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v4-portal-client table.list th, .v4-portal-client table.list td { padding: 12px; }
  .v4-portal-staff #container { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .v4-portal-staff #header { flex-wrap: wrap; gap: 16px; border-radius: 0; padding: 20px; }
  .v4-portal-staff #header #info { width: 100%; text-align: left; }
  .v4-portal-staff #nav { display: flex; flex-wrap: wrap; padding: 4px 10px; }
  .v4-portal-staff #nav > li { float: none; }
  .v4-portal-staff #nav > li > a { font-size: 12px; padding: 13px 11px; }
  .v4-portal-staff #sub_nav { padding: 8px 14px; white-space: normal; }
  .v4-portal-staff #content { padding: 20px 14px; overflow-x: auto; }
  .v4-portal-staff #content > h1, .v4-portal-staff #content > h2 { font-size: 25px; }
  .v4-portal-client .v4-home .v4-hero { margin: -10px 0 38px; padding: 32px 24px 26px; border-radius: 14px; }
  .v4-portal-client .v4-home .v4-hero h1 { font-size: clamp(34px, 9vw, 46px); line-height: 1.06; }
  .v4-portal-client .v4-home .v4-hero .v4-eyebrow { font-size: 9px; letter-spacing: .1em; margin-bottom: 22px; }
  .v4-portal-client .v4-home .v4-hero .v4-hero-intro { font-size: 16px; }
  .v4-portal-client .v4-home .v4-hero .v4-access-note { margin-top: 28px; font-size: 11px; }
  .v4-home-card { min-height: 225px; }
  .v4-portal-client #ticketForm { padding: 18px 14px; }
  .v4-portal-client #ticketForm > table, .v4-portal-client #ticketForm > table > tbody, .v4-portal-client #ticketForm > table > tbody > tr, .v4-portal-client #ticketForm > table > tbody > tr > td { display: block; width: 100%; }
  .v4-portal-client #ticketForm > table td:empty { display: none; }
  .v4-portal-client #ticketTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v4-portal-client #reply { padding: 16px; }
  .v4-portal-client #reply > table { width: 100%; }
  .v4-portal-client .main-content, .v4-portal-client .sidebar { float: none; width: 100%; margin-left: 0; margin-right: 0; }
  .v4-help-search form { grid-template-columns: minmax(0, 1fr); }
  .v4-help-search label { grid-column: 1; }
  .v4-help-search button { width: 100%; }
  .v4-staff-login { grid-template-columns: 1fr; width: calc(100% - 32px); margin: 16px auto; min-height: 0; border-radius: 14px; }
  .v4-staff-login-intro { gap: 26px; padding: 30px 26px; border-radius: 14px 14px 0 0; }
  .v4-staff-login-brand img { width: 128px; }
  .v4-portal-staff .v4-staff-login-intro h1 { font-size: 39px; }
  .v4-staff-login-intro p { font-size: 14px; }
  .v4-portal-staff .v4-staff-login #loginBox { padding: 32px 26px; border-radius: 0 0 14px 14px; }
  .v4-portal-staff .v4-staff-login h2 { font-size: 27px; }
  .v4-staff-login .v4-field input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v4-portal-client *, .v4-portal-staff * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media print {
  .v4-portal-client, .v4-portal-staff { color: #000; background: #fff; }
  .v4-portal-client #content, .v4-portal-staff #content { max-width: none; padding: 0; }
  .v4-portal-client .v4-footer, .v4-portal-staff #footer { background: #fff; }
}