/* ============================================================================
   CUSTOM STYLESHEET FOR KNELL OF BLUEBELLS
   ============================================================================ */

/* Import ANSI color support for game color constants */
@import url("ansi_colors.fb95462587ca.css");

/* Custom Fonts */
@font-face {
    font-family: 'ElysianGlide';
    src: url("../fonts/ElysianGlide-Regular.722c849fd9ac.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Google Fonts (Rubik body font) loaded in base.html template */

/* Custom CSS Variables */
:root {
    /* NOTE: --border-radius (8px), --border-radius-sm (4px), --border-radius-lg (12px)
       are defined in ansi_colors.css and inherited here. Do not redefine. */

    /* Typography */
    --font-display: "ElysianGlide", cursive;
    --font-body: "Rubik", sans-serif;

    /* Surface / Form Colors */
    --form-bg: #495057;
    --form-border: #6c757d;
    --tab-header-bg: #313e45;
    --tooltip-bg: #343a40;
    --color-text-muted: #adb5bd;

    /* Cyborg theme primary (Bootstrap --bs-primary equivalent) */
    --color-cyborg-primary: #2a9fd6;

    /* Icon Label Styling (unified across chargen + classification hubs) */
    --icon-label-font: var(--font-display);
    --icon-label-size: 0.85rem;
    --icon-label-color: #888;
    --icon-label-color-active: #fff;
    --icon-label-weight: 500;
    --icon-label-transform: uppercase;
    --icon-label-spacing: 0.04em;
}

/* ============================================================================
   BOOTSTRAP / CYBORG THEME OVERRIDES
   ============================================================================ */

/* Global background color */
body {
    background-color: var(--color-background);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-weight: 400;
    overflow-x: hidden;
}

/* Bootstrap .table class scope fix - prevents bleeding into non-table elements
   like FontAwesome icons (fa-table) used in editor toolbars */
.table:not(table) {
    width: auto;
    margin-bottom: 0;
}

/* Navbar styling */
.navbar {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    align-items: center;
    padding: .3rem 0rem;
}

/* Navbar link and brand colors */
.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--color-secondary) !important;
    font-family: var(--font-display) !important;
    font-size: 10pt !important;
    font-weight: 100 !important;
}

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

/* Dropdown menu styling */
.dropdown-menu {
    background-color: var(--color-background) !important;
    border: 2px solid var(--color-secondary) !important;
}

/* Dropdown item hover - match card background */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-tertiary) !important;
}

/* Dropdown divider styling */
.dropdown-divider {
    border-top: 1px solid var(--color-secondary) !important;
    margin-left: 15px;
    margin-right: 15px
}

/* Dropdown non-link text styling */
.dropdown-item.disabled,
.dropdown-item:disabled,
.dropdown-header {
    color: var(--color-primary) !important;
}

/* Dropdown submenu support for Bootstrap 4 (which lacks native submenus) */
.dropdown-submenu {
    position: relative;
}

/* Open submenus to the right by default */
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -0.125rem;
    margin-left: 0;
}



/* Show submenu on hover — this is the primary mechanism */
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* Submenu toggle items: prevent text + arrow from wrapping */
.dropdown-submenu>.dropdown-toggle {
    white-space: nowrap;
    padding-right: 1.75em;
    /* room for the arrow indicator */
}

/* Style the dropdown toggle arrow for submenus */
.dropdown-submenu>.dropdown-toggle::after {
    display: inline-block;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
    position: absolute;
    right: 0.75em;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}



/* Make submenu items same style as parent dropdown items */
.dropdown-submenu .dropdown-menu .dropdown-item {
    color: var(--color-primary) !important;
}

.dropdown-submenu .dropdown-menu .dropdown-item:hover,
.dropdown-submenu .dropdown-menu .dropdown-item:focus {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-tertiary) !important;
}

/* Override Bootstrap badge-secondary to use tertiary-dark */
.badge-secondary {
    background-color: var(--color-primary-dark) !important;
}

/* Global badge default - white text for all badges unless otherwise specified */
.badge {
    color: #ffffff !important;
}

/* Override Bootstrap text-muted for better contrast on dark theme */
.text-muted {
    color: var(--color-primary) !important;
}

/* Override Bootstrap border-bottom to be 2px with dusty blue */
.border-bottom {
    border-bottom: 2px solid var(--color-primary) !important;
}

/* Empty state message - unified formatting for empty tabs */
.empty-state-message {
    color: var(--color-primary);
    text-align: center;
    padding: 1.5rem 0;
    font-style: italic;
}

/* ============================================================================
   BREADCRUMB STYLES
   ============================================================================ */

.breadcrumb {
    background-color: var(--color-primary-medium);
    font-family: var(--font-display);
    font-size: 10pt;
    font-weight: 100;
}

/* Active (non-link) breadcrumb items should appear muted */
.breadcrumb-item.active {
    color: var(--color-primary) !important;
}

/* Breadcrumb links inherit white color from Bootstrap, add hover effect */
.breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ============================================================================
   NAVBAR BREADCRUMB - Replaces brand with breadcrumb in navbar
   Site-wide styles for breadcrumb navigation in the navbar area
   ============================================================================ */

.navbar-breadcrumb {
    display: flex;
    align-items: center;
    /* Match navbar-brand positioning since navbar has 0 horizontal padding */
    margin-left: 1rem;
}

/* Override Bootstrap breadcrumb defaults for navbar context */
.navbar-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 10pt;
    font-weight: 100;
}

