/* The tenant portal (Pages/TenantPortal, _TenantLayout). Phone first: most tenants use one.
   Colours, fonts and the light/dark themes come from site.css. */

body.portal { min-height: 100vh; display: flex; flex-direction: column; font-size: 1rem; background: var(--bs-body-bg); }
.portal-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top));
    background: var(--hm-sidebar); border-bottom: 1px solid var(--bs-border-color);
}
.portal-brand { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none !important; }
.portal-brand .logo { height: 24px; }
.portal-brand-sub { font-family: var(--font-heading); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.portal-top-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.portal-top-actions form { margin: 0; }
.portal-top-actions .btn { font-size: .78rem; }

/* Tabs: a bar along the bottom on phones */
.portal-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--hm-sidebar); border-top: 1px solid var(--bs-border-color);
    padding-bottom: env(safe-area-inset-bottom);
}
.portal-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 58px; padding: .35rem .2rem; color: var(--bs-secondary-color); font-size: .7rem; font-weight: 600;
    text-decoration: none !important; transition: color .15s ease, background-color .15s ease;
}
.portal-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-tab.active { color: var(--bs-link-color); }
.portal-tab.active svg { stroke-width: 2.2; }
.portal-tab:hover { color: var(--bs-body-color); }

.portal-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 1rem 1rem 1.5rem; }
body.portal-in .portal-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.portal-foot { text-align: center; font-size: .75rem; color: var(--bs-secondary-color); padding: 0 1rem 1rem; }
body.portal-in .portal-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
    .portal-top { padding: .7rem 1.5rem; }
    .portal-tabs { position: static; display: flex; gap: .25rem; background: none; border: 0; padding: 0; margin-left: 1rem; }
    .portal-tab { flex-direction: row; min-height: 0; gap: .4rem; padding: .45rem .75rem; border-radius: 8px; font-size: .86rem; }
    .portal-tab svg { width: 18px; height: 18px; }
    .portal-tab.active { background: rgba(var(--bs-primary-rgb), .12); }
    body.portal-in .portal-main { padding-bottom: 2rem; }
    body.portal-in .portal-foot { padding-bottom: 1.5rem; }
    .portal-main { padding-top: 1.75rem; }
}
@media (max-width: 420px) { .portal-brand-sub { display: none; } }

/* Content */
.portal h1 { font-size: 1.45rem; margin-bottom: .25rem; }
.portal .lede { color: var(--bs-secondary-color); margin-bottom: 1.1rem; }
.portal .card { border-radius: 14px; margin-bottom: 1rem; }
.portal .card-body { padding: 1.1rem; }
.portal .card-header { border-radius: 14px 14px 0 0 !important; padding: .75rem 1.1rem; }
.portal .form-control, .portal .form-select { font-size: 1rem; min-height: 46px; }
.portal textarea.form-control { min-height: 110px; }
.portal .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.portal .btn-sm { min-height: 34px; }
.portal .form-label { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.portal .hint { font-size: .85rem; color: var(--bs-secondary-color); }

.suite-card { background: linear-gradient(135deg, var(--hm-green-dark), var(--hm-green) 60%, var(--hm-green-mid)); color: #fff; border: 0; }
.suite-card .card-body { padding: 1.25rem; }
.suite-card .where { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; }
.suite-card .addr { opacity: .85; font-size: .9rem; }
.suite-card .chip { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); }

.money-big { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.money-big.owing { color: #ef6b63; }
[data-bs-theme=light] .money-big.owing { color: #b8322b; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.quick a {
    display: flex; flex-direction: column; gap: .2rem; padding: .95rem 1rem; border-radius: 14px;
    background: var(--hm-surface); border: 1px solid var(--bs-border-color); color: inherit; text-decoration: none !important;
    transition: transform .15s ease, border-color .15s ease;
}
.quick a:hover { border-color: var(--hm-green-mid); transform: translateY(-1px); }
.quick a strong { font-family: var(--font-heading); font-size: .98rem; }
.quick a span { font-size: .82rem; color: var(--bs-secondary-color); }
.quick a.urgent { border-color: rgba(229, 83, 75, .5); }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li { padding: .8rem 0; border-bottom: 1px solid var(--bs-border-color); display: flex; gap: .75rem; align-items: center; }
.list-plain > li:last-child { border-bottom: 0; }
.list-plain .grow { flex: 1; min-width: 0; }
.list-plain .title { font-weight: 600; overflow-wrap: anywhere; }
.list-plain .meta { font-size: .82rem; color: var(--bs-secondary-color); }

.ledger { width: 100%; font-size: .9rem; }
.ledger td { padding: .55rem 0; border-bottom: 1px solid var(--bs-border-color); vertical-align: top; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: .75rem; }
.ledger .paid { color: #2fbf87; }
[data-bs-theme=light] .ledger .paid { color: #157a55; }

.copy-row { display: flex; gap: .5rem; align-items: center; }
.copy-row code { flex: 1; padding: .55rem .7rem; background: var(--hm-surface-2); border: 1px solid var(--bs-border-color); border-radius: 8px; color: inherit; font-size: .95rem; overflow-wrap: anywhere; }

.sign-card { max-width: 440px; margin: 4vh auto 0; }
.sign-card .card-body { padding: 1.5rem; }

.emergency-box { border: 1px solid rgba(229, 83, 75, .5); background: rgba(229, 83, 75, .08); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.emergency-box a.btn { margin-top: .5rem; }

.step-dots { display: flex; gap: .35rem; margin: .4rem 0 0; }
.step-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--bs-border-color); }
.step-dots span.on { background: var(--hm-accent); }

.fade-in { animation: portal-in .35s ease both; }
@keyframes portal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }