/* ── Reset & base ────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #111827;
  background: #f9fafb;
}

/* ── Page layout ─────────────────────────────────────────────────────── */

.page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Top nav */
.app-nav {
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 52px;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-nav a { text-decoration: none; font-size: 0.875rem; }
.app-nav .app-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; }

/* Tailwind's text-white / text-white/80 / hover:text-white utilities live in
   @layer utilities, which always loses to the *unlayered* global `a` (line ~200)
   and `form.button_to button` (destructive-link default, further down) rules
   below, regardless of specificity — CSS Cascade Layers rules unlayered
   declarations above ALL layered ones, specificity notwithstanding. So the
   nav's white text has to be asserted here too, in the same unlayered origin,
   where normal specificity math actually applies again. The Tailwind classes
   stay in the markup for font-weight/border/transition, which aren't contested. */
.app-nav a,
.app-nav form.button_to button {
  color: rgba(255, 255, 255, 0.8);
}

/* Same Cascade Layers gotcha as above, hitting any filled bg-lens-primary
   button rendered as an <a> (e.g. the Financials tab's "Generate report"
   and "Upload" buttons) — Tailwind's text-white is layered and loses to the
   unlayered `a { color }` rule below, so the label renders in link-blue on
   a near-identical blue background instead of white. */
.btn-primary-link,
.btn-primary-link:hover {
  color: #fff;
}

.app-nav a:hover,
.app-nav a.font-semibold,
.app-nav form.button_to button:hover {
  color: #fff;
}

.app-nav .app-name { color: #fff; }
.app-nav form.button_to button { text-decoration: none; }

/* User menu — reuses the <details>/<summary> dropdown pattern already used
   for the Companion history item's "⋯" menu (no JS needed for open/close). */
.user-menu { position: relative; }

.user-menu__trigger {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.user-menu__trigger::after { content: "▾"; font-size: 0.6rem; opacity: 0.7; }
.user-menu__trigger:hover { background: rgba(255, 255, 255, 0.12); }

.user-menu__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  margin-top: 6px;
  min-width: 150px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  padding: 4px 0;
}

/* Same Cascade Layers gotcha as the .app-nav a / .btn-primary-link notes
   above — .app-nav a is unlayered and would otherwise leave these dropdown
   items in barely-visible white-on-white text against the dropdown's white
   background. Two classes beats .app-nav a's one-class-one-element weight
   regardless of source order. */
.app-nav .user-menu__item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #334155;
  font-size: 0.8rem;
  font-family: inherit;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
}
.app-nav .user-menu__item:hover {
  background: #f1f5f9;
  color: #334155;
}

.sidebar-toggle-btn {
  position: fixed;
  top: 66px;
  left: 200px;
  z-index: 20;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1.05rem;
  line-height: 1;
  color: #9ca3af;
  transition: left 0.2s ease;
}

.sidebar-toggle-btn:hover { color: #374151; }
body.sidebar-collapsed .sidebar-toggle-btn { left: 12px; }

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 52px);
}

body.sidebar-collapsed .sidebar { display: none; }

