/* PartnersHub agent portal (Back Office Twin, Part H).
   Light AREP brand, built on the hub tokens in hub.css (colors, type, pills, buttons, cards,
   tables, notices). This file only adds the portal's own layout: a header with a prominent
   logo, five fixed tabs (top bar on desktop, bottom bar on a phone) and the tab pages.
   Brand rules: AREP blue #065CBA, navy #13294B, silver/graphite; Cormorant Garamond for
   display, Inter for the UI; red only for "needs attention"; no amber. */

body.hp { min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; }

/* ---- header + tabs --------------------------------------------------------------------- */
.hp-top { background: var(--hub-panel); border-bottom: 1px solid var(--hub-line); }
.hp-top__in { max-width: 1040px; margin: 0 auto; padding: 14px 24px 0; display: flex;
  flex-direction: column; align-items: flex-start; gap: 10px; }
/* Logo: a primary header element. >= 64px tall on desktop, >= 52px on a phone, with clear
   space all round. Light-optimized rendering on the white header. */
.hp-logo { display: inline-block; padding: 6px 4px; line-height: 0; }
.hp-logo img { height: 76px; width: auto; display: block; }
.hp-tabs { display: flex; gap: 2px; width: 100%; overflow-x: auto; margin-top: 2px; }
.hp-tab { padding: 11px 16px 12px; font-size: 14px; font-weight: 550; color: var(--hub-muted);
  text-decoration: none; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.hp-tab:hover { color: var(--hub-ink); }
.hp-tab.is-active { color: var(--hub-navy); border-bottom-color: var(--hub-blue); font-weight: 650; }
.hp-tab:focus-visible { outline: 2px solid var(--hub-blue); outline-offset: -2px; }
body.hp:not(.hp--tabs) .hp-top__in { align-items: center; padding-bottom: 12px; }

/* Bottom tab bar (phones only). */
.hp-bottom { display: none; }

/* ---- main ---------------------------------------------------------------------------- */
.hp-main { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: 26px 24px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.hp-notice { margin: 0; }
.hp-foot { max-width: 1040px; width: 100%; margin: 0 auto; padding: 18px 24px 28px; display: flex;
  flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; font-size: 12px; color: var(--hub-muted);
  border-top: 1px solid var(--hub-line); }

.hp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hub-navy); margin: 0 0 4px; }
.hp-h1 { font-family: var(--hub-font-display); font-weight: 600; font-size: 38px; line-height: 1.05;
  letter-spacing: -.01em; color: var(--hub-ink); margin: 0; }
.hp-sub { color: var(--hub-muted); margin: 6px 0 0; font-size: 14px; }
.hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.hp-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.hp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-card { padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.hp-card > h2 { font-size: 15px; font-weight: 650; margin: 0; }
.hp-card--quiet { background: var(--hub-bg); border-style: dashed; }
.hp-card--attn { border-color: #EBC3C9; box-shadow: inset 3px 0 0 var(--hub-badge); }
.hp-big { font-family: var(--hub-font-ui); font-size: 34px; font-weight: 700; letter-spacing: -.015em;
  color: var(--hub-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hp-headline { font-size: 17px; font-weight: 650; color: var(--hub-ink); }
.hp-muted { color: var(--hub-muted); }
.hp-small { font-size: 12.5px; }
.hp-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hp-link:hover { text-decoration: underline; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp-btn-big { height: 42px; padding: 0 20px; font-size: 14px; }
.hp-cta { justify-self: start; min-width: 280px; height: 46px; padding: 0 28px; font-size: 15px; }
.hp-ico { flex: 0 0 auto; }

/* Rows: one list that reads well on a phone and on a desktop. */
.hp-rows { display: grid; gap: 0; }
.hp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0;
  border-top: 1px solid var(--hub-line); align-items: center; }
.hp-rows > .hp-row:first-child { border-top: 0; padding-top: 4px; }
.hp-row__title { font-weight: 600; color: var(--hub-ink); min-width: 0; overflow-wrap: anywhere; }
.hp-row__sub { font-size: 12.5px; color: var(--hub-muted); grid-column: 1; }
.hp-row__amt { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-row__amt small { display: block; font-weight: 500; font-size: 11.5px; color: var(--hub-muted); }
.hp-row__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 12.5px; }
.hp-row__meta form { display: inline; margin: 0; }
.hp-row__meta button { all: unset; cursor: pointer; color: var(--hub-blue); font-weight: 600; }
.hp-row__meta button:hover { text-decoration: underline; }
.hp-row__meta button:focus-visible { outline: 2px solid var(--hub-blue); outline-offset: 2px; }

/* Commission list (Commissions tab): cards on a phone, a tidy grid on a desktop. */
.hp-clist { display: grid; gap: 10px; }
.hp-citem { background: var(--hub-panel); border: 1px solid var(--hub-line); border-radius: var(--hub-radius);
  padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 18px;
  align-items: center; }
.hp-citem__main { min-width: 0; }
.hp-citem__title { font-weight: 650; color: var(--hub-ink); overflow-wrap: anywhere; }
.hp-citem__sub { font-size: 12.5px; color: var(--hub-muted); margin-top: 2px; }
.hp-citem__amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-citem__amt small { display: block; font-weight: 500; font-size: 11.5px; color: var(--hub-muted); }
.hp-citem__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px;
  padding-top: 8px; border-top: 1px solid var(--hub-line); }
.hp-citem__meta form { display: inline; margin: 0; }
.hp-citem__meta button { all: unset; cursor: pointer; color: var(--hub-blue); font-weight: 600; }
.hp-citem__meta button:hover { text-decoration: underline; }
.hp-citem__meta button:focus-visible { outline: 2px solid var(--hub-blue); outline-offset: 2px; }
.hp-citem--owed { box-shadow: inset 3px 0 0 var(--hub-blue); }

/* Forms. */
.hp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.hp-form .hp-full { grid-column: 1 / -1; }
.hp-label { display: block; font-size: 12px; font-weight: 600; color: var(--hub-ink-2); margin: 0 0 5px; }
.hp-input, .hp-select { width: 100%; height: 40px; border: 1px solid var(--hub-line-2); border-radius: var(--hub-radius-sm);
  background: var(--hub-panel); color: var(--hub-ink); padding: 0 12px; font: inherit; font-size: 14px; }
.hp-input:focus, .hp-select:focus { outline: none; border-color: var(--hub-blue); box-shadow: 0 0 0 3px var(--hub-blue-soft); }
.hp-field-err { color: var(--hub-bad); font-size: 12.5px; margin: 6px 0 0; }
.hp-check { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--hub-line-2);
  border-radius: var(--hub-radius-sm); padding: 12px; background: var(--hub-bg); font-size: 13px; }
.hp-check input { margin-top: 3px; flex: 0 0 auto; }
.hp-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }

/* Link problem / new link pages. */
.hp-center { max-width: 460px; width: 100%; margin: 8px auto 0; display: grid; gap: 14px; justify-items: center;
  text-align: center; }
.hp-center .hp-h1 { font-size: 32px; }
.hp-badge { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hub-mute-soft); color: var(--hub-navy); }
.hp-badge--ok { background: var(--hub-blue-soft); color: var(--hub-blue); }
.hp-linkform { width: 100%; display: grid; gap: 10px; text-align: left; }
.hp-linkform .hp-btn-big { width: 100%; }

