/* Shared prototype styles — on top of Tailwind's play CDN. */

html, body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
body { background: #fafafa; color: #18181b; -webkit-font-smoothing: antialiased; }

/* Subtle scrollbars for the sidebar / tables. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }

/* Status dots used in unit tables */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
.dot-rented { background: #22c55e; }
.dot-vacant { background: #a1a1aa; }
.dot-maint  { background: #f59e0b; }

/* Pill / badge base — Tailwind utilities cover most, but this keeps widths even. */
.pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; }

/* Kbd */
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 2px 6px; border: 1px solid #e4e4e7; border-bottom-width: 2px; border-radius: 4px; background: #fafafa; color: #52525b; }

/* Mermaid container */
.mermaid { background: transparent; }
.mermaid svg { max-width: 100%; height: auto; }

/* Section card */
.card { background: white; border: 1px solid #e4e4e7; border-radius: 0.75rem; }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; justify-content: space-between; }
.card-title { font-weight: 600; color: #18181b; font-size: 0.9rem; }

/* Table helpers */
table.proto { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
table.proto thead th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #71717a; padding: 0.625rem 1rem; border-bottom: 1px solid #f4f4f5; background: #fafafa; }
table.proto tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #f4f4f5; color: #27272a; vertical-align: middle; }
table.proto tbody tr:last-child td { border-bottom: none; }
table.proto tbody tr:hover { background: #fafafa; }
table.proto tbody tr.clickable { cursor: pointer; }

/* Utility colors for semantic buttons */
.btn-primary { background: #18181b; color: white; }
.btn-primary:hover { background: #27272a; }
.btn-accent { background: #4f46e5; color: white; }
.btn-accent:hover { background: #4338ca; }
.btn-ghost { background: white; color: #3f3f46; border: 1px solid #e4e4e7; }
.btn-ghost:hover { background: #fafafa; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; transition: all 0.15s; }

/* Muted text helper */
.muted { color: #71717a; }