.app-nav .nav-badge {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.app-nav .nav-badge-failed {
  background: #d97706;
}

.page-content {
  flex: 1;
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.sidebar {
  flex: 0 0 240px;
  width: 240px;
  background: #f1f5f9;
  border-right: 1px solid #e2e8f0;
  box-shadow: 1px 0 4px rgba(15, 23, 42, 0.04), 2px 0 10px rgba(15, 23, 42, 0.03);
  padding: 20px 12px;
  position: sticky;
  top: 52px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
}

.sidebar-flat-link {
  display: block;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  margin-bottom: 12px;
}

.sidebar-flat-link:hover { background: #e2e8f0; text-decoration: none; }
.sidebar-flat-link.active { color: #1d4ed8; background: #eff6ff; }

.sidebar-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9ca3af;
  padding: 0 10px;
  margin-bottom: 6px;
}

.sidebar-tree-node { margin-bottom: 2px; }

.sidebar-tree-node__header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-tree-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 0.65rem;
  color: #9ca3af;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.1s ease;
}

.sidebar-tree-toggle[aria-expanded="true"] { transform: rotate(90deg); }

.sidebar-tree-node__label {
  flex: 1;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
}

.sidebar-tree-node__label:hover { background: #e2e8f0; text-decoration: none; }
.sidebar-tree-node__label.active { color: #1d4ed8; background: #eff6ff; }

.sidebar-tree-children {
  display: none;
  flex-direction: column;
  padding-left: 22px;
}

.sidebar-tree-children--open { display: flex; }

.sidebar-tree-child {
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 0.8125rem;
  color: #6b7280;
  text-decoration: none;
}

.sidebar-tree-child:hover { background: #e2e8f0; color: #374151; text-decoration: none; }
.sidebar-tree-child.active { color: #1d4ed8; background: #eff6ff; font-weight: 600; }

/* ── Typography ──────────────────────────────────────────────────────── */

h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 16px; color: #0f172a; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 24px 0 12px; color: #1e293b; }
h3 { font-size: 1rem;   font-weight: 600; margin: 20px 0 8px;  color: #1e293b; }

p { margin: 0 0 12px; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.draft-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 16px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

nav.breadcrumb, nav[class=""] {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 16px;
}

nav.breadcrumb a, nav[class=""] a { color: #4b5563; }

/* ── Flash messages ──────────────────────────────────────────────────── */

#notice, #alert {
  padding: 10px 16px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

#notice { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
#alert  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Forms ───────────────────────────────────────────────────────────── */

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

input[type="submit"],
button[type="submit"],
.btn {
  display: inline-block;
  padding: 9px 18px;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  background: #1d4ed8;
  color: #fff;
  font-family: inherit;
  transition: background 0.15s;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.btn:hover { background: #1e40af; }

input[type="submit"]:disabled,
button:disabled { opacity: 0.6; cursor: not-allowed; }

form > div { margin-bottom: 14px; }

/* Devise / simple form wrappers */
.field        { margin-bottom: 14px; }
.actions      { margin-top: 20px; }

/* ── File drop zone ──────────────────────────────────────────────────── */

.dropzone {
  position: relative;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover { border-color: #93c5fd; background: #f0f7ff; }

.dropzone.drag-over {
  border-color: #1d4ed8;
  background: #eff6ff;
}

.dropzone-text {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.upload-staging-table {
  margin-top: 12px;
  margin-bottom: 0;
}

.upload-staging-table td { vertical-align: middle; }
.upload-staging-table select { margin: 0; }
.upload-staging-table select:disabled { opacity: 0.6; cursor: not-allowed; }

.upload-row-status {
  font-size: 0.85rem;
  color: #9ca3af;
}

.upload-row-status--ok    { color: #059669; font-weight: 600; }
.upload-row-status--error { color: #dc2626; font-weight: 600; }

.dropzone-filename {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d4ed8;
}

.dropzone-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dropzone-clear:hover { background: #fee2e2; color: #dc2626; }

.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.helper-text {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: -8px;
}

.error_notification { color: #dc2626; margin-bottom: 12px; font-size: 0.9rem; }
#error_explanation {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #991b1b;
  font-size: 0.875rem;
}
#error_explanation ul { margin: 6px 0 0 16px; padding: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-secondary:hover { background: #f9fafb; }

.btn-destructive {
  background: #fff;
  color: #dc2626;
  border: 1px solid #dc2626;
}
.btn-destructive:hover { background: #fef2f2; }

/* ── Inbound documents queue ─────────────────────────────────────────── */

.inbound-doc-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

.inbound-doc-type-select,
.inbound-property-select {
  width: 100%;
}

.inbound-doc-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Inline button_to forms don't add extra space */
form.button_to { display: inline; }
form.button_to button {
  background: none;
  border: none;
  padding: 0;
  color: #dc2626;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

form.button_to button.delete-x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

form.button_to button.delete-x-btn:hover { background: #fee2e2; color: #dc2626; }

/* ── Tables ──────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

thead th {
  text-align: left;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 600;
}

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }

/* ── Badges ──────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 2px 7px;
  background: #e5e7eb;
  color: #374151;
}

.badge--capex        { background: #dbeafe; color: #1d4ed8; }
.badge--refinance    { background: #ede9fe; color: #6d28d9; }
.badge--acquisition  { background: #d1fae5; color: #065f46; }
.badge--disposition  { background: #fef3c7; color: #92400e; }
.badge--other        { background: #f3f4f6; color: #4b5563; }

/* ── Auth pages (Devise) ─────────────────────────────────────────────── */

.auth-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.auth-container h2 { margin-top: 0; }
.auth-container .actions input { width: 100%; }

/* Devise wraps forms in a div with no class — target specifically */
body > div > h2 { /* Devise sign-in heading fallback */ }

/* ── Sections / cards ────────────────────────────────────────────────── */

section { margin-bottom: 40px; }

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

/* ── Property tab navigation ─────────────────────────────────── */

.property-tabs {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 28px;
  gap: 0;
}

.property-tab {
  display: inline-block;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
}

.property-tab:hover { color: #374151; text-decoration: none; }
.property-tab.active { color: #1d4ed8; border-bottom-color: #1d4ed8; }

/* Snapshot date tabs on rent roll (reuse same style) */
.snapshot-tabs {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 20px;
  gap: 0;
  flex-wrap: wrap;
}

.snapshot-tab {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.snapshot-tab:hover { color: #374151; text-decoration: none; }
.snapshot-tab.active { color: #1d4ed8; border-bottom-color: #1d4ed8; }

/* ── Month End Report ────────────────────────────────────────── */

.mer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.mer-panel { min-width: 0; }

.mer-full { margin-bottom: 28px; }

.mer-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
  margin: 0 0 10px;
}

.mer-col-label {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #9ca3af;
  margin-left: 6px;
}

.mer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.mer-table thead th {
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.mer-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #111827;
}

.mer-table tbody tr:last-child td { border-bottom: none; }

.mer-label-col { width: 55%; }
.mer-num-col   { text-align: right; font-variant-numeric: tabular-nums; }

.mer-subtotal td {
  font-weight: 600;
  background: #f9fafb;
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
}

.mer-gap td {
  padding: 4px 0;
  border-bottom: none;
  background: transparent;
}

.mer-empty { color: #d1d5db; }

.inline-rate-form {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
}

.inline-rate-input {
  width: 5rem;
  padding: 2px 5px;
  font-size: 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  text-align: right;
}

.inline-rate-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.inline-rate-pct {
  font-size: 0.85rem;
  color: #6b7280;
}

.inline-rate-save {
  background: none;
  border: none;
  cursor: pointer;
  color: #059669;
  font-size: 0.9rem;
  padding: 2px 4px;
  border-radius: 4px;
}

.inline-rate-save:hover { background: #f0fdf4; }

/* ── Portfolio summary strip ─────────────────────────────────── */

.portfolio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px 0 28px;
}

.portfolio-stat {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Hover-reveal row actions ────────────────────────────────────────── */
/* CSS-only show/hide — no JS, no behavior change. .table-row is the class
   for non-<tr> "row" layouts (e.g. the Documents/Pinned redesigns) that
   still want this same reveal-on-hover behavior. */
.row-actions {
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 4px;
}

tr:hover .row-actions,
.table-row:hover .row-actions {
  visibility: visible;
}

.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 0;
  text-decoration: none;
}

.icon-btn:hover { background: rgba(0, 0, 0, 0.06); }

.icon-btn--edit    { color: #F59E0B; }
.icon-btn--danger  { color: var(--color-lens-failed); }
.icon-btn--muted   { color: #6b7280; }

/* ── Documents tab (Dropbox-style row layout) ────────────────────────── */
.upload-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.upload-panel h2 { margin: 0 0 12px; font-size: 1rem; }

.document-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}

.document-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f1f3;
}
.document-row:last-child { border-bottom: none; }
.document-row:hover { background: #f9fafb; }

.document-row__icon { flex-shrink: 0; display: flex; }

.document-row__main { flex: 1; min-width: 0; }

.document-row__filename {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-row__filename:hover { text-decoration: underline; }

.document-row__meta {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 2px;
}

.document-row__status { flex-shrink: 0; }

.document-row__review-link { font-size: 0.78rem; margin-left: 6px; }

.document-row__date {
  flex-shrink: 0;
  min-width: 84px;
  text-align: right;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* ── Pinned insights tab ─────────────────────────────────────────────── */
.pin-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
}

.pin-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pin-card__meta { font-size: 11px; color: #6b7280; }
.pin-card__period-tag { font-size: 11px; color: #9ca3af; margin-top: 2px; }

.pin-card__header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pin-visibility-select {
  font-size: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 3px 6px;
  background: #f9fafb;
  color: #374151;
}

.pin-question {
  font-style: italic;
  font-size: 0.9rem;
  color: #111827;
  margin: 0 0 8px;
  cursor: text;
}

.pin-question-input {
  width: 100%;
  font-style: italic;
  font-size: 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  font-family: inherit;
}

.pin-answer {
  font-size: 0.9rem;
  color: #374151;
  cursor: text;
}

.pin-answer-input {
  width: 100%;
  font-size: 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px;
  font-family: inherit;
}

.pin-edited-label {
  font-size: 10px;
  color: #9ca3af;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pin-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f1f3;
}

.pin-card__note { flex: 1; }

.pin-include-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}

.pin-empty-state {
  text-align: center;
  padding: 64px 16px;
  color: #9ca3af;
}
.pin-empty-state svg { margin: 0 auto 12px; }
.pin-empty-state__subtext { font-size: 0.85rem; margin-top: 4px; }

.portfolio-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.portfolio-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.portfolio-stat__value--positive { color: #059669; }
.portfolio-stat__value--negative { color: #dc2626; }
.portfolio-stat__value--muted    { color: #9ca3af; font-weight: 500; font-size: 1.1rem; }

.portfolio-noi-chart-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px 0;
}

.portfolio-noi-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.portfolio-noi-chart-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portfolio-noi-chart-select {
  font-size: 0.8rem;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  background: #f9fafb;
  cursor: pointer;
}