/* Tenant account styles. Tokens match the public site (assets/css/site.css). */
:root {
  --color-primary: #012169;
  --color-primary-hover: #0040CB;
  --color-primary-subtle: #E1EBFF;
  --color-on-primary: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F8F9;
  --color-surface-muted: #EFF1F3;
  --color-border: #E3E6E9;
  --color-border-strong: #76808B;
  --color-text: #111418;
  --color-text-muted: #59626D;
  --color-success: #166534;
  --color-success-subtle: #E3F5E9;
  --color-warning: #8A4A06;
  --color-warning-subtle: #FDF1D8;
  --color-error: #B42318;
  --color-error-subtle: #FDE8E6;
  --color-focus-halo: rgb(31 105 255 / 0.3);
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-pill: 9999px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg-subtle); line-height: 1.55; font-size: 1rem; }
a { color: var(--color-primary); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; }
p { margin: 0 0 0.75rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 2px; }

.topbar { background: #fff; border-bottom: 1px solid var(--color-border); }
.topbar-inner { max-width: 60rem; margin: 0 auto; padding: 0.875rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { text-decoration: none; color: var(--color-primary); font-weight: 800; letter-spacing: 0.04em; font-size: 0.95rem; line-height: 1.1; }
.wordmark small { display: block; font-weight: 600; letter-spacing: 0.3em; font-size: 0.6rem; }
.tabs { max-width: 60rem; margin: 0 auto; padding: 0 1rem; display: flex; gap: 0.25rem; overflow-x: auto; }
.tabs a { padding: 0.75rem 0.875rem; text-decoration: none; color: var(--color-text-muted); font-weight: 600; font-size: 0.9375rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.auth-card { max-width: 26rem; margin: 3rem auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; }
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.muted { color: var(--color-text-muted); }
.small { font-size: 0.875rem; }
.stat { font-size: 1.5rem; font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1.125rem; border-radius: var(--radius-pill); font: inherit; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.375rem; }
.field { margin-bottom: 1rem; }
input, select, textarea { width: 100%; font: inherit; padding: 0.625rem 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: #fff; color: var(--color-text); }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary-hover); box-shadow: 0 0 0 3px var(--color-focus-halo); }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 600; margin-bottom: 0.5rem; }
.choice { display: flex; gap: 0.625rem; align-items: flex-start; font-weight: 400; padding: 0.5rem 0; }
.choice input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; }

.notice { border-radius: var(--radius-md); padding: 0.875rem 1rem; margin-bottom: 1rem; }
.notice-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.notice-error { background: var(--color-error-subtle); color: var(--color-error); }
.notice-success { background: var(--color-success-subtle); color: var(--color-success); }
.badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: var(--radius-pill); background: var(--color-surface-muted); font-size: 0.8125rem; font-weight: 600; }
.badge-success { background: var(--color-success-subtle); color: var(--color-success); }
.badge-error { background: var(--color-error-subtle); color: var(--color-error); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 0.5rem 0 0.5rem 1rem; border-left: 2px solid var(--color-border); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { text-align: left; padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1rem; margin: 0; }
.details dt { color: var(--color-text-muted); }
.details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.code-value { padding: 0.75rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: 0.8125rem; }
summary { cursor: pointer; margin-bottom: 1rem; overflow-wrap: anywhere; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
.compact-field { max-width: 18rem; }
.field-button { display: flex; align-items: end; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.5rem; margin-bottom: 1rem; }
.photo-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
@media (max-width: 30rem) {
  .details, .form-row { grid-template-columns: 1fr; }
  .details dd { margin-bottom: 0.5rem; }
  .auth-card { margin: 1rem; padding: 1.25rem; }
  main { padding-inline: 0.75rem; }
  .card { padding: 1rem; }
  .field-button .btn, form > .btn { width: 100%; }
}