@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --portal-navy: #0b2d68;
    --portal-blue: #075fb5;
    --portal-teal: #008d88;
    --portal-ink: #082a63;
    --portal-muted: #65768e;
    --portal-line: #d9e2ec;
    --portal-bg: #f5f7fa;
}

* { box-sizing: border-box; }
body.portal-body { background: var(--portal-bg); color: var(--portal-ink); font-family: "Inter", "Segoe UI", Arial, sans-serif; margin: 0; min-height: 100vh; }
.portal-shell { margin: 0 auto; max-width: 1240px; padding: 0 2rem 2.5rem; }
.portal-header { align-items: center; background: var(--portal-navy); display: flex; height: 64px; justify-content: space-between; margin: 0 calc((1240px - 100vw) / 2) 2rem; padding: 0 max(2rem, calc((100vw - 1176px) / 2)); }
.portal-brand { align-items: center; color: #fff; display: inline-flex; font-size: .7rem; font-weight: 700; gap: .8rem; letter-spacing: .12em; text-decoration: none; }
.portal-brand img { height: 27px; object-fit: contain; width: 135px; }
.portal-brand span { border-left: 1px solid rgba(255,255,255,.4); padding: .35rem 0 .35rem .8rem; }
.portal-staff-link { color: #d8e6f3; font-size: .82rem; text-decoration: none; }
.portal-staff-link:hover { color: #fff; text-decoration: underline; }
.portal-heading { margin: 0 0 1.4rem; }
.portal-eyebrow { color: var(--portal-teal); font-size: .68rem; font-weight: 700; letter-spacing: .1em; margin: 0 0 .4rem; }
.portal-heading h1, .portal-login-content h1 { color: var(--portal-navy); font: 600 2rem/1.15 "Inter", "Segoe UI", Arial, sans-serif; margin: 0; }
.portal-lede { color: var(--portal-muted); font-size: .92rem; margin: .45rem 0 0; }
.portal-identity { align-items: center; background: #fff; border: 1px solid var(--portal-line); border-radius: 8px; display: flex; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.2rem; }
.portal-identity-mark { align-items: center; background: #e1f4f1; border-radius: 50%; color: var(--portal-teal); display: flex; flex: 0 0 46px; font-size: .8rem; font-weight: 700; height: 46px; justify-content: center; }
.portal-identity-main { min-width: 190px; }
.portal-identity-main .portal-eyebrow { font-size: .58rem; margin: 0 0 .2rem; }
.portal-identity-main h2 { color: var(--portal-ink); font: 600 1rem "Inter", "Segoe UI", Arial, sans-serif; margin: 0; }
.portal-identity-details { display: flex; gap: 2rem; margin: 0 0 0 auto; }
.portal-identity-details div { min-width: 130px; }
.portal-identity-details dt { color: var(--portal-muted); font-size: .65rem; font-weight: 600; }
.portal-identity-details dd { color: var(--portal-ink); font-size: .82rem; font-weight: 600; margin: .15rem 0 0; }
.portal-stat-grid { display: grid; gap: .65rem; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 1rem; }
.portal-stat { background: #fff; border: 1px solid var(--portal-line); border-radius: 7px; display: flex; flex-direction: column; gap: .3rem; min-height: 78px; padding: .8rem 1rem; }
.portal-stat span { color: var(--portal-muted); font-size: .75rem; font-weight: 600; }
.portal-stat strong { color: var(--portal-ink); font: 600 1.2rem "Inter", "Segoe UI", Arial, sans-serif; }
.portal-stat-pending { border-top: 3px solid #d19a22; }
.portal-stat-approved { border-top: 3px solid var(--portal-teal); }
.portal-stat-exported { border-top: 3px solid #68809a; }
.portal-stat-paid { border-top: 3px solid #22865b; }
.portal-stat-rejected { border-top: 3px solid #cf5660; }
.portal-stat-sent { border-top: 3px solid #266fc2; }
.portal-workspace { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.65fr); }
.portal-request-section, .portal-history-section { background: #fff; border: 1px solid var(--portal-line); border-radius: 8px; min-width: 0; padding: 1.2rem; }
.portal-section-heading { align-items: center; border-bottom: 1px solid #e9eef2; display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .85rem; }
.portal-section-heading h2 { color: var(--portal-navy); font: 600 1.1rem "Inter", "Segoe UI", Arial, sans-serif; margin: 0; }
.portal-section-icon { align-items: center; background: #e7f3f5; border-radius: 7px; color: var(--portal-blue); display: flex; height: 36px; justify-content: center; width: 36px; }
.portal-history-count { color: var(--portal-muted); font-size: .73rem; }
.portal-view-all, .portal-back-link { align-items: center; color: var(--portal-blue); display: flex; font-size: .78rem; font-weight: 700; gap: .45rem; justify-content: center; margin-top: .8rem; text-decoration: none; }
.portal-view-all:hover, .portal-back-link:hover { text-decoration: underline; }
.portal-history-filters { align-items: end; display: grid; gap: .65rem; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto; margin: 0 0 .8rem; }
.portal-history-filters label { color: #40556b; display: grid; font-size: .68rem; font-weight: 700; gap: .3rem; }
.portal-history-filters input, .portal-history-filters select { background: #fff; border: 1px solid #cbd9e5; border-radius: 6px; color: var(--portal-ink); font: .78rem "Inter", "Segoe UI", Arial, sans-serif; min-height: 39px; padding: .5rem .6rem; width: 100%; }
.portal-history-clear { color: var(--portal-blue); font-size: .75rem; padding: .6rem .25rem; white-space: nowrap; }
.portal-full-history { margin-top: .8rem; }
.portal-report-stages { display: grid; gap: .55rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 1rem; }
.portal-report-stages > div { background: #f7f9fb; border: 1px solid #e7edf2; border-radius: 7px; display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .65rem .75rem; }
.portal-report-stages span { color: var(--portal-muted); font-size: .66rem; line-height: 1.35; }
.portal-report-stages strong { color: var(--portal-ink); font-size: 1rem; }
.portal-report-columns { align-items: center; border-bottom: 1px solid var(--portal-line); color: var(--portal-muted); display: grid; font-size: .62rem; font-weight: 700; gap: .75rem; grid-template-columns: minmax(0, 1fr) minmax(75px, auto) minmax(160px, .9fr) minmax(120px, .7fr); letter-spacing: .04em; padding: .5rem .1rem; text-transform: uppercase; }
.portal-report-row { grid-template-columns: minmax(0, 1fr) minmax(75px, auto) minmax(160px, .9fr) minmax(120px, .7fr); }
.portal-report-progress, .portal-report-batch { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.portal-report-progress small, .portal-report-batch small { color: var(--portal-muted); font-size: .65rem; }
.portal-report-batch strong { color: var(--portal-ink); font-size: .7rem; overflow-wrap: anywhere; }
.portal-back-link { justify-content: flex-start; margin-top: 1rem; }
.portal-form-field { margin-bottom: .9rem; }
.portal-form-field label { color: #40556b; display: block; font-size: .74rem; font-weight: 700; margin-bottom: .35rem; }
.portal-form-field input { background: #fff; border: 1px solid #cbd9e5; border-radius: 6px; color: var(--portal-ink); font: .9rem "Inter", "Segoe UI", Arial, sans-serif; min-height: 43px; padding: .6rem .75rem; width: 100%; }
.portal-form-field input:focus, .portal-code-form input:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 3px rgba(20,121,201,.12); outline: none; }
.portal-form-note { color: var(--portal-muted); font-size: .73rem; line-height: 1.5; margin: 0 0 .8rem; }
.portal-field-error { color: #ba3f49; display: block; font-size: .7rem; margin-top: .25rem; }
.portal-button { align-items: center; border: 1px solid transparent; border-radius: 6px; cursor: pointer; display: inline-flex; font: 600 .82rem "Inter", "Segoe UI", Arial, sans-serif; gap: .5rem; justify-content: center; min-height: 41px; padding: .6rem .9rem; text-decoration: none; }
.portal-button-primary { background: var(--portal-navy); color: #fff; }
.portal-button-primary:hover { background: #123d7d; }
.portal-request-form > .portal-button { width: 100%; }
.portal-button-quiet { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.portal-button-quiet:hover { background: rgba(255,255,255,.1); }
.portal-request-row { align-items: center; border-bottom: 1px solid #edf1f4; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 62px; padding: .7rem .1rem; }
.portal-request-row:last-child { border-bottom: 0; }
.portal-pagination { align-items: center; border-top: 1px solid #edf1f4; display: flex; justify-content: space-between; margin-top: .5rem; padding-top: .85rem; }
.portal-pagination a, .portal-pagination > span { align-items: center; border-radius: 5px; color: var(--portal-navy); display: inline-flex; font-size: .72rem; font-weight: 600; gap: .35rem; min-height: 32px; padding: .35rem .55rem; text-decoration: none; }
.portal-pagination a:hover { background: #eef4f8; }
.portal-pagination .portal-pagination-current { color: var(--portal-muted); font-weight: 500; }
.portal-pagination .is-disabled { color: #a5b0bc; }
.portal-request-main { min-width: 0; }
.portal-request-main strong, .portal-request-main small { display: block; }
.portal-request-main strong { color: var(--portal-ink); font-size: .82rem; overflow-wrap: anywhere; }
.portal-request-main small { color: var(--portal-muted); font-size: .68rem; margin-top: .2rem; }
.portal-request-amount { color: var(--portal-ink); font-size: .82rem; white-space: nowrap; }
.portal-status { border-radius: 999px; font-size: .67rem; font-weight: 700; padding: .33rem .55rem; white-space: nowrap; }
.portal-status.is-pending { background: #fff2d2; color: #916300; }
.portal-status.is-approved { background: #e0f4ef; color: #08785f; }
.portal-status.is-exported { background: #e9eff5; color: #536b83; }
.portal-status.is-paid { background: #e1f3e8; color: #1c7949; }
.portal-status.is-rejected { background: #fde8e8; color: #b93642; }
.portal-empty { align-items: center; color: var(--portal-muted); display: flex; flex-direction: column; gap: .35rem; padding: 2.5rem 1rem; text-align: center; }
.portal-empty i { color: #91a2b1; font-size: 1.2rem; margin-bottom: .3rem; }
.portal-empty strong { color: var(--portal-ink); font-size: .85rem; }
.portal-empty span { font-size: .75rem; }
.portal-messages { margin-bottom: .75rem; }
.portal-alert { background: #fff1f0; border: 1px solid #f0c9c2; border-radius: 6px; color: #a54135; font-size: .8rem; line-height: 1.45; margin-bottom: .9rem; padding: .7rem .8rem; }
.portal-alert-success { background: #e8f6ef; border-color: #c3e8d3; color: #176b48; }
.portal-footer { color: #8798a8; font-size: .7rem; margin-top: 1.25rem; }
.portal-login-shell { max-width: 820px; }
.portal-login-content { margin: 7vh auto 0; max-width: 460px; }
.portal-login-content h1 { font-size: 2.25rem; }
.portal-login-content > .portal-lede { line-height: 1.6; margin: .65rem 0 1.5rem; }
.portal-code-form { background: #fff; border: 1px solid var(--portal-line); border-radius: 8px; box-shadow: 0 12px 30px rgba(7,29,73,.06); padding: 1.4rem; }
.portal-code-form label { color: #40556b; display: block; font-size: .76rem; font-weight: 700; margin-bottom: .4rem; }
.portal-code-form input { background: #fff; border: 1px solid #cbd9e5; border-radius: 6px; color: var(--portal-ink); font: 600 1rem "Inter", "Segoe UI", Arial, sans-serif; letter-spacing: .08em; min-height: 46px; padding: .65rem .8rem; text-transform: uppercase; width: 100%; }
.portal-code-form > .portal-button { margin-top: .8rem; width: 100%; }
.portal-security-note { align-items: center; color: var(--portal-muted); display: flex; font-size: .68rem; gap: .45rem; line-height: 1.45; margin: .9rem 0 0; }
.portal-security-note i { color: var(--portal-teal); }

@media (max-width: 840px) {
    .portal-workspace { grid-template-columns: minmax(0, 1fr); }
    .portal-request-section { order: 0; }
    .portal-history-section { order: 1; }
}

@media (max-width: 640px) {
    .portal-shell { padding: 0 1rem 1.5rem; }
    .portal-header { margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; }
    .portal-brand img { width: 112px; }
    .portal-heading h1 { font-size: 1.7rem; }
    .portal-identity { align-items: flex-start; flex-wrap: wrap; gap: .75rem; padding: .9rem; }
    .portal-identity-details { flex-basis: 100%; gap: 1.25rem; margin: .25rem 0 0 58px; }
    .portal-identity-details div { min-width: 0; }
    .portal-stat-grid { gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-stat { min-height: 68px; padding: .65rem .75rem; }
    .portal-stat:last-child { grid-column: 1 / -1; }
    .portal-request-section, .portal-history-section { padding: .9rem; }
    .portal-request-row { gap: .4rem; grid-template-columns: minmax(0, 1fr) auto; }
    .portal-status { grid-column: 2; grid-row: 1; }
    .portal-request-amount { align-self: start; grid-column: 2; grid-row: 2; }
    .portal-history-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .portal-history-filters label:first-child { grid-column: 1 / -1; }
    .portal-history-filters .portal-button { grid-column: 1; }
    .portal-report-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-report-stages > div:last-child { grid-column: 1 / -1; }
    .portal-report-columns { display: none; }
    .portal-report-row { grid-template-columns: minmax(0, 1fr) auto; }
    .portal-report-progress, .portal-report-batch { grid-column: 1 / -1; }
    .portal-report-progress { grid-row: 2; }
    .portal-report-batch { align-items: center; flex-direction: row; flex-wrap: wrap; grid-row: 3; }
}

    .portal-eyebrow { color: #80bd17; }
    .portal-brand img { filter: brightness(0) invert(1); }
    .portal-identity,
    .portal-stat,
    .portal-request-section,
    .portal-history-section,
    .portal-code-form {
        border-color: var(--portal-line);
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(11, 45, 104, .06);
    }
    .portal-stat { border-top-width: 3px; }
    .portal-request-section,
    .portal-history-section { padding: 1.35rem; }
    .portal-form-field input,
    .portal-code-form input { border-radius: 7px; }
    .portal-button { border-radius: 7px; font-weight: 600; }
    .portal-button-primary { background: var(--portal-navy); }
    .portal-button-primary:hover { background: #071f4c; }

    @media (max-width: 640px) {
        .portal-request-section,
        .portal-history-section { padding: 1rem; }
    }