/* Client portal (/portal/, apps/site/portal/index.php). Builds on site.css, like legal.css does:
   same tokens, fonts, header, buttons and footer; only portal-specific layout lives here. */

/* Header: compact and static, like the legal pages */
.portal-header { position: static; --header-h: 112px; border-bottom: 1px solid var(--rule); }
.portal-header .navbar > .container-fluid { flex-wrap: nowrap; gap: 16px; }
.portal-header .brand img { width: 72px; height: 72px; }
.portal-header .wordmark { font-size: 20px; }
.portal-header .wordmark small { font-size: 10.5px; }

/* User dropdown (top right) */
.portal-user .btn-login { max-width: 280px; }
.portal-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-user .dropdown-toggle::after { margin-left: 2px; }
.portal-user-menu {
  --bs-dropdown-min-width: 260px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-color: var(--rule);
  --bs-dropdown-border-radius: 3px;
  --bs-dropdown-font-size: 14px;
  --bs-dropdown-link-color: var(--fg);
  --bs-dropdown-link-hover-color: var(--hi);
  --bs-dropdown-link-hover-bg: var(--bg2);
  --bs-dropdown-link-active-color: var(--hi);
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-item-padding-x: 18px;
  --bs-dropdown-item-padding-y: 9px;
  margin-top: 8px !important;
  border-top: 3px solid var(--hi);
  box-shadow: 0 18px 40px rgba(38, 38, 38, .12);
}
.portal-user-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 18px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.portal-user-who .lbl { color: var(--hi); margin-bottom: 4px; }
.portal-user-who b { font-size: 15px; }
.portal-user-email { font-size: 13px; color: var(--mut); overflow-wrap: anywhere; }
.portal-user-menu form { margin: 0; }
.portal-user-menu .dropdown-item { font-weight: 500; }

/* Layout: menu on the left (on the site's thin rail line), page content on the right */
.portal-main { padding-top: 56px; }
.portal-rail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.portal-side { position: sticky; top: 32px; }

.portal-nav { border-left: 1px solid var(--rule); }
.portal-nav a {
  display: block; margin-left: -1px; padding: 10px 0 10px 20px;
  border-left: 2px solid transparent;
  font-size: 14px; font-weight: 500; color: var(--fg);
}
.portal-nav a:hover { color: var(--hi); }
.portal-nav a.active { color: var(--hi); border-left-color: var(--hi); }

