/* Supplementary styles — additive only. Layout, sidebar, topbar, login, cards,
   tables, forms, and role badges all come from the original style.css.
   This file only fills in classes the theme genuinely doesn't define. */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.total-table { width: 320px; margin-left: auto; border-collapse: collapse; }
.total-table td { padding: 6px 10px; }
.total-table .grand td { font-weight: 700; border-top: 2px solid var(--green-950, #111827); }

.photo-card { border: 1px solid var(--border, #eef0f3); border-radius: 10px; padding: 10px; }
.muted { color: var(--text-muted, #6b7280); font-size: .85rem; }

.form-check label { font-weight: 400; display: flex; align-items: center; gap: 8px; }

.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.search-box { margin-bottom: 14px; max-width: 360px; }
[data-live-region] { position: relative; transition: opacity .15s ease; }
[data-live-region].loading { opacity: .45; pointer-events: none; }

/* Domain status badges (bird/sale/investment lifecycle states) */
.badge-active, .badge-approved, .badge-paid { background: #16a34a20; color: #16a34a; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-inactive, .badge-withdrawn { background: #6b728020; color: #6b7280; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-sold, .badge-pending, .badge-partial { background: #d9770620; color: #d97706; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-donated { background: #0891b220; color: #0891b2; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-dead, .badge-rejected, .badge-unpaid { background: #dc262620; color: #dc2626; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-returned { background: #7c3aed20; color: #7c3aed; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-reassigned { background: #ea580c20; color: #ea580c; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }

/* Staff/member chat panels (not part of the original template) */
.chat-layout { display: flex; gap: 16px; height: 70vh; }
.chat-sidebar { width: 220px; border-right: 1px solid var(--border, #eef0f3); overflow-y: auto; }
.chat-member { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: inherit; }
.chat-member.active, .chat-member:hover { background: #eef2ff; }
.chat-window { flex: 1; display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble { max-width: 60%; padding: 8px 12px; border-radius: 12px; }
.chat-bubble.me { align-self: flex-end; background: var(--green-700, #4f46e5); color: #fff; }
.chat-bubble.them { align-self: flex-start; background: #f1f5f9; }
.chat-time { display: block; font-size: .7rem; opacity: .7; margin-top: 4px; }
.chat-form { display: flex; gap: 10px; margin-top: 10px; }