body {
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 0;
    background:#f6f7f9;
    line-height: 1.5;
}

#headerMasthead {
    background-color: #27155b;
    color:#fff;
    padding: 14px 20px;
}

#headerMasthead .logged-in {
    position: absolute;
    right: 30px;
    top: 10px;
}

#headerMasthead .main-menu {
    margin: 0.5rem 0;
}

#headerMasthead .main-menu a {
    padding-left: 10px;
    padding-right: 10px;
}

#mainContent {
    max-width: 960px;
    margin: 20px auto;
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* Apply to any page that needs more horizontal room */
body.wide-content #mainContent {
    max-width: 1200px;
}

a {
    color:#1f6feb;
    text-decoration:none;
}

#headerMasthead a {
    color:#7ca1d9;
}

a:hover {
    text-decoration:underline;
}

table {
    border-collapse: collapse;
    width:100%;
}

th, td {
    border-bottom:1px solid #e5e7eb;
    padding:8px 6px;
    text-align:left;
}

.btn {
    display:inline-block;
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #1f6feb;
    background:#eff6ff;
    color:#1f6feb;
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
}

.btn.primary {
    background:#1f6feb;
    color:#fff;
}

.btn.danger {
    border-color:#dc2626;
    color:#dc2626;
}

li:has(form) {
    margin: 0.5rem 0;
}

li form .btn {
    padding: 2px 7px;
}

.field {
    margin: 10px 0;
}

.error {
    color:#b91c1c;
    font-size: 0.9em;
}

.flash {
    background:#ecfdf5;
    border:1px solid #10b981;
    color:#064e3b;
    padding:8px 10px;
    border-radius:8px;
    margin-bottom:12px;
}

/* Forms */
fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

legend {
    font-weight: bold;
    font-size: 24px;
    padding: 0 6px;
    color: #374151;
}

.field.group-start {
    margin-top: 24px;
}