.portal-content { min-width: 0; max-width: 72ch; }
.portal-content h1 { font-size: clamp(44px, 6vw, 84px); margin: 12px 0 18px; }
.portal-content .lbl { color: var(--hi); }
.portal-intro { font-size: 19px; color: var(--fg2); }
.portal-empty { margin-top: 40px; padding: 28px 30px; background: var(--bg2); border-top: 3px solid var(--hi); }
.portal-empty .lbl { color: var(--mut); }
.portal-empty p { margin-top: 8px; color: var(--fg2); }
.portal-empty a { color: var(--hi-dark); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.portal-empty a:hover { color: var(--hi); }

.portal-menu-toggle {
  --bs-btn-padding-x: 16px; --bs-btn-padding-y: 11px; --bs-btn-font-size: 14px;
  width: 100%; display: flex; justify-content: space-between; align-items: center;
}
.portal-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 991.98px) {
  .portal-header { --header-h: 76px; }
  .portal-header .brand { gap: 12px; }
  .portal-header .brand img { width: 56px; height: 56px; }
  .portal-header .wordmark { font-size: 17px; }
  .portal-header .wordmark small { font-size: 10px; }

  .portal-main { padding-top: 28px; }
  .portal-rail { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .portal-side { position: static; }
  .portal-nav { margin-top: 12px; }
}

@media (max-width: 575.98px) {
  /* Phones: the user button shows only the icon; the name is in the menu */
  .portal-user-name { display: none; }
  .portal-header .wordmark small { display: none; }
}

/* ---------- Invoices page (portal/pages/invoices.php) ---------- */
.portal-content:has(.inv-table) { max-width: none; }
.portal-error { margin-top: 32px; color: var(--hi-dark); }

.inv-summary { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; margin-top: 32px; background: var(--rule); border: 1px solid var(--rule); }
.inv-stat { background: var(--bg); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inv-stat b { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.1; }
.inv-stat-main { background: var(--bg2); border-top: 3px solid var(--hi); }
.inv-stat-main .lbl { color: var(--hi); }
.inv-owing { font-size: clamp(36px, 4.4vw, 52px) !important; color: var(--hi); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.inv-owing-zero { color: var(--fg); }
.inv-note { font-size: 14px; color: var(--fg2); }
.inv-overdue-note { color: var(--hi-dark); }

.inv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 40px 0 8px; }
.inv-filter { display: flex; gap: 22px; border-bottom: 1px solid var(--rule); }
.inv-filter a { display: block; padding: 8px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--fg); }
.inv-filter a span { color: var(--mut); font-size: 12px; margin-left: 4px; }
.inv-filter a:hover { color: var(--hi); }
.inv-filter a.active { color: var(--hi); border-bottom-color: var(--hi); }
.inv-sort-form { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-sort-form .form-select { width: auto; border-radius: 3px; border-color: var(--rule); font-size: 14px; }
.inv-sort-form .form-select:focus { border-color: var(--hi); box-shadow: 0 0 0 .2rem rgba(201, 87, 15, .2); }
.inv-sort-form .btn { --bs-btn-padding-x: 14px; --bs-btn-padding-y: 6px; --bs-btn-font-size: 13px; }

.inv-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.inv-table th { padding: 0; border-bottom: 1px solid var(--fg); text-align: left; white-space: nowrap; }
.inv-table th a {
  display: flex; align-items: center; gap: 6px; padding: 14px 12px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mut);
}
.inv-table th.num a { justify-content: flex-end; }
.inv-table th a:hover, .inv-table th.sorted a { color: var(--hi); }
.inv-arrow { font-size: 12px; letter-spacing: 0; opacity: .45; }
.inv-table th.sorted .inv-arrow { opacity: 1; }
.inv-table td { padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.inv-table tbody tr:hover td { background: var(--bg2); }
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-no { font-weight: 700; white-space: nowrap; }

.inv-state { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.inv-paid .inv-state { color: var(--mut); }
.inv-open .inv-state { color: var(--fg); }
.inv-overdue .inv-state { color: var(--hi); }
.inv-overdue .inv-state::before { content: "● "; }
.inv-overdue td:nth-child(3) { color: var(--hi-dark); font-weight: 700; }
.inv-void td { color: var(--mut); }
.inv-void .inv-state, .inv-void .num { text-decoration: line-through; }

.inv-actions { text-align: right; white-space: nowrap; }
.inv-actions a { font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); margin-left: 14px; }
.inv-actions a:first-child { margin-left: 0; }
.inv-actions a:hover { color: var(--hi); text-decoration-color: var(--hi); }
.inv-pay { display: inline-block; margin-left: 14px; cursor: not-allowed; }
.inv-pay .btn { --bs-btn-padding-x: 14px; --bs-btn-padding-y: 7px; --bs-btn-font-size: 13px; --bs-btn-disabled-opacity: .45; pointer-events: none; }

.inv-none { margin-top: 24px; color: var(--fg2); }
.inv-none a, .inv-help a { color: var(--hi-dark); text-decoration: underline; text-underline-offset: 2px; }
.inv-help { margin-top: 28px; font-size: 14px; color: var(--mut); }

@media (max-width: 1199.98px) {
  .inv-table { font-size: 14px; }
  .inv-table td, .inv-table th a { padding-left: 8px; padding-right: 8px; }
}

/* Phones and small tablets: one card per invoice, sorting from the select */
@media (max-width: 767.98px) {
  .inv-summary { grid-template-columns: 1fr 1fr; }
  .inv-stat-main { grid-column: 1 / -1; }
  .inv-stat { padding: 18px 18px; }
  .inv-sort-form { display: flex; }
  .inv-toolbar { align-items: flex-start; flex-direction: column; }

  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
  .inv-table tr { border: 1px solid var(--rule); border-top: 3px solid var(--rule); margin-top: 14px; padding: 6px 16px 14px; background: var(--bg); }
  .inv-table tr.inv-overdue { border-top-color: var(--hi); }
  .inv-table tbody tr:hover td { background: transparent; }
  .inv-table td { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; text-align: right; }
  .inv-table td::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); text-align: left; }
  .inv-table td.inv-no { font-size: 17px; }
  .inv-table td.inv-actions { justify-content: flex-start; flex-wrap: wrap; gap: 10px 18px; border-bottom: 0; padding-top: 14px; }
  .inv-table td.inv-actions::before { content: none; }
  .inv-actions a, .inv-pay { margin-left: 0; }
}