.navbar-breadcrumb .breadcrumb-item,
.navbar-breadcrumb .breadcrumb-item a {
    color: var(--color-secondary, #ffbbc7);
    font-family: var(--font-display);
}

.navbar-breadcrumb .breadcrumb-item a:hover {
    color: var(--color-tertiary, #99ffcc);
}

.navbar-breadcrumb .breadcrumb-item.active {
    color: #fff;
}

/* Non-linked breadcrumb text (placeholder for future pages) */
.navbar-breadcrumb .breadcrumb-item .breadcrumb-text {
    color: #adb5bd;
    /* Dusty blue/gray - standard muted text */
}

/* Override Bootstrap separator for navbar breadcrumbs - solid caret */
.navbar-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    /* fa-caret-right */
    color: var(--color-secondary, #ffbbc7);
    font-size: 0.7em;
    vertical-align: baseline;
    position: relative;
    top: 0.25em;
}

/* ============================================================================
   ORGANIZATION BADGE STYLES
   ============================================================================ */

/* Organization type badges */
.org-badge-core {
    background-color: #6c757d !important;
    /* Bootstrap secondary - gray */
    color: #ffffff !important;
    font-weight: 500;
}

.org-badge-player {
    background-color: #17a2b8 !important;
    /* Bootstrap info - cyan */
    color: #ffffff !important;
    font-weight: 500;
}

/* Organization category badges - supernatural/template-specific */
.org-badge-category {
    font-weight: 500;
    text-transform: capitalize;
}

.org-badge-category.category-pack {
    background-color: #8b4513 !important;
    /* Saddle brown for werewolf packs */
    color: #ffffff !important;
}

.org-badge-category.category-motley {
    background-color: #9370db !important;
    /* Medium purple for changeling motleys */
    color: #ffffff !important;
}

.org-badge-category.category-cult {
    background-color: #4b0082 !important;
    /* Indigo for demon/angel cults */
    color: #ffffff !important;
}

.org-badge-category.category-changing-breeds,
.org-badge-category.category-changing_breeds {
    background-color: #228b22 !important;
    /* Forest green for changing breeds */
    color: #ffffff !important;
}

.org-badge-category.category-business {
    background-color: #dc3545 !important;
    /* Bootstrap danger - red for business */
    color: #ffffff !important;
}

.org-badge-category.category-noble {
    background-color: #ffc107 !important;
    /* Bootstrap warning - gold for noble houses */
    color: #212529 !important;
    /* Dark text on gold */
}

/* Default category badge (fallback for undefined categories) */
.org-badge-category:not([class*="category-"]) {
    background-color: #6c757d !important;
    /* Bootstrap secondary as fallback */
    color: #ffffff !important;
}

/* Member rank badges */
.org-badge-rank {
    background-color: #007bff !important;
    /* Bootstrap primary - blue */
    color: #ffffff !important;
    font-weight: 500;
}

/* Form controls - dark theme styling */
.form-control {
    background-color: var(--form-bg) !important;
    border-color: var(--form-border) !important;
    color: #ffffff !important;
}

.form-control:focus {
    background-color: var(--form-bg) !important;
    border-color: var(--color-cyborg-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(42, 159, 214, 0.25) !important;
}

.form-control::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

/* Select dropdowns */
.form-control option {
    background-color: var(--form-bg) !important;
    color: #ffffff !important;
}

/* Input groups - dark theme styling */
.input-group-text {
    background-color: var(--form-bg) !important;
    border-color: var(--form-border) !important;
    color: var(--color-text-muted) !important;
}

.input-group-prepend .input-group-text {
    border-right: 0;
}

.input-group .form-control:not(:last-child) {
    border-right: 0;
}

/* Custom select styling for dropdowns */
.custom-select {
    background-color: var(--form-bg) !important;
    border-color: var(--form-border) !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23adb5bd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}

.custom-select:focus {
    background-color: var(--form-bg) !important;
    border-color: var(--color-cyborg-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(42, 159, 214, 0.25) !important;
}

.custom-select option {
    background-color: var(--form-bg) !important;
    color: #ffffff !important;
}

/* ============================================================================
   LOG SYSTEM STYLES
   ============================================================================ */

/* Log content display - monospace formatting for scene logs */
.log-content {
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

/* Inline form for delete buttons */
.inline-form {
    display: inline;
}

/* Scene type and tag badges with custom colors */
.badge-scene-type,
.badge-custom-tag {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    background-color: var(--badge-color, #007bff) !important;
}

/* Content warning badges in list */
.badge.bg-danger {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Content warning badge - City of Glass style */
.content-warning-badge {
    margin: 0px 5px;
    background-color: #e69138 !important;
    color: #ffffff !important;
    cursor: pointer;
    font-weight: 600;
}

.content-warning-badge:hover {
    background-color: #d47f2a !important;
}

/* ============================================================================
   SELECT2 DARK THEME CUSTOMIZATION
   
   Aggressive overrides for Cyborg dark theme. Uses !important to override
   both select2.min.css defaults and select2-bootstrap4.min.css.
   ============================================================================ */

/* --- Main selection container (shared styles) --- */
.select2-container--bootstrap4 .select2-selection {
    background-color: var(--form-bg) !important;
    border: 1px solid var(--form-border) !important;
    color: #fff !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--color-cyborg-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(42, 159, 214, 0.25) !important;
}

/* --- Dropdown panel --- */
.select2-container--bootstrap4 .select2-dropdown {
    background-color: var(--form-bg) !important;
    border-color: var(--form-border) !important;
}

/* Ensure Select2 dropdown appears above modals */
.select2-container--open {
    z-index: 9999 !important;
}

.select2-dropdown .select2-search__field,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: var(--form-bg) !important;
    border: 1px solid var(--form-border) !important;
    color: #fff !important;
}

/* --- Dropdown options --- */
.select2-container--bootstrap4 .select2-results__option {
    color: #fff !important;
    background-color: var(--form-bg) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-cyborg-primary) !important;
    color: #fff !important;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: #1a6890 !important;
}

/* --- Single select --- */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: #adb5bd transparent transparent transparent !important;
}

/* --- Multiple select: Container --- */
.select2-container--bootstrap4 .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px) !important;
    /* Match Bootstrap form-control */
    padding: .375rem !important;
    /* Consistent padding all around */
    padding-right: 5px !important;
    /* Space for clear button */
}

/* --- Multiple select: Rendered list (UL containing chips + search) --- */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: inline !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1.5em !important;
}

/* --- Multiple select: Chip/tag --- */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-cyborg-primary) !important;
    border: 1px solid var(--color-cyborg-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 1.5em !important;
    line-height: 1.5em !important;
    max-width: 100% !important;
    vertical-align: middle !important;
    padding: 0 .5em 0 0 !important;
    margin: 0 .375rem 0 0 !important;
}

/* --- Multiple select: Chip remove button (×) --- */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    display: inline-block !important;
    position: static !important;
    float: left !important;
    font-size: 1em !important;
    font-weight: bold !important;
    height: auto !important;
    width: auto !important;
    line-height: inherit !important;
    padding: 0 .4em !important;
    margin: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
    outline: none !important;
}

/* --- Multiple select: Inline search wrapper --- */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline,
.select2-container--bootstrap4 .select2-search--inline {
    display: inline !important;
    float: none !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* --- Multiple select: Inline search input field --- */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,
.select2-container--bootstrap4 .select2-search--inline .select2-search__field,
.select2-container .select2-search--inline .select2-search__field {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    height: 1.5em !important;
    min-height: 1.5em !important;
    line-height: 1.5em !important;
    vertical-align: middle !important;
    margin: 0 !important;
    margin-left: 5px !important;
    padding: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--color-text-muted) !important;
}

/* --- Clear all button --- */
.select2-container--bootstrap4 .select2-selection__clear {
    color: var(--form-bg) !important;
    background-color: var(--color-text-muted) !important;
}

.select2-container--bootstrap4 .select2-selection__clear:hover {
    background-color: #fff !important;
}

/* ============================================================================
   TOOLTIP CUSTOMIZATION
   ============================================================================ */

/* Dark theme tooltip styling */
.tooltip-inner {
    background-color: var(--tooltip-bg) !important;
    color: #ffffff !important;
    text-align: left !important;
    max-width: 300px !important;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #343a40 !important;
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #343a40 !important;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #343a40 !important;
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #343a40 !important;
}

/* ============================================================================
   CENSUS PAGE & TABLE STYLES
   ============================================================================ */

/* Census page navigation - uses Bootstrap utility classes for spacing */

/* Data field styling */
.field-value {
    font-weight: 500;
}

.field-name {
    font-size: 0.75rem;
    opacity: 0.9;
    font-style: italic;
}

/* ============================================================================
   PAGINATION STYLES
   ============================================================================ */

.page-item.disabled .page-link {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-secondary);
}

.page-link {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-secondary);
}

.page-link:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary-dark);
}

.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
}

/* ============================================================================
   LIST GROUP ITEMS
   ============================================================================ */

/* List group item with tertiary-dark background */
.list-group-item-tertiary-dark {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-primary);
}

.list-group-item-tertiary-dark:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* ============================================================================
   SOURCEBOOK BADGES
   Colors sourced from world/core/enums/book_enums.py BOOK_COLORS
   ============================================================================ */

/* Universal/Core - Blue family */
.badge[data-book="Chronicles of Darkness, Second Edition"] {
    background-color: #1565c0 !important;
    color: white !important;
}

.badge[data-book="Hurt Locker"] {
    background-color: #1976d2 !important;
    color: white !important;
}

.badge[data-book="Homebrew"] {
    background-color: #343a40 !important;
    color: white !important;
}

.badge[data-book="Wild at Heart"] {
    background-color: #0d47a1 !important;
    color: white !important;
}

.badge[data-book="World of Darkness: Armory"] {
    background-color: #1e88e5 !important;
    color: white !important;
}