.hp-kv { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 9px 14px; margin: 0; font-size: 13.5px; }
.hp-kv dt { color: var(--hub-muted); }
.hp-kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.hp-table-card { padding: 0; overflow: hidden; }
.hp-table-card > .hp-card-head { padding: 14px 18px; border-bottom: 1px solid var(--hub-line); display: flex;
  justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-table-card > .hp-card-head h2 { font-size: 15px; font-weight: 650; margin: 0; }
.hp-table-card .hub-table th:first-child, .hp-table-card .hub-table td:first-child { padding-left: 18px; }
.hp-table-card .hub-table th:last-child, .hp-table-card .hub-table td:last-child { padding-right: 18px; }
.hp-empty { padding: 22px 18px; color: var(--hub-muted); text-align: center; font-size: 13.5px; }
.hp-links { white-space: nowrap; }
.hub-table td.mono { white-space: nowrap; }
.hp-links a + a::before { content: "·"; color: var(--hub-faint); margin: 0 7px; }

/* ---- phones ---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hp-top__in { align-items: center; padding: 10px 16px 10px; }
  .hp-logo img { height: 58px; }
  .hp-tabs { display: none; }
  .hp-main { padding: 18px 16px 104px; gap: 14px; }
  .hp-foot { padding: 14px 16px 92px; }
  .hp-h1 { font-size: 30px; }
  .hp-grid, .hp-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hp-card { padding: 16px; }
  .hp-big { font-size: 30px; }
  .hp-form { grid-template-columns: minmax(0, 1fr); }
  .hp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-kv { grid-template-columns: minmax(96px, 120px) 1fr; }
  .hp-citem { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-citem__status { grid-column: 1 / -1; grid-row: 2; }
  .hp-hide-sm { display: none; }
  .hp-cta { justify-self: stretch; min-width: 0; width: 100%; }
  .hp-table-card .hub-table th, .hp-table-card .hub-table td { padding: 9px 8px; }
  .hp-table-card .hub-table th:first-child, .hp-table-card .hub-table td:first-child { padding-left: 14px; }
  .hp-table-card .hub-table th:last-child, .hp-table-card .hub-table td:last-child { padding-right: 14px; }
  .hp-table-card > .hp-card-head { padding: 12px 14px; }
  .hp-links { white-space: normal; }
  .hp-links a { display: block; }
  .hp-links a + a::before { content: none; }
  .hp-bottom { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 40; background: var(--hub-panel); border-top: 1px solid var(--hub-line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(13, 30, 51, .06); }
  .hp-bottom__item { display: grid; justify-items: center; gap: 3px; padding: 5px 2px; font-size: 10.5px;
    font-weight: 550; color: var(--hub-muted); text-decoration: none; border-radius: 8px; }
  .hp-bottom__item.is-active { color: var(--hub-blue); font-weight: 700; }
  .hp-bottom__item:focus-visible { outline: 2px solid var(--hub-blue); outline-offset: -2px; }
  body.hp:not(.hp--tabs) .hp-main { padding-bottom: 40px; }
  body.hp:not(.hp--tabs) .hp-foot { padding-bottom: 28px; }
}