.field label {
    display: block;
    font-weight: bold;
    font-size: 0.85em;
    margin-bottom: 3px;
    color: #374151;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="date"],
.field select,
.field textarea {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

/* Flex layout helpers */
.side-by-side {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.side-by-side > * {
    flex: 1;
    min-width: 0;
}

.three-col {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.three-col > * {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .side-by-side,
    .three-col {
        flex-direction: column;
    }
}

.home-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.home-nav-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 18px;
    min-width: 140px;
}

.home-nav-label {
    font-weight: bold;
    font-size: 0.85em;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.home-nav-item a {
    display: inline-block;
    margin-right: 10px;
    font-size: 0.95em;
}

tr.former td {
    color: #9ca3af;
}

/* ── Stats filter bar ─────────────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 1.5rem;
}

.filter-bar .field {
    margin: 0;
}

.filter-bar .field label {
    display: block;
    font-size: 0.78em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 3px;
}

.filter-bar select,
.filter-bar input[type="text"] {
    width: auto;
    max-width: none;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    background: #fff;
}

/* ── Stats table ──────────────────────────────────────────────────────────── */

.stats-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stats-table {
    font-size: 0.9em;
}

.stats-table thead th {
    background: #f3f4f6;
    white-space: nowrap;
}

/* Sticky first column so org names stay visible when scrolling horizontally */
.stats-table thead th:first-child,
.stats-table tbody td:first-child,
.stats-table tfoot td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}

.stats-table thead th:first-child {
    background: #f3f4f6;
}

.stats-table tfoot td:first-child {
    background: #f3f4f6;
}

.stats-table td.amount,
.stats-table th.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-right: 14px;
}

/* Subtle stripe on hover for data rows */
.stats-table tbody tr:not(.stat-detail-row):hover td {
    background: #f0f7ff;
}

/* Remove the dividing border between an org row and the detail row that
   follows it — they belong together visually */
.stats-table tbody tr:has(+ .stat-detail-row) td {
    border-bottom: none;
}

/* ── Detail rows ──────────────────────────────────────────────────────────── */

.stat-detail-row td {
    padding-top: 0;
    border-top: none;
    background: #fafafa;
}

/* No hover highlight bleeds onto detail rows */
.stat-detail-row:hover td {
    background: #fafafa;
}

.stat-detail-row details {
    margin-left: 1.5rem;
    margin-bottom: 6px;
}

.stat-detail-row summary {
    cursor: pointer;
    color: #6b7280;
    font-size: 0.85em;
    user-select: none;
    list-style: none; /* remove default triangle in some browsers */
    display: inline;
}

.stat-detail-row summary::before {
    content: '▶ ';
    font-size: 0.7em;
}

.stat-detail-row details[open] summary::before {
    content: '▼ ';
}

.stat-detail-row summary:hover {
    color: #1f6feb;
    text-decoration: underline;
}

.stat-detail-table {
    width: auto;
    margin: 8px 0 4px 1rem;
    border-left: 3px solid #e5e7eb;
    font-size: 0.92em;
}

.stat-detail-table th {
    background: none;
    color: #6b7280;
    font-size: 0.85em;
    padding: 3px 10px;
}

.stat-detail-table td {
    padding: 3px 10px;
    border-bottom: 1px solid #f3f4f6;
}

.stat-detail-table td.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 14px;
}

/* ── Stats totals footer ──────────────────────────────────────────────────── */

.stats-table tfoot .totals-row td {
    background: #f3f4f6;
    border-top: 2px solid #d1d5db;
}

/* ── Year-to-year accounting table ───────────────────────────────────────── */

table.accounting {
    border-collapse: collapse;
    margin-top: 1rem;
    max-width: 1200px;
    width: 100%;
}

table.accounting th,
table.accounting td {
    padding: 4px 10px;
}

table.accounting td.money,
table.accounting td.percent {
    white-space: nowrap;
}

table.accounting th {
    text-align: left;
    font-weight: normal;
    min-width: 220px;
}

table.accounting thead th {
    font-weight: bold;
    text-align: right;
}

table.accounting thead th:first-child {
    text-align: left;
}

table.accounting td.money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 110px;
}

table.accounting td.percent {
    text-align: right;
    font-size: 0.85em;
    color: #555;
    min-width: 70px;
    padding-left: 14px;
}

table.accounting tr.divider td {
    border-top: 1px solid #d1d5db;
    padding: 2px 0;
    line-height: 0.5;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */

.hidden { display: none; }

/* ── Member Benefits select page ─────────────────────────────────────────── */

.heading-followedby-link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.heading-followedby-link h3 { margin: 0; }

#organizationList {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ccc;
    width: 400px;
}

#organizationList li { border-bottom: 1px solid #eee; }

#organizationList li a {
    display: block;
    padding: 4px 8px;
    text-decoration: none;
    color: inherit;
}

#organizationList li a:hover { background: #f0f4ff; }

/* ── Member Benefits report (quasi-paper) ────────────────────────────────── */

.quasi-paper {
    background: #fff;
    border: 1px solid #ccc;
    padding: 2rem 2.5rem;
    max-width: 800px;
}

.quasi-paper-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.quasi-paper-header h1 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
}

.quasi-paper-sub {
    margin-bottom: 1rem;
}

.quasi-paper-sub p { margin: 0.2rem 0; }

table.quasi-paper-info {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

table.quasi-paper-info td {
    padding: 2px 8px 2px 0;
    width: 33%;
}

.quasi-paper-section { margin-top: 1.5rem; }

.quasi-paper-section h2 {
    font-size: 1rem;
    border-bottom: 1px solid #999;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

table.quasi-paper-data {
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

table.quasi-paper-data td {
    padding: 2px 16px 2px 0;
    white-space: nowrap;
}

table.quasi-paper-data td.currency {
    text-align: right;
    min-width: 90px;
}

table.quasi-paper-data tr.total td {
    font-weight: bold;
    border-top: 1px solid #999;
    padding-top: 4px;
}