.badge[data-book="World of Darkness: Book of Spirits"] {
    background-color: #1565c0 !important;
    color: white !important;
}

.badge[data-book="World of Darkness: Blood-Dimmed Tides"] {
    background-color: #0277bd !important;
    color: white !important;
}

.badge[data-book="The Player's Guide to the Contagion Chronicle"] {
    background-color: #0288d1 !important;
    color: white !important;
}

.badge[data-book="Condition Positive"] {
    background-color: #039be5 !important;
    color: white !important;
}

/* Hunter - Red */
.badge[data-book="Hunter: The Vigil, Second Edition"] {
    background-color: #c62828 !important;
    color: white !important;
}

/* Werewolf - Brown */
.badge[data-book="Werewolf: The Forsaken, Second Edition"] {
    background-color: #514233 !important;
    color: white !important;
}

.badge[data-book="Night Horrors: Shunned By The Moon"] {
    background-color: #514233 !important;
    color: white !important;
}

.badge[data-book="War Against The Pure"] {
    background-color: #5d4037 !important;
    color: white !important;
}

/* Changeling - Green */
.badge[data-book="Changeling: The Lost, Second Edition"] {
    background-color: #558b2f !important;
    color: white !important;
}

.badge[data-book="The Hedge"] {
    background-color: #4a7c31 !important;
    color: white !important;
}

.badge[data-book="Mostly Harmless Goblin Fruits and Oddments"] {
    background-color: #5a8a00 !important;
    color: white !important;
}

.badge[data-book="Changeling: The Lost, Swords at Dawn"] {
    background-color: #6b8e23 !important;
    color: white !important;
}

.badge[data-book="Changeling: The Lost, Dancers in the Dusk"] {
    background-color: #4a6741 !important;
    color: white !important;
}

.badge[data-book="Changeling: The Lost, Kith and Kin"] {
    background-color: #2e8b57 !important;
    color: white !important;
}

.badge[data-book="Book of Seemings"] {
    background-color: #20796b !important;
    color: white !important;
}

/* Changing Breeds - Saddle brown */
.badge[data-book="Changing Breeds"] {
    background-color: #8b4513 !important;
    color: white !important;
}

/* In Nomine - Purple */
.badge[data-book="In Nomine"] {
    background-color: #6f42c1 !important;
    color: white !important;
}

/* ============================================================================
   TAB CARDS & NAVIGATION
   ============================================================================ */

/* ============================================================================
   DEFAULT TAB NAVIGATION
   Canonical tab styling for the project. Used on character sheets, org pages,
   and anywhere Bootstrap .nav-tabs appear. Active tab merges into bordered
   content panel below. No pseudo-elements.
   ============================================================================ */

/* Wrapper — no border or shadow on the outer card; the content panel provides the border */
.tab-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    background: none;
}

.tab-card-header {
    background: none;
    border-bottom: none;
    padding: 0;
}

/* Base nav-tabs reset (applies inside .tab-card) */
.tab-card .nav-tabs {
    border-bottom: none;
    margin: 0;
}

.tab-card .nav-tabs .nav-item {
    margin-right: 0;
    margin-bottom: -2px;
}

/* Inactive tab */
.tab-card .nav-tabs .nav-link {
    border: 2px solid transparent;
    border-bottom: none;
    padding: 8px 16px;
    background: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: var(--color-primary);
    transition: color 0.2s ease;
}

/* Active tab — bordered top/sides, merges with content panel */
.tab-card .nav-tabs .nav-link.active {
    color: var(--color-secondary);
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    border-bottom-color: transparent;
    position: relative;
    z-index: 1;
}

/* Hover */
.tab-card .nav-tabs .nav-link:hover:not(.active):not(.disabled) {
    color: var(--color-secondary);
    border-bottom-color: transparent;
}

/* Disabled tab */
.tab-card .nav-tabs .nav-link.disabled {
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* Links inside tabs inherit color */
.tab-card .nav-tabs .nav-link a {
    color: inherit;
    text-decoration: none;
}

/* Tab content area — bordered box the active tab merges into */
.tab-card .tab-content {
    background-color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: 0.75rem;
    position: relative;
    z-index: 0;
}

/* ============================================================================
   SOURCEBOOKS PAGE
   ============================================================================ */

/* Remove underlines from headings inside book cards */
.book-card h2::after,
.book-card h3::after,
.book-card h4::after {
    display: none;
}

/* Grid layout for book cards */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* ============================================================================
   CHARACTER SHEET & PROFILE STYLING
   ============================================================================ */

/* --- Profile grid: portrait left, content right --- */
.profile-grid {
    --profile-gap: 12px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--profile-gap);
}

.profile-grid-portrait {
    grid-column: 1;
    grid-row: 1;
}

.profile-grid-content {
    grid-column: 2;
    grid-row: 1;
}

/* Portrait */
.profile-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.profile-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.portrait-square {
    width: 100%;
    aspect-ratio: 1;
    color: var(--bs-light, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 6vw, 64px);
    font-weight: bold;
    border-radius: var(--border-radius);
    border: 2px solid var(--bs-border-color, #6c757d);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Bio area: fields left, classification stages right --- */
.profile-bio {
    display: flex;
    position: relative;
    gap: var(--profile-gap, 12px);
}

/* Background icon container — sits behind bio content, fills the cell */
.profile-bio-bg-icons {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Single centered primary icon */
.profile-bio-bg-icon {
    width: 60%;
    height: 80%;
    object-fit: contain;
    opacity: 0.09;
    filter: grayscale(20%);
}

/* Bio fields column */
.profile-bio-fields {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    z-index: 1;
}

/* Classification stages column inside bio */
.profile-bio-stages {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Keep bio content above the background icons */
.profile-bio-row {
    display: flex;
    padding: 4px 0;
    position: relative;
    z-index: 1;
}

.profile-bio-label {
    flex: 0 0 50%;
    font-weight: bold;
}

.profile-bio-value {
    flex: 0 0 50%;
}

/* ============================================================================
   TEMPLATE STAGE CARDS — shared card style for sphere block & classification
   ============================================================================ */

/* Individual card */
.template-stage-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bs-card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-border-color, rgba(108, 117, 125, 0.25));
    border-radius: var(--border-radius, 6px);
}

/* Sphere/header card */
.template-stage-card.template-stage-header {
    justify-content: center;
}

/* Text block */
.template-stage-text {
    text-align: center;
    flex: 1;
    min-width: 0;
}

.template-stage-value {
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 2px;
    color: var(--bs-body-color, #dee2e6);
}

.template-stage-value.template-stage-name {
    font-size: 1.35em;
}

.template-stage-label {
    font-size: 0.75em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color, #6c757d);
}

/* --- Responsive: stack on small screens --- */
@media (max-width: 767.98px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-grid-portrait,
    .profile-grid-content {
        grid-column: 1;
        grid-row: auto;
    }

    .profile-bio {
        flex-direction: column;
    }

    .profile-bio-stages {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .template-stage-card {
        min-width: 120px;
        max-width: 200px;
    }
}

/* Description and Text Styling */
.description-text {
    line-height: 1.6;
    font-family: inherit;
}

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

.description-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--border-radius);
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 8px;
}

/* Badge Colors — dark-theme safe */
.badge-mask {
    background-color: var(--color-primary-medium);
    color: var(--color-primary-light);
}

.badge-mien {
    background-color: #4a1a6b;
    color: #d9a6f5;
}

.badge-form {
    background-color: #1b4d2e;
    color: #7ddf9c;
}

.badge-default {
    background-color: var(--form-bg);
    color: var(--color-text-muted);
}

.badge-event {
    color: #fff;
    background-color: #93c;
}

.badge-plot {
    color: #fff;
    background-color: #f80;
}

/* Masonry Gallery Layout */
.masonry-gallery {
    column-count: 1;
    column-gap: 1rem;
    column-fill: balance;
}

@media (min-width: 576px) {
    .masonry-gallery {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .masonry-gallery {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .masonry-gallery {
        column-count: 4;
    }
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Gallery image styles */
.gallery-image {
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Profile Tab Styling */
.profile-tab {
    margin-top: 30px;
}

.tab-cover {
    text-align: center;
    padding: 40px;
    color: var(--bs-muted, #6c757d);
    font-style: italic;
}

/* ============================================================================
   CHARACTER ICON SYSTEM
   ============================================================================ */

/* Character icon wrapper - ensures proper centering in flex layouts */
.character-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Character icon container - fixed dimensions with proper centering */
.character-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
    transition: border-color 0.2s ease;
}

/* Ensure images inside character icons are centered and fit properly */
.character-icon img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    margin: 0;
}

.character-icon:hover {
    border-color: var(--bs-primary, #007bff);
}

/* Icon size variants */
.icon-xs {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    font-size: 12px !important;
}

.icon-sm {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 18px !important;
}

.icon-md {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 24px !important;
}

.icon-lg {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 36px !important;
}

.icon-xl {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    font-size: 48px !important;
}

/* Log character cards - stacked icon + name layout */
.log-character-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 1rem 0.5rem;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.log-character-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.log-character-icon {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}

.log-character-icon .character-icon {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.log-character-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.icon-log {
    width: 100px !important;
    height: 100px !important;
    font-size: 75px !important;
}

.log-character-name {
    font-size: 0.9rem;
}

.log-character-name a {
    font-weight: 500;
    display: block;
}

/* Icon gallery (Ares-style participant display) */
.icon-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
}

.icon-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 120px;
}

/* Character display layouts */
.character-display {
    margin: 0;
    padding: 0;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.character-display {
    width: fit-content;
}

.character-display:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.character-display-inline {
    padding: 0 5px;
    margin-right: 8px;
}

.character-display-inline .character-icon-wrapper {
    margin-right: 8px;
}

.character-display-inline:last-child {
    margin-right: 0;
}

.character-display-portrait {
    min-width: 80px;
    max-width: 120px;
}

.character-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Icon list styling */
.icon-list {
    margin: 8px 0;
}

.icon-list-item {
    padding: 2px 6px;
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
}

.icon-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Status and action icons */
.icon-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.icon-status i {
    flex-shrink: 0;
}

/* Accessibility improvements - scoped to icon-list only, not character-icon */
.icon-list img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Dark theme adjustments */
.character-display-portrait .character-name a {
    color: var(--bs-light, #f8f9fa);
    text-decoration: none;
}

.character-display-portrait .character-name a:hover {
    color: var(--bs-primary, #007bff);
    text-decoration: none;
}

/* ===== CENSUS TABLE ICON COLUMN ===== */

/* Character list table rows */
.census-character-row {
    position: relative;
}


/* Ensure the image inside the character icon is properly centered */
.census-table .character-icon img {
    display: block;
    /* Remove inline element spacing issues */
    margin: 0;
}

/* Table cell styling - inherits from global styles */
.census-character-row td {
    position: relative;
    z-index: 1;
    overflow: hidden;
    vertical-align: middle;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Census table - allow natural expansion to fit content */
.census-table {
    width: 100%;
    table-layout: auto;
    white-space: normal;
}

.census-table th,
.census-table td {
    white-space: normal;
    word-wrap: break-word;
}

/* Remove vertical borders in census tables; keep horizontal separation */
.census-table th,
.census-table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Background icon handling for rows that supply classification art */
.census-character-row.has-bg-icon td:last-child {
    position: relative;
    overflow: hidden;
}

.census-character-row.has-bg-icon td:last-child::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(var(--bg-icon-rotation, 15deg));
    transform-origin: center center;
    background-image: var(--bg-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Empty cell indicator for missing data */
.empty-cell-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5em;
    color: var(--color-secondary);
    opacity: 0.8;
}

.empty-cell-indicator::before {
    content: "◇";
}

/* PNPC name color - orange */
.text-pnpc {
    color: #fd7e14 !important;
}

/* Organization member type badges */
.badge-pnpc {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

.badge-npc {
    background-color: #e8837b !important;
    color: #fff !important;
}

/* Preserve colors on hover */
.census-table tbody tr:hover td {
    color: inherit;
}

.census-table tbody tr:hover a {
    color: inherit;
}

/* ============================================================================
   TILT & CONDITION ICONS
   ============================================================================
   Import matching styles from dashboard for consistent icon display.
   Uses ANSI color variables for game theme consistency.
   ============================================================================ */

/* Tilt Icon Color Variables (matches dashboard) */
:root {
    --tilt-icon-bg: #000000;
    --tilt-icon-border: #fff;
    --tilt-icon-fill: #fff;
    --tilt-icon-text: var(--color-secondary);
    --condition-icon-bg: #000000;
    --condition-icon-border: #fff;
    --condition-icon-fill: #fff;
    --condition-icon-text: var(--color-secondary);
}

/* Base icon styling for both tilts and conditions */
.effect-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: 10px;
    border: 2px solid var(--tilt-icon-border, #fff);
    box-sizing: border-box;
}

/* Tilt-specific styling */
.effect-icon.tilt {
    background: var(--tilt-icon-bg);
    color: var(--tilt-icon-text);
}

/* Condition-specific styling - no background or border */
.effect-icon.condition {
    background: transparent;
    color: var(--condition-icon-text);
    border: none;
}

/* SVG styling for effect icons */
.effect-icon svg {
    width: 90%;
    height: 90%;
}

/* Override all SVG child element fill attributes */
.effect-icon.tilt svg,
.effect-icon.tilt svg *,
.effect-icon.tilt svg path,
.effect-icon.tilt svg circle,
.effect-icon.tilt svg rect,
.effect-icon.tilt svg polygon,
.effect-icon.tilt svg ellipse {
    fill: var(--tilt-icon-fill) !important;
}

.effect-icon.condition svg,
.effect-icon.condition svg *,
.effect-icon.condition svg path,
.effect-icon.condition svg circle,
.effect-icon.condition svg rect,
.effect-icon.condition svg polygon,
.effect-icon.condition svg ellipse {
    fill: var(--condition-icon-fill) !important;
}

/* Condition icon fill matches border color (positive = green, negative = red) */
.effect-icon.condition.positive {
    --condition-icon-fill: var(--color-secondary, #99ffcc);
    color: var(--color-secondary, #99ffcc);
}

.effect-icon.condition.negative {
    --condition-icon-fill: #ff6666;
    color: #ff6666;
}

/* Fallback image styling */
.effect-icon img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* ============================================================================
   IMAGE SHORTCODE CONTAINERS
   Consistent margins for [[image]] shortcode output (div / figure wrappers).
   Alignment classes (.left, .right, .center) are set by the shortcode.
   ============================================================================ */

.image-container {
    margin-bottom: 1rem;
}

.image-container.left {
    float: left;
    margin-right: 1.25rem;
}

.image-container.right {
    float: right;
    margin-left: 1.25rem;
}

.image-container.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm, 4px);
}

/* Figure variant — keeps caption flush with image */
figure.image-container {
    padding: 0;
}

figure.image-container .figure-caption {
    font-size: 0.85em;
    opacity: 0.75;
    padding-top: 0.35rem;
}

/* ============================================================================
   TABLE OF CONTENTS
   ============================================================================ */

.markdown-toc {
    /* Border setup: transparent border allows image to show through */
    border: 0;
    padding: 0rem 1.2rem 1rem 1.2rem;
    margin: 0;
    background-color: var(--color-primary-dark);
    border-radius: var(--border-radius-lg);

    /* Border image using frame.svg (183x183px) - expanded for better browser support */
    border-image-source: url("/static/website/images/frame.8bdfd589f60a.svg");
    border-image-slice: 90;
    border-image-width: 35px;
    border-image-outset: 30;
    border-image-repeat: stretch;
}

/* TOC title paragraph styling */
.markdown-toc p {
    margin: 1em 0em;
    text-align: center;
}

/* Remove underlines from headings inside table of contents */
.markdown-toc h2::after,
.markdown-toc h3::after,
.markdown-toc h4::after,
.markdown-toc h5::after,
.markdown-toc h6::after {
    display: none;
}

/* Flatpage layout containers */
.flatpage-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.flatpage-content h1 {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
}

.flatpage-layout {
    position: relative;
}

/* Two-column layout when page has a TOC */
.flatpage-layout.has-toc {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
}

/* TOC column spans full content height (enables future sticky) */
.flatpage-toc-column {
    min-width: 0;
}

/* On tablets and below, stack TOC above content */
@media (max-width: 991.98px) {
    .flatpage-layout.has-toc {
        grid-template-columns: 1fr;
    }

    .flatpage-toc-column {
        order: -1;
    }
}

/* ============================================================================
   FLATPAGE EDITOR (Wiki-style editing)
   EasyMDE/CodeMirror overrides with high specificity to isolate from Cyborg
   ============================================================================ */

/* Container */
.flatpage-edit-container {
    max-width: 100%;
}

/* Header and actions */
.flatpage-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

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

/* Edit/Preview Tab Navigation (Ares-style) */
.flatpage-editor-tabs {
    display: flex;
    border-bottom: 2px solid var(--form-border);
    margin-bottom: 0;
}

.flatpage-editor-tabs .editor-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.flatpage-editor-tabs .editor-tab:hover {
    color: #e0e0e0;
}

.flatpage-editor-tabs .editor-tab[aria-selected="true"] {
    color: #fff;
    border-bottom-color: var(--color-cyborg-primary);
    background: rgba(42, 159, 214, 0.1);
}

.flatpage-editor-tabs .editor-tab i {
    margin-right: 0.5rem;
}

/* Tab panels */
.flatpage-tab-panel {
    display: none;
}

.flatpage-tab-panel[aria-hidden="false"] {
    display: block;
}

/* Title input */
.flatpage-edit-container .title-input {
    background: var(--form-bg);
    color: #e0e0e0;
    border: 1px solid var(--form-border);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sm);
}

.flatpage-edit-container .title-input:focus {
    border-color: var(--color-text-muted);
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
}

/* EasyMDE Toolbar - theme styling for Cyborg */
.flatpage-edit-container .editor-toolbar {
    background: var(--tab-header-bg);
    border-color: var(--form-border);
    border-top: none;
    border-radius: 0;
}

.flatpage-edit-container .editor-toolbar button,
.flatpage-edit-container .editor-toolbar a {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.flatpage-edit-container .editor-toolbar button:hover,
.flatpage-edit-container .editor-toolbar button.active {
    background: var(--form-border) !important;
}

/* CodeMirror - white editor with high specificity to override Cyborg */
.flatpage-edit-container .EasyMDEContainer {
    width: 100%;
}

.flatpage-edit-container .CodeMirror {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-top: none;
    min-height: 250px;
    height: 250px;
    max-height: 250px;
    overflow: auto;
}

.flatpage-edit-container .CodeMirror-scroll {
    min-height: 250px;
    max-height: 250px;
    overflow-y: auto !important;
}

.flatpage-edit-container .CodeMirror-cursor {
    border-left: 1px solid #000;
}

.flatpage-edit-container .EasyMDEContainer .CodeMirror {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Disable markdown visual styling in editor - plain text view */
.flatpage-edit-container .CodeMirror .cm-header-1,
.flatpage-edit-container .CodeMirror .cm-header-2,
.flatpage-edit-container .CodeMirror .cm-header-3,
.flatpage-edit-container .CodeMirror .cm-header-4,
.flatpage-edit-container .CodeMirror .cm-header-5,
.flatpage-edit-container .CodeMirror .cm-header-6 {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.flatpage-edit-container .CodeMirror .cm-strong {
    font-weight: normal !important;
}

.flatpage-edit-container .CodeMirror .cm-em {
    font-style: normal !important;
}

.flatpage-edit-container .CodeMirror .cm-strikethrough {
    text-decoration: none !important;
}

.flatpage-edit-container .CodeMirror .cm-url,
.flatpage-edit-container .CodeMirror .cm-link,
.flatpage-edit-container .CodeMirror .cm-image,
.flatpage-edit-container .CodeMirror .cm-image-marker,
.flatpage-edit-container .CodeMirror .cm-image-alt-text {
    text-decoration: none !important;
    color: #000 !important;
}

.flatpage-edit-container .CodeMirror .cm-quote {
    color: #000 !important;
    font-style: normal !important;
}

.flatpage-edit-container .CodeMirror .cm-hr {
    color: #000 !important;
}

.flatpage-edit-container .CodeMirror .cm-comment,
.flatpage-edit-container .CodeMirror .cm-tag,
.flatpage-edit-container .CodeMirror .cm-attribute,
.flatpage-edit-container .CodeMirror .cm-string {
    color: #000 !important;
}

.flatpage-edit-container .CodeMirror .cm-formatting {
    color: #000 !important;
}

/* EasyMDE status bar */
.flatpage-edit-container .editor-statusbar {
    color: #666;
    background: #f5f5f5;
    border-color: #ccc;
}

/* Preview panel */
.flatpage-preview-panel {
    background: var(--color-background);
    border: 1px solid var(--form-border);
    border-top: none;
    min-height: 250px;
    padding: 1.5rem;
    color: #e0e0e0;
}

.flatpage-preview-panel.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.flatpage-preview-panel.loading i {
    margin-right: 0.5rem;
}

/* Shortcodes help - collapsible */
.flatpage-shortcodes-help {
    margin-top: 1rem;
}

.flatpage-shortcodes-help summary {
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.flatpage-shortcodes-help summary:hover {
    color: #e0e0e0;
}

.flatpage-shortcodes-help ul {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.flatpage-shortcodes-help code {
    background: var(--form-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* ============================================================================
   GLOBAL TYPOGRAPHY
   ============================================================================ */

/* Heading typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 1.5em;
    margin-bottom: 0.35em;
    font-weight: 400;
    color: var(--color-tertiary);
    font-family: var(--font-display);
    font-size: 1.1em;
    position: relative;
    padding-bottom: 0;
    overflow: hidden;
}

h1 {
    font-size: 2.5em;
    margin-top: 0.75em;
    overflow: hidden;
}

.widget h1 {
    text-align: center;
    margin: 1rem;
}

.subtitle {
    font-family: var(--font-display);
    font-size: 1.4em;
    text-align: center;
    color: var(--color-primary-medium);
    margin: 0.5em 0;
}

h2 {
    font-size: 2em;
    position: relative;
    padding-bottom: 0.15em;
    overflow: hidden;
}

h3 {
    font-size: 1.7em;
    position: relative;
    padding-bottom: 0.1em;
    overflow: hidden;
}

h4 {
    font-size: 1.45em;
    position: relative;
    padding-bottom: 0.1em;
    overflow: hidden;
}

h5 {
    font-size: 1.25em;
    position: relative;
    padding-bottom: 0.1em;
    overflow: hidden;
}

.navbar-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1rem;
}

.title {
    font-family: var(--font-display);
    font-size: 2em;
    font-weight: 400;
    color: var(--color-tertiary);
    overflow: hidden;
    position: relative;
    margin: 0;
}

/* Custom HR styling */
hr {
    border: none;
    height: 2px;
    background: var(--color-secondary);
    border-radius: var(--border-radius);
    margin: 1.5rem 0;
}

/* Global typography (lists, blockquotes, code) */
p {
    margin-bottom: 1em;
}

ul,
ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

/* List marker colors */
ul li::marker,
ol li::marker {
    color: var(--color-secondary);
}

/* TOC-specific list styling */
.markdown-toc ul {
    list-style-type: square;
}

/* TOC second level (nested) - hollow square */
.markdown-toc ul ul {
    list-style-type: square;
}

/* TOC third level (double nested) - square */
.markdown-toc ul ul ul {
    list-style-type: square;
}

.markdown-toc ul li {
    color: inherit;
}

.markdown-toc li {
    margin-bottom: 0.5em;
    padding-left: 3px;
}

.markdown-toc li::marker {
    color: var(--color-secondary);
}

blockquote {
    border-left: 4px solid var(--color-primary);
    background-color: var(--color-primary-dark);
    padding: 1em 1.2em;
    margin: 1em 0;
    color: #c8cdd3;
    font-style: italic;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

code {
    background-color: var(--color-primary-dark);
    color: #fff;
    padding: 0.2em 0.4em;
    border-radius: var(--border-radius);
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
}

pre {
    background-color: var(--color-primary-dark);
    color: #fff;
    padding: 1em;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin-bottom: 1em;
}

pre code {
    background-color: transparent;
    padding: 0;
}

/* ============================================================================
   GLOBAL TABLES
   Unified dark-theme table styling. All .table elements inherit these colors.
   No need for .table-dark on <thead> — headers are styled automatically.
   Stripe colors: even rows = transparent (inherit bg), odd rows = secondary-dark tint.
   ============================================================================ */

/* Base table reset */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
}

/* Allow tables to flow around floated TOC */
.flatpage-content table {
    width: auto;
    max-width: 100%;
    display: table;
}

/* Cell defaults */
table th,
table td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5em;
    text-align: left;
}

/* Bootstrap .table — override border color globally */
.table> :not(caption)>*>* {
    border-color: rgba(255, 255, 255, 0.08);
}

.table.table-bordered> :not(caption)>* {
    border-width: 0;
}

/* Header row — primary-medium bg, secondary (green) text for consistent branding */
.table thead th,
table thead th {
    background-color: var(--color-primary-medium);
    color: var(--color-secondary);
    font-weight: 600;
    border-bottom: 2px solid var(--color-secondary);
}

/* Override Cyborg's broken .table-dark (renders as near-white) */
.table thead.table-dark th,
.table.table-dark th,
.table .thead-dark th {
    background-color: var(--color-primary-medium);
    color: var(--color-secondary);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Striped rows — subtle secondary-dark tint on odd rows */
table tbody tr:nth-of-type(odd),
.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(30, 82, 89, 0.25);
}

/* Even rows — transparent, inherit parent bg (primary-dark from card/tab) */
table tbody tr:nth-of-type(even),
.table.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent;
}

/* Hover — slightly brighter secondary-dark tint */
.table.table-hover tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: rgba(30, 82, 89, 0.4);
    color: inherit;
}

/* Body text color */
.table td,
table td {
    color: #fff;
}

/* Contextual row/cell classes — override Cyborg's light-themed defaults */
.table-info,
.table-info>td,
.table-info>th {
    background-color: rgba(30, 82, 89, 0.35);
    color: #fff;
}

.table-secondary,
.table-secondary>td,
.table-secondary>th,
th.table-secondary {
    background-color: var(--color-primary-medium);
    color: var(--color-primary);
}

/* Fixed-width table layout */
.table-fixed {
    table-layout: fixed;
}

/* ============================================================================
   HOMEPAGE WIDGETS
   ============================================================================ */

.widget {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius);
    overflow: visible;
    position: relative;
}

/* Simple div with widget styling (no header/body structure) */
.simple-div {
    padding: 2rem;
    background-color: var(--color-primary-dark);
    box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius);
    position: relative;
    margin-bottom: 1.5rem;
}

/* Borderbox - transparent background with secondary border */
.borderbox {
    padding: 2rem;
    background-color: transparent;
    border: 3px solid var(--color-secondary);
    border-radius: var(--border-radius);
    position: relative;
    margin-bottom: 1.5rem;
}

/* Corner decoration system - use modifier classes to choose corner and image */

/* Cladium decorations */
.widget-corner-bottomright-cladium::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 160px;
    height: 160px;
    margin-bottom: 0px;
    margin-right: -23px;
    background: url("../images/cladium_bottomright.3d52fb1b9e55.svg") bottom right / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.widget-corner-bottomleft-cladium::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 135px;
    height: 135px;
    margin-bottom: 0px;
    margin-left: -9px;
    background: url("../images/cladium_bottomleft.4d107842f2e1.svg") bottom left / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Seagrape decorations */
.widget-corner-topleft-seagrape::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 190px;
    margin-top: -10px;
    margin-left: -20px;
    background: url("../images/seagrape_topleft.4447e9f1f18a.svg") top left / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.widget-corner-topright-seagrape::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 235px;
    height: 235px;
    margin-top: -16px;
    margin-right: -20px;
    background: url("../images/seagrape_topright.ae4730ce0b66.svg") top right / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.widget-corner-bottomleft-seagrape::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    margin-bottom: -15px;
    margin-left: -25px;
    background: url("../images/seagrape_bottomleft.8f753225c37a.svg") bottom left / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Dual corner decorations - for widgets that need two corners */
.widget-corner-dual-seagrape-topright-bottomleft::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 235px;
    height: 235px;
    margin-top: -16px;
    margin-right: -20px;
    background: url("../images/seagrape_topright.ae4730ce0b66.svg") top right / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.widget-corner-dual-seagrape-topright-bottomleft::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    margin-bottom: -15px;
    margin-left: -25px;
    background: url("../images/seagrape_bottomleft.8f753225c37a.svg") bottom left / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.widget-header {
    background: var(--color-primary-dark);
    padding: 5px 0px 0px 0px;
    text-align: center;
    position: relative;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Widget card headings - all levels */
.widget-header h1,
.widget-header h2,
.widget-header h3,
.widget-header h4,
.widget-header h5,
.widget-header h6 {
    padding: 0.1rem 0rem 0.6rem;
}

.widget-header h4 {
    margin: 5px 8px 8px 8px;
    color: var(--color-tertiary);
    font-size: 17pt;
    font-weight: 400;
    font-family: var(--font-display);
}

.widget-body {
    background-color: var(--color-primary-dark);
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem;
    position: relative;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.widget-footer {
    text-align: center;
    padding: 0.75rem;
    position: relative;
    z-index: 2;
}

.widget-pill-row {
    gap: 0.5rem;
}

.widget p {
    padding: 0px 40px;
}

.widget-pill-badge {
    font-size: 0.75em;
    padding: 0.25em 0.5em;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Evennia widget background logo */
.evennia-bg {
    --logo-inset: 1rem;
    text-align: center;
}

.evennia-bg p {
    padding: 0px 40px;
}

.evennia-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background-image: url("../images/evennia_logo.f9dd583e85df.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

/* Bootstrap Button Overrides - Use Secondary (Minty Green) for Primary Buttons */
.btn-primary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-secondary-accent);
    border-color: var(--color-secondary-accent);
    color: var(--color-primary-dark);
}

/* Override outline-primary to match the green primary brand */
.btn-outline-primary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary-dark);
}

/* Widget buttons use solid green style (removed transparent override) */

.widget .btn-primary:hover,
.widget .btn-primary:focus {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: #ffffff;
}

.content-warning-shield {
    background-color: #ffc107;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.content-warning-shield .fa {
    font-size: 0.75em;
    line-height: 1;
}

.widget-body .bi {
    padding: 0.25rem;
}

/* ============================================================================
   CARD-ON-CARD VARIANT
   ============================================================================ */

/* Use this variant for cards displayed within a parent card container.
   Self-contained styling with thick mint green border for visual distinction. */

.card-on-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-primary);
    overflow: visible;
    position: relative;
    background-color: var(--color-background);
}

/* Header styling for card-on-card */
.card-on-card-header {
    padding: 0.5rem 0.75rem 0;
    position: relative;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.card-on-card-header h4 {
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    color: var(--color-tertiary);
    font-size: 1.1rem;
    font-weight: 400;
    font-family: var(--font-display);
}

/* Body styling for card-on-card */
.card-on-card-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Footer styling for card-on-card */
.card-on-card-footer {
    text-align: center;
    padding: 0.5rem 0.75rem;
    position: relative;
    z-index: 2;
}

/* Button styling for card-on-card */
.card-on-card .btn-primary {
    background-color: transparent;
    border: 1px solid var(--color-secondary);
    color: #ffffff;
    font-weight: 600;
}

.card-on-card .btn-primary:hover,
.card-on-card .btn-primary:focus {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: #ffffff;
}

/* Center tier dots in asset cards */
.tier-display-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Center category badge in asset cards */
.category-badge-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ============================================================================
   GLOBAL LINKS, IMAGES & DECORATIVE ELEMENTS
   ============================================================================ */

/* Global link styles */
a {
    color: var(--color-secondary);
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Global image styles */
img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
}

/* ============================================================================
   CARDS (NON-WIDGET)
   ============================================================================ */

.card {
    background-color: var(--color-primary-dark);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: none;
    margin-bottom: 1rem;
    overflow: hidden;
}

.card-header {
    background-color: var(--color-primary-medium);
    border-bottom: 2px solid var(--color-primary-light);
    padding: 0.625rem 0.75rem;
    position: relative;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    margin: 0;
    padding: 0;
}

.card-header h2 {
    color: var(--color-tertiary);
    font-size: 1.1rem;
    font-weight: 400;
    font-family: var(--font-display);
}

/* Remove underline from h2 when inside card headers */
.card-header h2::after {
    display: none;
}

.card-header h3 {
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--font-display);
}

/* Remove underline from h3 when inside card headers */
.card-header h3::after {
    display: none;
}

/* Book reference card specific styling */
.book-reference-card {
    margin: 1.5rem 0 1.5rem;
    display: flex;
    flex-direction: column;
}

.book-reference-card .card-body {
    flex: 1 1 auto;
}

.book-reference-card .card-header {
    padding: 0.75rem;
    align-items: center;
}

.book-reference-card .card-header h3 {
    font-size: 1.15rem;
    text-align: center;
}

.card-body {
    padding: 0.75rem;
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6 {
    margin: 0;
    padding: 0;
}

/* Content section wrapper - for page-level content containers without heading side effects */
.content-section {
    background-color: var(--color-primary-dark);
    padding: 1rem;
}

/* ============================================================================
   LOG UPLOAD SYSTEM STYLES
   ============================================================================ */

.log-content {
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    padding: 15px;
    border-radius: var(--border-radius-sm);
}

/* Content warning checkbox group */
.form-check-group {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius-sm);
    padding: 10px;
    background-color: var(--form-bg);
}

/* ============================================================================
   CARD-TITLE OVERRIDES - Strip margins/padding/underlines from heading elements
   ============================================================================ */

/* Strip padding and margins from all card-title headings */
h1.card-title,
h2.card-title,
h3.card-title,
h4.card-title,
h5.card-title,
h6.card-title {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Remove h2/h3 underlines when used as card-title */
h2.card-title::after,
h3.card-title::after {
    display: none !important;
}

h4.card-title {
    font-size: 1.45em !important;
}

h5.card-title {
    font-size: 1.25em !important;
}

h6.card-title {
    font-size: 1.1em !important;
}

/* ============================================================================
   MERMAID DIAGRAM STYLING
   ============================================================================ */

/* Mermaid flowchart nodes - add padding to prevent text cutoff */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    padding: 10px !important;
}

/* Mermaid node labels - ensure adequate spacing */
.mermaid .nodeLabel {
    padding: 10px 15px !important;
}

/* Mermaid flowchart - prevent text overflow */
.mermaid .label {
    overflow: visible !important;
}

/* Ensure mermaid diagrams have enough space */
.mermaid {
    min-height: 400px;
}

/* ============================================================================
   CLARITY TRACK SEGMENTED DISPLAY (Changeling Touchstones)
   ============================================================================ */

.clarity-track {
    display: flex;
    gap: 2px;
    margin: 15px 0;
    font-family: monospace;
}

.clarity-box {
    width: 40px;
    height: 40px;
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    background: #2a2a2a;
    border-radius: 2px;
}

.clarity-box.damaged {
    border-color: #ff99ff;
    border-width: 3px;
    color: #ff99ff;
    font-weight: bold;
}

.clarity-box.touchstone.attached,
.clarity-box.damaged.touchstone.attached,
.clarity-box.touchstone.submerged,
.clarity-box.damaged.touchstone.submerged {
    box-shadow: inset 0 0 0 3px #4a9eff;
}

.box-number {
    font-size: 14px;
    color: #888;
    position: absolute;
    bottom: -20px;
}

/* ============================================================================
   PROFILE CARDS PAGE STYLES
   ============================================================================ */

/* Profile card grid — consistent gutters via CSS gap */
.profile-card-grid {
    --grid-gap: 1rem;
    margin: 0 calc(var(--grid-gap) / -2);
}

.profile-card-grid>[class*="col"] {
    padding-left: calc(var(--grid-gap) / 2);
    padding-right: calc(var(--grid-gap) / 2);
    margin-bottom: var(--grid-gap);
}

/* Profile Card Container */
.profile-card {
    background: var(--color-background);
    border: none;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.profile-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Cover/Header Section with SVG Background */
.profile-cover {
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-background) 100%);
    position: relative;
    overflow: hidden;
}

/* Classification SVG in Cover Area - Right aligned */
.profile-cover.has-bg-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    left: auto;
    transform: translateY(-50%) rotate(var(--bg-icon-rotation, 20deg));
    transform-origin: center center;
    width: 120px;
    height: 120px;
    background-image: var(--bg-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    pointer-events: none;
}

/* Profile Card Body - Contains avatar and info */
.profile-card-body {
    padding: 0 1rem 0.75rem 1rem;
    position: relative;
    margin-top: -52px;
    /* Pull up to overlap cover - adjusted for larger portrait */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Profile Card Footer - Bottom right aligned */
.profile-card-footer {
    margin-top: auto;
    text-align: right;
    padding-top: 0.5rem;
}

/* Profile Avatar Wrapper - Circular, left-aligned, 30% larger */
.profile-avatar-wrapper {
    width: 104px;
    height: 104px;
    min-width: 104px;
    min-height: 104px;
    border-radius: 50%;
    overflow: visible;
    border: 3px solid var(--color-background);
    background: var(--color-background);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    --indicator-size: 60px;
}

/* Profile card avatar - unique class to avoid conflicts with character sheet .profile-image */
.profile-card-avatar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.profile-card-avatar-fallback {
    padding: 12px;
    opacity: 0.5;
    object-fit: contain;
}

/* Classification indicator — bottom-right of portrait circle.
   Uses CSS custom property --indicator-size set on .profile-avatar-wrapper
   so a single value controls both the wrapper and responsive overrides.
   Positioned at ~6% inset from the bounding-box corner so the icon
   sits on the circle perimeter rather than floating outside it. */
.profile-card-classification-indicator {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: var(--indicator-size, 40px);
    height: var(--indicator-size, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.profile-card-classification-indicator img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* Profile Info Section - Below avatar */
.profile-info {
    margin-top: 0.5rem;
    text-align: left;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card:hover .profile-name {
    color: var(--color-secondary);
}

.profile-secondary-name {
    font-size: 0.75rem;
    color: var(--color-tertiary);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-concept {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
    line-height: 1.3;
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2em;
}

/* Template badge inside profile cards */
.profile-sphere .badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .profile-card {
        min-height: 210px;
    }

    .profile-cover {
        height: 70px;
    }

    .profile-card-body {
        margin-top: -45px;
    }

    .profile-avatar-wrapper {
        width: 90px;
        height: 90px;
        --indicator-size: 48px;
    }

    .profile-cover.has-bg-icon::before {
        width: 100px;
        height: 100px;
    }
}

/* ============================================================================
   MINOR BOOK REFERENCE CARDS - Compact styling in rows of 3
   ============================================================================ */

.minor-books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 992px) {
    .minor-books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .minor-books-grid {
        grid-template-columns: 1fr;
    }
}

.minor-book-card {
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
}

.minor-book-card .card-header {
    padding: 0.5rem 0.75rem;
}

.minor-book-card .card-header h5 {
    font-size: 0.9rem;
    margin: 0;
}

.minor-book-card .card-header h5::after {
    display: none;
}

.minor-book-card .card-body {
    padding: 0.5rem 0.75rem;
    flex: 1 1 auto;
}

.minor-book-card .card-body p {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
}

.minor-book-card .card-body p:last-child {
    margin-bottom: 0;
}

.minor-book-card .card-body h5 {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.minor-book-card .card-footer {
    padding: 0.4rem 0.75rem;
    margin-top: auto;
}

.minor-book-card .btn-sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

/* ============================================================================
   MAIL SYSTEM STYLES (Threaded Vue-based mail)
   ============================================================================ */

/* Unread indicator dot in mail list */
.mail-unread-indicator {
    width: 0.75rem;
    flex-shrink: 0;
}

.mail-unread-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

/* Thread list item hover/active */
.mail-thread-item {
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.mail-thread-item:hover {
    background-color: rgba(42, 159, 214, 0.15);
}

.mail-thread-item.mail-thread-active {
    background-color: var(--color-primary-medium, #29426d);
}

.mail-thread-unread {
    border-left: 2px solid var(--color-cyborg-primary, #2a9fd6);
}

/* Message body - preserves whitespace like pre-wrap */
.mail-message-body {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Original/quoted message in replies */
.mail-quoted-message {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9em;
}

/* Self-sent messages slightly offset */
.mail-message-self .mail-message-body {
    background-color: rgba(42, 159, 214, 0.12);
    padding: 0.4rem 0.6rem;
    border-radius: var(--border-radius-sm, 4px);
}

/* Min-width helper for text-truncate inside flex */
.min-width-0 {
    min-width: 0;
}

/* Cursor helper */
.cursor-pointer {
    cursor: pointer;
}

/* Text selection colors (prevent invisible selections on dark bg) */
.mail-app ::selection {
    background-color: var(--color-primary-medium, #29426d);
    color: #fff;
}

/* Keyboard focus indicator for thread items */
.mail-thread-item:focus-visible {
    outline: 2px solid var(--color-cyborg-primary, #2a9fd6);
    outline-offset: -2px;
    background-color: rgba(42, 159, 214, 0.12);
}

/* Flex gap shims (BS4 has no gap utilities) */
.mail-flex-gap-1>*+* {
    margin-left: 0.25rem;
}

.mail-flex-gap-2>*+* {
    margin-left: 0.5rem;
}

/* Small badge variant */
.badge-sm {
    font-size: 0.65em;
    padding: 0.2em 0.45em;
}

/* ============================================================================
   FILE UPLOAD DROPZONE
   ============================================================================ */

/* Standard dropzone-style upload area */
.upload-dropzone {
    position: relative;
    border: 2px dashed var(--form-border);
    border-radius: var(--border-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background-color: rgba(108, 117, 125, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-dropzone:hover {
    border-color: var(--color-cyborg-primary);
    background-color: rgba(42, 159, 214, 0.1);
}

.upload-dropzone.drag-over {
    border-color: var(--color-cyborg-primary);
    background-color: rgba(42, 159, 214, 0.15);
    border-style: solid;
}

/* Hide the actual file input, make it cover the entire dropzone for clicks */
.upload-dropzone .upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.upload-dropzone .upload-content {
    pointer-events: none;
    color: var(--color-text-muted);
}

.upload-dropzone .upload-content i {
    color: var(--form-border);
    transition: color 0.2s ease;
}

.upload-dropzone:hover .upload-content i,
.upload-dropzone.drag-over .upload-content i {
    color: var(--color-cyborg-primary);
}

/* ============================================================================
   EXTRACTED INLINE-STYLE CLASSES
   Replaces recurring style="" attributes in templates
   ============================================================================ */

/* Disabled/placeholder dropdown items (navbar menus) */
.dropdown-item-placeholder {
    color: var(--form-border);
    pointer-events: none;
    cursor: default;
}

/* Indented sub-item in a dropdown */
.dropdown-item-indent {
    padding-left: 2rem;
}

/* Inline logout form (display: inline) */
.inline-form {
    display: inline;
}

/* Logout button styled as a dropdown-item */
.dropdown-item-button {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.dropdown-item-button:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-tertiary);
}

/* Toast notification container */
.toast-container-fixed {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1050;
}

/* Homepage server address box */
.server-address-box {
    border: 3px solid var(--color-secondary);
    border-radius: var(--border-radius);
    background-color: rgba(0, 0, 0, 0.1);
}

.server-address-code {
    font-size: 1.1rem;
    background: transparent;
    color: var(--color-secondary);
}

.copy-button-icon {
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-secondary);
}

/* Character manage list icon */
.character-manage-icon {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

/* Homepage simple-div overrides (previously in index.html <style> block) */
.homepage-simple-div {
    margin: 1.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.homepage-simple-div p {
    line-height: 1.6;
    margin-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.homepage-simple-div p.lead {
    margin-bottom: 1rem;
}

.homepage-simple-div p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   RARITY BADGES
   ============================================================================ */

/* Base rarity badge - positioned upper right on cards.
   Size/scale/padding inherited from Bootstrap .badge to match book badges. */
.card-on-card .badge-rarity,
.card-on-card .badge-positive-condition,
.card-on-card .badge-area {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 3;
    text-transform: capitalize;
}

/* Stack positive condition badge below rarity if both present */
.card-on-card .badge-rarity+.badge-positive-condition {
    top: 1.8rem;
}

/* Stack area badge below other badges */
.card-on-card .badge-rarity+.badge-area {
    top: 1.8rem;
}

.card-on-card .badge-positive-condition+.badge-area {
    top: 1.8rem;
}

.card-on-card .badge-rarity+.badge-positive-condition+.badge-area {
    top: 3.2rem;
}

/* Positive condition badge on cards */
.badge-positive-condition {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* Area ability badge on cards */
.badge-area {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
    cursor: pointer;
}

/* Rarity color variants */
.badge-rarity-common {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.badge-rarity-uncommon {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

.badge-rarity-rare {
    background-color: #007bff !important;
    color: #ffffff !important;
}

.badge-rarity-ultra-rare {
    background-color: #e67e22 !important;
    color: #ffffff !important;
}

.badge-rarity-unknown {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* ============================================================================
   END OF CUSTOM STYLESHEET
   ============================================================================ */