/* Portal adaptation of the supplied ABYSIS form and invoice-list references. */
:root {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; color: #292929; background: #fff;
    --primary: #0d70c4; --border: #d2d2d2; --muted: #566674;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; line-height: 1.5; min-height: 100vh; }
button, input { font: inherit; }
[hidden] { display: none !important; }
header {
    min-height: 78px; display: flex; align-items: center; gap: 18px;
    padding: 12px max(24px, calc((100% - 1120px) / 2));
    border-bottom: 1px solid #deebf7; background: #fff;
}
.department-logo { width: 88px; height: 60px; object-fit: contain; flex: 0 0 88px; }
.brand-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.brand-text strong { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.brand-text span { font-size: 13px; color: #0068a5; }
.portal-product-logo { width: 68.8px; height: 40px; object-fit: contain; flex: 0 0 68.8px; margin-left: auto; }
main { max-width: 1168px; padding: 22px 24px; margin: 0 auto; }
aside { padding: 12px 16px; border-left: 3px solid #ba8526; background: #fff6df; color: #664c19; font-size: 13px; margin-bottom: 26px; }
section { padding: 0 0 28px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
#access { max-width: 620px; }
h1 { font-size: 24px; font-weight: 600; line-height: 1.3; margin: 6px 0 14px; overflow-wrap: anywhere; }
h2 { font-size: 18px; }
p { margin: 12px 0; }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--primary); margin: 0; }
form { display: grid; gap: 14px; margin-top: 22px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: #245881; }
input:not([type="checkbox"]) {
    width: 100%; min-width: 0; min-height: 36px; padding: 7px 12px;
    border: 1px solid #bcbcbc; border-radius: 8px; color: #292929; background: #fff;
}
input::placeholder { color: #718493; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
input:disabled { background: #e9eff4; color: var(--muted); }
button, #download-receipt {
    min-height: 34px; padding: 6px 14px; border: 1px solid var(--primary); border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: center; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s, border-color .15s;
}
button:hover:not(:disabled), #download-receipt:hover { background: #095da4; border-color: #095da4; }
button:disabled { opacity: .55; cursor: not-allowed; }
form > button { justify-self: start; }
.secondary { background: #fff; border-color: #c5c5c5; color: #245881; }
.secondary:hover:not(:disabled) { background: #eaf2f8; border-color: #7c9eb9; }
#logout { background: #292929; border-color: #515151; color: #fff; }
#logout:hover:not(:disabled) { background: #444; border-color: #444; }
#resend-code { background: #5166ed; border-color: #5166ed; color: #fff; }
#resend-code:hover:not(:disabled) { background: #3b50d5; border-color: #3b50d5; }
.text-button { background: transparent; border-color: transparent; color: var(--primary); }
.text-button:hover:not(:disabled) { background: #e4eef7; color: var(--primary); border-color: transparent; }
.hint, footer { color: var(--muted); font-size: 13px; }
.section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px;
    border: 1px solid #deebf7; border-bottom: 2px solid #0077b9; border-radius: 8px;
    background: linear-gradient(180deg, #fff 0%, #edf5fa 100%); margin-bottom: 18px;
}
.section-head h1 { font-size: 20px; font-weight: 600; color: #245881; margin: 0; }
.section-head button { flex-shrink: 0; }
.verified-subscriber { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px 0; margin: 18px 0; border-block: 1px solid var(--border); }
.verified-subscriber strong { overflow-wrap: anywhere; }
.verified-subscriber > span { color: var(--muted); font-size: 14px; }
.table-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 8px; max-height: 60vh; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; background: #fff; }
th, td { height: 34px; padding: 7px 10px; text-align: left; border-bottom: 1px solid #ddd; white-space: nowrap; }
th { background: #eee; color: #292929; font-weight: 600; position: sticky; top: 0; z-index: 1; border-right: 1px solid #d2d2d2; }
th:last-child { border-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f0f7fe; }
td:nth-last-child(-n+2), th:nth-last-child(-n+2) { text-align: right; font-variant-numeric: tabular-nums; }
tr.selected, tr.selected:hover { background: #deedf7; }
tr.unavailable { color: #657583; background: #f1f3f5; }
input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; }
.selection-summary { margin-top: 20px; padding: 12px 0; border-block: 1px solid var(--border); }
.selection-summary p { display: flex; justify-content: space-between; gap: 20px; margin: 8px 0; }
.selection-summary p > span { flex: 1; }
.selection-summary strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
#selected-total { color: var(--primary); font-size: 20px; }
#checkout { margin-top: 16px; }
#message { color: #176943; overflow-wrap: anywhere; }
#message:empty, #payment-status:empty { display: none; }
#restart { margin-bottom: 20px; }
.verification-info { border-left: 3px solid var(--primary); padding: 4px 16px; background: #e6f0fa; }
.verification-info p { margin: 8px 0; overflow-wrap: anywhere; }
.code-validity { font-size: 14px; color: #245371; }
.code-validity strong { display: inline-block; min-width: 48px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.verification-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.verification-actions .secondary { min-width: 190px; }
#checkout-message { padding: 12px 16px; border-left: 3px solid #ba8526; background: #fff6df; color: #664c19; overflow-wrap: anywhere; }
footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-bottom: 16px; }
.portal-company-logo { width: 108.8px; height: 16px; max-width: 100%; object-fit: contain; flex: 0 1 108.8px; }
footer > span { flex: 1 1 300px; min-width: 0; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mobile-hint { display: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #b5c7d4; border-radius: 4px; }
::-webkit-scrollbar-track { background: #eef3f7; }
@media (max-width: 600px) {
    header { gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
    .department-logo { width: 68px; height: 50px; flex-basis: 68px; }
    .brand-text { flex: 1; }
    .brand-text strong { font-size: 16px; }
    main { padding: 20px 16px; }
    h1 { font-size: 22px; }
    .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
    .section-head h1 { font-size: 18px; }
    .mobile-hint { display: block; }
    .selection-summary p { align-items: flex-start; gap: 12px; }
    .selection-summary p > span { max-width: 62%; }
    .verification-actions { align-items: stretch; flex-direction: column; }
    .verification-actions button, form > button, #checkout { width: 100%; }
    input:not([type="checkbox"]), button, #download-receipt { min-height: 44px; }
    th, td { padding: 11px 9px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }