pre {
    background-color: inherit;
    color: inherit;
    padding: 0.5em;
}

/* Theme dropdown */
.theme-dropdown-menu {
    --cz-dropdown-min-width: 9rem;
}

/* Navbar branding */
.navbar-brand-main {
    font-weight: 600;
    font-size: 0.9rem;
}

.navbar-brand-logo {
    border-radius: 4px;
}

.navbar-brand-text {
    font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: #718096;
}

.navbar-brand-separator {
    font-family: monospace;
    font-size: 0.9rem;
    color: #6c757d;
    margin-left: -0.5rem;
}

.navbar-brand-catkey {
    font-family: monospace;
    color: #2b6cb0;
}

/* Debug section */
.debug-section {
    font-family: monospace;
    font-size: 0.75rem;
}

.debug-summary {
    cursor: pointer;
}

.debug-pre {
    font-size: 0.7rem;
    overflow-x: auto;
}

/* Entity image */
.entity-image img {
    border-radius: 4px;
}

.entity-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cz-border-color, #e0e0e0);
    border: 1px dashed var(--cz-gray-400, #adb5bd);
    border-radius: 4px;
    color: var(--cz-gray-500, #6c757d);
}

.entity-image-placeholder i {
    font-size: 3rem;
}

/* ============================================
   Light Utilitarian Theme
   ============================================ */

:root, [data-bs-theme="light"] {
    /* Muted blue-gray primary instead of bright blue */
    --cz-primary: #4a5568;
    --cz-primary-rgb: 74, 85, 104;

    /* Clean off-white background */
    --cz-body-bg: #fafafa;
    --cz-body-color: #2d3748;

    /* Sharp corners - utilitarian aesthetic */
    --cz-border-radius: 2px;
    --cz-border-radius-sm: 2px;
    --cz-border-radius-lg: 2px;
    --cz-border-radius-xl: 2px;

    /* Subtle borders */
    --cz-border-color: #e2e8f0;

    /* Background variants */
    --cz-secondary-bg: #f7fafc;
    --cz-tertiary-bg: #edf2f7;

    /* Muted link colors */
    --cz-link-color: #2b6cb0;
    --cz-link-hover-color: #1a4971;
}

/* Remove decorative shadows globally */
.btn,
.card,
.dropdown-menu,
.navbar {
    box-shadow: none !important;
}

/* Utilitarian buttons */
.btn {
    border-radius: 2px;
    font-weight: 500;
}

.btn-primary {
    --cz-btn-bg: #4a5568;
    --cz-btn-border-color: #4a5568;
    --cz-btn-hover-bg: #2d3748;
    --cz-btn-hover-border-color: #2d3748;
    --cz-btn-active-bg: #2d3748;
    --cz-btn-active-border-color: #2d3748;
    background-color: #4a5568;
    border-color: #4a5568;
}

.btn-primary:hover {
    background-color: #2d3748;
    border-color: #2d3748;
}

.btn-outline-dark {
    border-color: #cbd5e0;
    color: #4a5568;
}

.btn-outline-dark:hover {
    background-color: #4a5568;
    border-color: #4a5568;
}

/* Sharp badges */
.badge {
    border-radius: 2px;
    font-weight: 500;
}

/* Clean headers */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #1a202c;
}

/* Subtle navbar */
.navbar, header {
    background-color: #f7fafc !important;
    border-bottom: 1px solid #e2e8f0;
}

/* Understated links */
a {
    color: #2b6cb0;
}

a:hover {
    color: #1a4971;
}

/* Clean cards and dropdowns */
.card,
.dropdown-menu {
    border-radius: 2px;
    border: 1px solid #e2e8f0;
}

/* ============================================
   Dark Utilitarian Theme
   ============================================ */

[data-bs-theme="dark"] {
    /* Muted blue-gray primary */
    --cz-primary: #718096;
    --cz-primary-rgb: 113, 128, 150;

    /* Dark neutral background */
    --cz-body-bg: #1a1d21;
    --cz-body-color: #a0aec0;

    /* Sharp corners - same as light */
    --cz-border-radius: 2px;
    --cz-border-radius-sm: 2px;
    --cz-border-radius-lg: 2px;
    --cz-border-radius-xl: 2px;

    /* Subtle dark borders */
    --cz-border-color: #2d3748;

    /* Background variants */
    --cz-secondary-bg: #252a31;
    --cz-tertiary-bg: #2d343d;

    /* Muted link colors for dark mode */
    --cz-link-color: #63b3ed;
    --cz-link-hover-color: #90cdf4;
}

/* Dark mode specific overrides */
[data-bs-theme="dark"] .btn-primary {
    --cz-btn-bg: #4a5568;
    --cz-btn-border-color: #4a5568;
    --cz-btn-hover-bg: #718096;
    --cz-btn-hover-border-color: #718096;
    --cz-btn-active-bg: #718096;
    --cz-btn-active-border-color: #718096;
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background-color: #718096;
    border-color: #718096;
}

[data-bs-theme="dark"] .btn-outline-dark {
    border-color: #4a5568;
    color: #a0aec0;
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] header {
    background-color: #252a31 !important;
    border-bottom: 1px solid #2d3748;
}

[data-bs-theme="dark"] a {
    color: #63b3ed;
}

[data-bs-theme="dark"] a:hover {
    color: #90cdf4;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu {
    border: 1px solid #2d3748;
    background-color: #252a31;
}

[data-bs-theme="dark"] .navbar-brand-catkey {
    color: #63b3ed;
}

/* ============================================
   Linked Entity Field Styling
   ============================================ */

/* New (not-yet-created) entities - red text only */
.choices__item--new-entity {
    color: #c53030 !important;
}

/* Existing entities - default blue (link color) */
.choices__item--existing-entity {
    color: #2b6cb0 !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .choices__item--new-entity {
    color: #fc8181 !important;
}

[data-bs-theme="dark"] .choices__item--existing-entity {
    color: #63b3ed !important;
}

/* "Create new" option in dropdown - subtle styling */
.choices__item--choice[data-value^="new:"] {
    font-style: italic;
    color: #718096;
}