:root {
    --void: #001a2d;
    --ink: #f7f9fb;
    --blood: #8b0000;
    --steel: #5f6e7c;
    --gold: #c9a634;
    --slate: #1a1a1a;
    --glow-blood: rgba(139,0,0,.55);
    --glow-gold: rgba(201,166,52,.55);
    --line: rgba(255,255,255,.06);
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(180deg, #002a45 0%, var(--void) 40%, var(--void) 70%, #000d16 100%);
    color: var(--ink);
}

.blueprint-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(95,110,124,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(95,110,124,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
}

/* Navbar */
.navbar {
    background: linear-gradient(180deg, var(--void) 0%, #002a45 100%);
    border-bottom: 2px solid var(--slate);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
}

.navbar-brand:hover {
    color: var(--gold);
    text-decoration: none;
}

.navbar-brand-text {
    display: flex;
    flex-direction: column;
}

.navbar-brand-title {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.15em;
    font-size: 1rem;
}

.navbar-brand-tagline {
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
}

.navbar .nav-link {
    color: var(--ink) !important;
    font-size: 0.9rem;
}

.navbar .nav-link:hover {
    color: var(--gold) !important;
}

.nav-user-btn {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--ink);
    padding: 0.25rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

.nav-user-btn:hover {
    background: var(--gold);
    color: var(--void);
    text-decoration: none;
}

/* Admin subnav */
.admin-subnav {
    background: var(--slate);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-subnav-label {
    color: var(--gold);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.5rem;
}

.admin-subnav-link {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-subnav-link:hover {
    background: var(--void);
    border-color: var(--gold);
    color: var(--gold);
    text-decoration: none;
}

/* Dropdown */
.dropdown-menu {
    background: var(--slate) !important;
    border: 1px solid var(--line) !important;
}

.dropdown-item {
    color: var(--ink) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--void) !important;
    color: var(--gold) !important;
}

.dropdown-divider {
    border-color: var(--line) !important;
}

/* Main content */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.main-content.dashboard-content {
    align-items: flex-start;
    padding-top: 2rem;
}

/* Login card */
.login-card {
    background: var(--slate);
    border: 1px solid var(--line);
    border-radius: 4px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    color: var(--ink);
}

.login-header {
    text-align: center;
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid var(--line);
}

.login-header h1 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.1em;
    margin: 0.5rem 0 0;
}

.login-header .subtitle {
    color: var(--steel);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-failed {
    max-width: 420px;
    background: var(--blood);
    border-left: 3px solid #ff4444;
    color: var(--ink);
}

.login-actions {
    display: flex;
    gap: 0.5rem;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

label, .form-label {
    display: block;
    font-size: 0.8rem;
    color: var(--steel);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink) !important;
    background: var(--void) !important;
    border: 1px solid var(--steel) !important;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px var(--glow-gold) !important;
}

.form-control::placeholder {
    color: var(--steel) !important;
    opacity: 0.6;
}

.form-control:disabled,
.form-control[readonly] {
    background: rgba(0,26,45,0.5) !important;
    color: var(--steel) !important;
    border-color: rgba(95,110,124,0.3) !important;
}

select.form-control {
    appearance: auto;
}

/* Buttons */
.btn-primary {
    display: block;
    width: 100%;
    padding: 0.7rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--void) !important;
    background: var(--gold) !important;
    border: none !important;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #b8952e !important;
    color: var(--void) !important;
}

.btn-gold {
    background: var(--gold) !important;
    color: var(--void) !important;
    border: none !important;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.btn-gold:hover {
    background: #b8952e !important;
    color: var(--void) !important;
}

.btn-void {
    background: var(--void) !important;
    color: var(--ink) !important;
    border: 1px solid var(--steel) !important;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    transition: border-color 0.15s ease;
}

.btn-void:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

.btn-blood {
    background: var(--blood) !important;
    color: var(--ink) !important;
    border: none !important;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 3px;
}

.btn-blood:hover {
    background: #a00000 !important;
}

.btn-outline-secondary {
    color: var(--steel) !important;
    border-color: var(--steel) !important;
    background: transparent !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-outline-secondary:hover {
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    background: rgba(255,255,255,0.05) !important;
}

/* Panel cards */
.panel-card {
    background: var(--slate);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    color: var(--ink);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.panel-card-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--line);
}

.panel-card-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.panel-card-header .subtitle {
    color: var(--steel);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel-card-body {
    padding: 1.5rem;
}

/* Tables */
.table {
    color: var(--ink);
}

.table thead th {
    background: var(--void);
    color: var(--ink);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border: none;
}

.table td {
    vertical-align: middle;
    color: var(--ink);
    border-color: var(--line);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0,26,45,0.3);
}

/* Links */
a {
    color: var(--gold);
    transition: color 0.1s ease;
}

a:hover {
    color: #b8952e;
}

/* Alerts */
.alert-danger,
.alert-danger.alert-dismissible {
    background: var(--blood) !important;
    border-color: var(--blood) !important;
    color: var(--ink) !important;
    border-radius: 3px;
}

.alert-danger .close,
.alert-danger .close:hover {
    color: var(--ink) !important;
    opacity: 0.8;
    text-shadow: none;
}

.alert-error {
    background: var(--blood);
    border-left: 3px solid #ff4444;
    color: var(--ink);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 3px;
}

.alert-success,
.alert-success.alert-dismissible {
    background: rgba(26,122,26,0.4) !important;
    border-color: #1a7a1a !important;
    color: var(--ink) !important;
    border-radius: 3px;
}

.alert-success .close,
.alert-success .close:hover {
    color: var(--ink) !important;
    opacity: 0.8;
    text-shadow: none;
}

/* Toast */
.site-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    border-left: 3px solid;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* Badges */
.badge {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
}

/* Nav tabs (LDAP login) */
.nav-tabs {
    border-color: var(--line);
}

.nav-tabs .nav-link {
    color: var(--steel);
    border-color: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-tabs .nav-link:hover {
    color: var(--ink);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    background: var(--slate);
    border-color: var(--line) var(--line) var(--slate);
    color: var(--gold);
}

/* Action groups */
.action-group {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
}

/* Utility */
.color-gold { color: var(--gold); }
.color-steel { color: var(--steel); }
.color-blood { color: var(--blood); }
.color-ink { color: var(--ink); }
.code-steel { color: var(--steel); font-size: 0.75rem; }

/* Footer */
.footer {
    background: var(--void);
    border-top: 2px solid var(--slate);
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 1rem;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.footer a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

.footer a:hover {
    color: var(--gold);
}

.footer .copyright {
    color: var(--steel);
}

.footer-meta {
    display: flex;
    align-items: baseline;
}

.footer-meta-item {
    display: flex;
    align-items: baseline;
    margin-left: 1.5rem;
}

.footer-meta-label {
    color: var(--steel);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-right: 0.4rem;
}

@media (max-width: 576px) {
    .login-card { margin: 0 0.5rem; }
    .navbar-brand-tagline { display: none; }
    .footer {
        flex-direction: column;
        text-align: center;
        padding: 0.5rem 1rem;
    }
    .login-actions {
        flex-direction: column;
    }
    .login-actions .btn { width: 100%; }
}

/* ── Network graph controls ── */
.network-controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 10;
}

.network-controls .btn-net {
    width: 2rem;
    height: 2rem;
    background: var(--gold);
    color: var(--void);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.network-controls .btn-net:hover {
    background: #b8952e;
}

/* Engagement list cards — stacked vertical representation of an engagement on the engagements list view */
.engagement-card-title-wrap {
    flex: 1;
    min-width: 0;
    padding-right: 0.5rem;
}

.panel-card-header h2.engagement-card-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

.engagement-card-actions {
    flex-shrink: 0;
}

.engagement-card-description {
    white-space: pre-wrap;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.engagement-card-meta {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.engagement-card-meta:last-child {
    margin-bottom: 0;
}

.empty-state {
    color: var(--steel);
    text-align: center;
}

/* Confirm modal — themed Bootstrap modal used for destructive-action prompts */
.modal-content {
    background: var(--slate);
    border: 1px solid var(--line);
    color: var(--ink);
}

.modal-header {
    border-bottom: 1px solid var(--line);
}

.modal-footer {
    border-top: 1px solid var(--line);
}

.modal-title {
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Detail table: label/value cells used on entity detail pages ───────────── */
.detail-label {
    color: var(--steel);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    border-color: var(--line);
}

.detail-label-first {
    width: 160px;
}

.detail-label-multiline {
    vertical-align: top;
}

.detail-label-last {
    color: var(--steel);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
}

.detail-value {
    border-color: var(--line);
}

.detail-value-prewrap {
    border-color: var(--line);
    white-space: pre-wrap;
}

.detail-value-last {
    border: none;
}

/* ── Form label styled to match detail-label (used on inline add forms) ───── */
.form-label-meta {
    color: var(--steel);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Empty-state table cells in list tables ───────────────────────────────── */
.empty-state-cell {
    color: var(--steel);
    padding: 2rem;
}

.empty-state-cell-sm {
    color: var(--steel);
    padding: 1.5rem;
}

/* ── Compact text utilities used where specific class names aren't warranted */
.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.8rem;
}

.text-prewrap {
    white-space: pre-wrap;
}

/* ── Narrow associations-list swap column (↔) ─────────────────────────────── */
.assoc-swap-col {
    width: 3rem;
}

/* ── Network graph panel wrapper and canvas ───────────────────────────────── */
.network-panel {
    position: relative;
}

.network-canvas {
    height: 75vh;
    background: var(--void);
}

.network-canvas-fullscreen {
    height: 100vh;
}

.network-panel-fullscreen {
    background: var(--void);
}

/* ── Smaller helper text below form fields (e.g. toggle explanations) ─────── */
.form-text-small {
    font-size: 0.8rem;
}

/* ── Integrations landing page — card grid ─────────────────────────────────── */
.integration-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.integration-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--slate);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease;
}

.integration-card:hover {
    border-color: var(--gold);
    text-decoration: none;
}

.integration-card-icon {
    font-size: 2rem;
    color: var(--gold);
    flex: 0 0 auto;
}

.integration-card-body {
    flex: 1 1 auto;
}

.integration-card-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.integration-card-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--steel);
}

/* ── Network header filter form (Show closed engagements toggle) ──────────── */
/* The toggle itself reuses the shared .toggle-switch pattern for visual
   continuity with the engagements list filter; only the surrounding
   form margin needs resetting so the card header's vertical alignment
   stays clean. */
.network-filter-form {
    margin: 0;
}

/* ── Engagement entries rendered inside another entity's detail view ──────── */
.engagement-entry {
    padding: 1rem;
    border-bottom: 1px solid var(--line);
}

.engagement-entry-meta {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.engagement-entry-description {
    white-space: pre-wrap;
    margin-bottom: 0.5rem;
}

.engagement-entry-note {
    font-size: 0.75rem;
}

.engagement-entry-comments-section {
    margin-top: 0.5rem;
}

.engagement-entry-comments-heading {
    color: var(--steel);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ── Comment thread blocks (used on engagement view and nested engagement sections) ── */
.comment-block {
    border-left: 2px solid var(--line);
    padding-left: 0.75rem;
    margin-bottom: 0.5rem;
}

.comment-body {
    white-space: pre-wrap;
    margin-top: 0.25rem;
}

/* Used for activity-stream entries that are not actual comments (file
   attachments, custom activities). Same vertical offset as .comment-body
   but without the pre-wrap inheritance that would render template source
   indentation as visible whitespace inside the wrapper. */
.activity-body {
    margin-top: 0.25rem;
}

.comment-timestamp {
    font-size: 0.75rem;
}

/* ── Custom-activity grid (shared by read-only display and inline edit form) ── */
.custom-activity-input-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: center;
}

.custom-activity-input-label {
    color: var(--steel);
    font-size: 0.8125rem;
    text-align: right;
    margin-bottom: 0;
    white-space: nowrap;
    align-self: center;
}

/* Multi-line content (textareas in edit, .custom-activity-field-text in
   view) is taller than the center-aligned baseline; anchor labels to the
   top so they read with the first line of the value. */
.custom-activity-input-grid label:has(+ textarea),
.custom-activity-input-grid > .custom-activity-input-label:has(+ .custom-activity-field-value-text) {
    align-self: start;
    padding-top: 0.1rem;
}

.custom-activity-field-value {
    color: var(--ink);
    word-break: break-word;
    min-width: 0;
    font-size: 0.875rem;
}

.custom-activity-field-text {
    white-space: pre-wrap;
}

.custom-activity-field-value-number,
.custom-activity-field-value-date,
.custom-activity-field-value-datetime {
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

/* ── Engagement list search bar ───────────────────────────────────────────── */
/* Search input + submit button glue together as one pill via Bootstrap's
   input-group. The group spans the full panel-card-body width; the
   show-closed toggle sits below as a styled switch. */
.engagement-search-group {
    width: 100%;
}
.engagement-search-group .form-control {
    border-right: 0;
}
.engagement-search-group .btn {
    border-radius: 0;
}
.engagement-search-group > :last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.engagement-search-clear {
    border-left: 0;
}
.list-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.list-per-page-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
    font-size: 0.9rem;
    margin-bottom: 0;
}
.list-per-page-select {
    width: auto;
    min-width: 5rem;
}
.list-pagination {
    padding-top: 0.5rem;
}
.list-pagination-info {
    font-size: 0.85rem;
}
.btn.disabled,
.btn-outline-secondary.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* ── Collapsible panel-card header ────────────────────────────────────────── */
/* When a panel-card's header is used as a Bootstrap collapse trigger, the
   left-hand title block gets this class. Clicking the block expands/collapses
   the body; the chevron icon inside the title flips to indicate state.
   Bootstrap's collapse plugin adds the `.collapsed` class to the trigger
   whenever its target is hidden. */
.panel-card-header-collapse {
    cursor: pointer;
    user-select: none;
}
.panel-card-collapse-icon {
    font-size: 0.8em;
    transition: transform 0.2s ease;
    color: var(--steel);
}
.panel-card-header-collapse.collapsed .panel-card-collapse-icon {
    transform: rotate(-90deg);
}
.engagement-search-toggle {
    color: var(--ink);
    font-size: 0.9rem;
}

/* ── Themed toggle switch (styled <input type="checkbox">) ────────────────── */
/* Drop-in replacement for a native checkbox when you want a switch UX. The
   real checkbox is kept in the DOM (form submission works unchanged); it's
   positioned off-screen and the visible switch is drawn via the sibling
   .toggle-switch-track span. */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.toggle-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.toggle-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1.25rem;
    background: var(--steel);
    border-radius: 999px;
    transition: background 0.15s ease;
}
.toggle-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    background: var(--ink);
    border-radius: 50%;
    transition: left 0.15s ease, background 0.15s ease;
}
.toggle-switch-input:checked ~ .toggle-switch-track {
    background: var(--gold);
}
.toggle-switch-input:checked ~ .toggle-switch-track::after {
    left: calc(100% - 1rem - 2px);
    background: var(--void);
}
.toggle-switch-input:focus-visible ~ .toggle-switch-track {
    box-shadow: 0 0 0 2px var(--glow-gold);
}

/* ── Separators used to divide a panel-card-body into two regions ─────────── */
.panel-section-top {
    padding: 1rem;
    border-top: 1px solid var(--line);
}

/* ── Inline association-note edit form inputs ─────────────────────────────── */
.assoc-note-form-row {
    gap: 0.5rem;
}

.assoc-note-input {
    flex: 1;
}

/* ── Auth pages (login / signup) ──────────────────────────────────────────── */
.auth-alert {
    max-width: 420px;
}

.auth-tabs-nav {
    border-color: var(--line);
}

/* ── Partial-field toggle link (+ New organization / + New person) ────────── */
.field-mode-toggle {
    font-size: 0.75rem;
}

/* ── Field-partial hidden create-row default state ────────────────────────── */
.field-create-row-hidden {
    display: none;
}

/* ── API error box — fixed, discardable, shown on HTMX non-2xx responses ──── */
.api-error-box {
    position: fixed;
    top: 1rem;
    right: 1rem;
    max-width: 420px;
    background: var(--blood);
    color: var(--ink);
    border: 1px solid #ff4444;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.api-error-box-body {
    flex: 1;
}

.api-error-box-close {
    background: transparent;
    border: none;
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
}

.api-error-box-close:hover {
    opacity: 1;
}

/* ── Network graph hover preview card ─────────────────────────────────────── */
/* Cards are spawned on node click, persist until dismissed via the close box,
   support drag-repositioning by the header, and carry an "Open" link to the
   entity's full detail page. Data is fetched fresh per card open so the
   content reflects the current record without reloading the graph. */
.network-card-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;  /* the layer itself never blocks the canvas */
}

.network-card-layer > .network-card {
    pointer-events: auto;  /* individual cards are fully interactive */
}

.network-card {
    position: fixed;
    background: var(--slate);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    color: var(--ink);
    width: 320px;
    max-width: 90vw;
    z-index: 1095;
    display: flex;
    flex-direction: column;
}

.network-card-dragging {
    user-select: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}

.network-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    cursor: move;
}

.network-card-header-text {
    flex: 1;
    min-width: 0;
}

.network-card-title {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    word-break: break-word;
}

.network-card a {
    color: var(--gold);
    text-decoration: none;
}

.network-card a:hover {
    text-decoration: underline;
}

.network-card-subtitle {
    color: var(--steel);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.network-card-refresh,
.network-card-close {
    background: transparent;
    border: none;
    color: var(--steel);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.network-card-refresh:hover,
.network-card-close:hover {
    opacity: 1;
    color: var(--ink);
}

.network-card-refresh:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Merge badge on organization cards. Styled as a compact pill that
   sits alongside the header refresh/close icons. Colored like a gold
   action since it's a destructive-but-deliberate operation (moves
   data and deletes the source). */
.network-card-merge {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    line-height: 1.2;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.network-card-merge:hover {
    background: var(--gold);
    color: var(--void);
}

.network-card-body {
    padding: 0.6rem 0.75rem;
    overflow-y: auto;
    max-height: 60vh;
}

.network-card-fields {
    margin: 0;
    font-size: 0.8rem;
}

.network-card-fields:empty {
    display: none;
}

.network-card-fields dt {
    color: var(--steel);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.4rem;
}

.network-card-fields dt:first-child {
    margin-top: 0;
}

.network-card-fields dd {
    margin: 0;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.network-card-comments:not(:empty) {
    margin-top: 0.6rem;
}

.network-card-comments-heading {
    color: var(--steel);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.network-card-comment {
    border-left: 2px solid var(--line);
    padding-left: 0.6rem;
    margin-bottom: 0.4rem;
}

.network-card-comment:last-child {
    margin-bottom: 0;
}

.network-card-comment-meta {
    color: var(--steel);
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
}

.network-card-comment-body {
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.network-card-actions {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
}

.network-card-actions:empty {
    display: none;
}