/* TidanRealms Item Balance Tool — Dense Analytics Style */

/* ======================== */
/* Sprite icons              */
/* ======================== */

.sprite-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

.sprite-preview {
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    background-size: 200%;
}

.sprite-icon-large {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ======================== */
/* Dense table styling       */
/* ======================== */

.table {
    font-size: 12px;
    border-collapse: collapse;
    margin-bottom: 0;
}

.table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--table-header-text);
    background: var(--table-header-bg);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.table td {
    padding: 4px 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.table tbody tr:hover {
    background-color: var(--table-hover);
}

/* Override Bootstrap striped/dark */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
}

.table-dark, .table thead.table-dark {
    --bs-table-bg: var(--table-header-bg);
    --bs-table-color: var(--table-header-text);
}

.table thead.table-light {
    --bs-table-bg: var(--table-header-bg);
    --bs-table-color: var(--table-header-text);
}

.table-sm td {
    vertical-align: middle;
}

/* Numeric cells — monospace for scanability */
td[data-editable="true"],
td[data-field-display],
td.text-end,
.num {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* Stat value coloring */
.stat-positive { color: var(--positive); }
.stat-negative { color: var(--negative); }
.stat-zero { color: var(--text-muted); }

.compact-cell {
    padding-left: 0.25rem !important;
}

.slot-column {
    width: 90px;
    max-width: 90px;
    white-space: nowrap;
    padding-right: 0.5rem !important;
}

.name-column {
    width: 280px;
    max-width: 280px;
    white-space: nowrap;
}

/* ======================== */
/* Badges                    */
/* ======================== */

.badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

/* Color-coded tier badges (semantic — NOT themed) */
.badge-tier-st { background-color: #8b4513 !important; color: white; }
.badge-tier-my { background-color: #9400d3 !important; color: white; }
.badge-tier-lg { background-color: #ff4500 !important; color: white; }
.badge-tier-rt { background-color: #00cccc !important; color: #000; }
.badge-tier-ct { background-color: #d4a800 !important; color: #111; }
.badge-tier-ut { background-color: #cc9900 !important; color: #111; }
.badge-tier-t13, .badge-tier-t14 { background-color: #dc3545 !important; color: white; }
.badge-tier-t11, .badge-tier-t12 { background-color: #e06620 !important; color: white; }
.badge-tier-t8, .badge-tier-t9, .badge-tier-t10 { background-color: #1a6ddd !important; color: white; }
.badge-tier-t5, .badge-tier-t6, .badge-tier-t7 { background-color: #198754 !important; color: white; }
.badge-tier-t0, .badge-tier-t1, .badge-tier-t2, .badge-tier-t3, .badge-tier-t4 { background-color: #555d66 !important; color: white; }

/* ======================== */
/* Cards                     */
/* ======================== */

.card {
    box-shadow: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.card-header {
    padding: 8px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

.card-header h5,
.card-header h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-secondary) !important;
    margin: 0;
}

.card-header .bi {
    font-size: 12px;
}

/* Flush table in card */
.card-body.p-0 .table {
    margin-bottom: 0;
}

/* ======================== */
/* Filter bar                */
/* ======================== */

.filter-bar .btn {
    border-radius: 4px;
    font-size: 11px;
    padding: 3px 10px;
    font-weight: 500;
    transition: all 0.15s;
}

.filter-bar .btn-outline-primary,
.filter-bar .btn-outline-success,
.filter-bar .btn-outline-warning {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.filter-bar .btn-outline-primary:hover,
.filter-bar .btn-outline-success:hover,
.filter-bar .btn-outline-warning:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.filter-bar .btn-primary,
.filter-bar .btn-success,
.filter-bar .btn-warning,
.filter-bar .btn.active-filter {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
    font-weight: 600;
}

.filter-bar .text-muted.small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted) !important;
}

/* ======================== */
/* Filter sidebar            */
/* ======================== */

.filter-sidebar {
    width: 180px;
    min-width: 180px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 0 0 12px 0;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
}

.filter-sidebar:empty {
    display: none;
}

/* Section headers */
.sidebar-section-header {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 10px 10px 4px 10px;
}

.sidebar-section-header:not(:first-child) {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
    padding-top: 10px;
}

/* Slot subtype items */
.filter-sidebar .sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: all 0.15s;
}

.filter-sidebar .sidebar-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.filter-sidebar .sidebar-item.active {
    border-left-color: var(--accent);
    background: var(--bg-tertiary);
    color: var(--accent);
    font-weight: 600;
}

.sidebar-item .sb-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}

.sidebar-item.active .sb-count {
    color: var(--accent);
    opacity: 0.7;
}

/* Tier items in sidebar */
.sidebar-tier-item {
    font-size: 11px;
}

.sidebar-tier-item .badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
    min-width: 22px;
    text-align: center;
}

/* Property toggles */
.sidebar-toggles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-secondary);
    transition: color 0.15s;
    border: none;
    background: none;
    text-align: left;
}

.sidebar-toggle:hover {
    color: var(--text-primary);
}

.sidebar-toggle .toggle-indicator {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    transition: all 0.15s;
    color: transparent;
}

.sidebar-toggle.active .toggle-indicator {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.sidebar-toggle .toggle-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
}

/* ======================== */
/* Calculated stats badges   */
/* ======================== */

.badge-stat-primary { background-color: #1a6ddd !important; color: white; }
.badge-stat-info { background-color: #0099cc !important; color: white; }
.badge-stat-success { background-color: #198754 !important; color: white; }
.badge-stat-warning { background-color: #cc8800 !important; color: white; }
.badge-stat-secondary { background-color: #555d66 !important; color: white; }
.badge-stat-dark { background-color: #21262d !important; color: #e6edf3; }
.badge-stat-light { background-color: #d0d7de !important; color: #1f2328; }

/* ======================== */
/* Stat groups                */
/* ======================== */

.stat-group {
    padding: 10px;
    border-left: 3px solid var(--stat-group-border);
    background-color: var(--stat-group-bg);
    border-radius: 4px;
}

.stat-group h6 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

/* ======================== */
/* Compare page               */
/* ======================== */

.bg-success-subtle {
    background-color: var(--success-subtle) !important;
    border: 1px solid rgba(63, 185, 80, 0.2);
}

.bg-danger-subtle {
    background-color: var(--danger-subtle) !important;
    border: 1px solid rgba(248, 81, 73, 0.2);
}

.compare-table th {
    position: sticky;
    top: 0;
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    z-index: 10;
}

.compare-table td {
    vertical-align: middle;
    padding: 4px 8px;
}

/* ======================== */
/* Bulk edit                  */
/* ======================== */

.bulk-item-row {
    cursor: pointer;
    transition: background-color 0.15s;
}

.bulk-item-row:hover {
    background-color: var(--table-hover);
}

.bulk-item-row.selected {
    background-color: rgba(88, 166, 255, 0.1);
    border-color: var(--accent);
}

.preview-item { font-size: 12px; }
.preview-item .card-body { padding: 8px; }

/* Chart containers */
.chart-container {
    position: relative;
    height: 300px;
}

/* ======================== */
/* Delete Confirmation Dialog */
/* ========================== */

.delete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.delete-overlay.open {
    opacity: 1;
    visibility: visible;
}

.delete-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 380px;
    max-width: 90vw;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    z-index: 1061;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.delete-dialog.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.delete-dialog-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.delete-dialog-body {
    padding: 16px;
}

.delete-dialog-body p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.delete-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

/* Editor Panel               */
/* ======================== */

.editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.editor-overlay.open {
    opacity: 1;
    visibility: visible;
}

.editor-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 680px;
    max-width: 90vw;
    height: 100%;
    background: var(--panel-bg);
    box-shadow: -4px 0 20px var(--panel-shadow);
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.editor-panel.open {
    transform: translateX(0);
}

.editor-panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.editor-panel-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}

.editor-panel-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

/* Panel close X button */
.panel-close-x {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    transition: all 0.15s;
}

.panel-close-x:hover {
    background: var(--negative);
    border-color: var(--negative);
    color: white;
}

/* Flag toggle badges in editor panel */
.panel-flag-toggle {
    transition: all 0.15s;
    font-size: 11px;
    padding: 4px 8px;
}

.panel-flag-toggle:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

/* ======================== */
/* Sprite sheet picker        */
/* ======================== */

.sprite-carousel {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px;
    margin-bottom: 8px;
    scrollbar-width: thin;
}

.sprite-carousel::-webkit-scrollbar {
    height: 4px;
}

.carousel-sheet-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.carousel-sheet-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.carousel-item-active {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
}

.carousel-thumb-img {
    width: 64px;
    max-height: 48px;
    object-fit: cover;
    object-position: top left;
    image-rendering: pixelated;
    border-radius: 3px;
    background-color: var(--bg-tertiary);
}

.carousel-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.carousel-divider {
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    background: var(--border-color);
    margin: 4px 2px;
}

.sprite-sheet-picker {
    max-height: 500px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    padding: 4px;
}

.sprite-grid {
    margin: 0 auto;
    image-rendering: pixelated;
}

.sprite-cell {
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.1s, background 0.1s;
}

.sprite-cell:hover {
    border-color: var(--accent-color, #0d6efd);
    background: rgba(13, 110, 253, 0.15);
}

.sprite-cell-selected {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.25);
    box-shadow: inset 0 0 0 1px #0d6efd;
}

/* ======================== */
/* Inline editing             */
/* ======================== */

.inline-edit-input {
    width: 55px;
    padding: 1px 4px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--input-bg);
    color: var(--text-primary);
    outline: none;
}

.inline-edit-input:focus {
    box-shadow: 0 0 0 1px var(--accent);
}

td[data-editable="true"] {
    cursor: pointer;
    position: relative;
}

td[data-editable="true"]:hover {
    background-color: var(--table-hover) !important;
}

/* Unsaved row — left border accent instead of full background */
.unsaved-row {
    border-left: 2px solid var(--warning) !important;
}

/* ======================== */
/* Toast notifications        */
/* ======================== */

.toast-container {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: auto;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 360px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
}

.toast-notification.toast-visible {
    transform: translateX(0);
}

.toast-success {
    border-left-color: var(--positive);
}

.toast-success .toast-icon {
    color: var(--positive);
}

.toast-error {
    border-left-color: var(--negative);
}

.toast-error .toast-icon {
    color: var(--negative);
}

.toast-info {
    border-left-color: var(--accent);
}

.toast-info .toast-icon {
    color: var(--accent);
}

.toast-close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    color: var(--text-muted);
    opacity: 0.7;
    margin-left: auto;
}

.toast-close:hover {
    opacity: 1;
    color: var(--text-primary);
}

/* ======================== */
/* Dark mode toggle           */
/* ======================== */

.dark-mode-toggle {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}

.dark-mode-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ======================== */
/* Sortable table headers     */
/* ======================== */

th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
}

th[data-sort]:hover {
    color: var(--text-primary);
}

th[data-sort]::after {
    content: '';
    margin-left: 4px;
    opacity: 0.3;
}

th[data-sort].sort-asc::after {
    content: ' ▲';
    opacity: 1;
    color: var(--accent);
}

th[data-sort].sort-desc::after {
    content: ' ▼';
    opacity: 1;
    color: var(--accent);
}

/* ======================== */
/* Diff preview               */
/* ======================== */

.diff-preview-table td.diff-changed {
    background-color: rgba(210, 153, 34, 0.12);
    font-weight: bold;
}

.diff-preview-table td.diff-arrow {
    text-align: center;
    color: var(--text-muted);
    padding: 0 4px;
}

/* ======================== */
/* Stat strip (Analytics)     */
/* ======================== */

.stat-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.stat-strip-item {
    flex: 1;
    padding: 10px 16px;
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.stat-strip-item:last-child {
    border-right: none;
}

.stat-strip-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 2px;
}

.stat-strip-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ======================== */
/* Compact page header        */
/* ======================== */

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    margin-bottom: 8px;
}

.page-toolbar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-toolbar-count {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    margin-left: 8px;
}

/* ======================== */
/* Alerts theme-aware         */
/* ======================== */

.alert-info {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* ======================== */
/* Sticky sidebar             */
/* ======================== */

@media (min-width: 768px) {
    .position-sticky {
        position: sticky !important;
    }
}

/* ======================== */
/* Scrollbar (dark theme)     */
/* ======================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ======================== */
/* Compare page              */
/* ======================== */

.compare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.compare-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.compare-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    gap: 4px;
    border: 1px dashed transparent;
    border-radius: 5px;
    margin: 4px;
    font-size: 12px;
}

.compare-card-placeholder i {
    font-size: 20px;
}

.compare-card-placeholder:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(88, 166, 255, 0.04);
}

.compare-card-filled {
    padding: 10px;
}

.compare-card-filled .remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s;
}

.compare-card-filled .remove-btn:hover {
    color: var(--negative);
    background: rgba(248, 81, 73, 0.1);
}

.compare-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.compare-card-stat {
    text-align: center;
}

.compare-card-stat .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 600;
}

.compare-card-stat .value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Picker item list */
.picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    transition: background 0.1s;
    border-bottom: 1px solid var(--border-color);
}

.picker-item:last-child {
    border-bottom: none;
}

.picker-item:hover {
    background: var(--bg-tertiary);
}

.picker-item .item-meta {
    font-size: 10px;
    color: var(--text-muted);
}

/* Stat bar in comparison table */
.stat-bar-cell {
    position: relative;
}

.stat-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(88, 166, 255, 0.08);
    border-radius: 0 2px 2px 0;
    transition: width 0.2s;
}

.stat-bar-best {
    background: rgba(63, 185, 80, 0.12);
}

.stat-bar-worst {
    background: rgba(248, 81, 73, 0.08);
}

/* ======================== */
/* Bulk edit redesign         */
/* ======================== */

.bulk-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1030;
    font-size: 12px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}

.bulk-action-bar .sel-count {
    font-weight: 700;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
}

.bulk-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent);
}

.bulk-row.selected {
    background-color: rgba(88, 166, 255, 0.08) !important;
}

.bulk-row:hover {
    background-color: var(--table-hover);
}

.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-th:hover {
    color: var(--accent);
}

/* ======================== */
/* Operations panel tweaks   */
/* ======================== */

.op-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.op-row .op-label {
    font-size: 11px;
    font-weight: 600;
    width: 65px;
    flex-shrink: 0;
    color: var(--text-primary);
}

.op-row .form-select,
.op-row .form-control {
    font-size: 11px;
    padding: 3px 6px;
}

.op-row .form-select {
    width: 100px;
    flex-shrink: 0;
}

.op-row .form-control {
    width: 70px;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}

/* ======================== */
/* Roadmap page             */
/* ======================== */

.roadmap-help {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--accent);
}

/* StatLevel chip badge — small mono number next to the item name. */
.roadmap-item-level {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== Classic view =====
   Horizontal-wrap grid of fixed-width tier cards. Early game (tier idx 0)
   sits on the left, endgame on the right. Cards reflow to additional rows
   on narrow viewports thanks to auto-fill + minmax. */
.roadmap-classic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    padding-bottom: 24px;
    align-items: start;
}

.roadmap-tier {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    overflow: hidden;
    /* Hard cap so tier cards stay readable even when the auto-fill grid
       only fits one column (the 1fr would otherwise stretch them across
       the whole page). */
    max-width: 420px;
    width: 100%;
    justify-self: stretch;
}

.roadmap-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.roadmap-tier-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.roadmap-tier-controls {
    display: flex;
    gap: 4px;
}
.roadmap-tier-controls .btn {
    padding: 2px 6px;
    font-size: 11px;
}

.roadmap-tier-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.roadmap-tier-body.single-lane { /* no-op; column flex already stacks both */ }

.roadmap-lane {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    padding: 6px 8px;
}

.roadmap-lane-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}
.roadmap-lane-label .roadmap-add-btn {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 10px;
}

.roadmap-items,
.roadmap-bosses {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roadmap-empty {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    padding: 4px 6px;
}

/* Items inside the classic view get no connector dots (those are spine-only).
   The roadmap-item-classic class skips both ::after and ::before by not
   matching the equipment/bosses pseudo-element selectors. */

/* ===== Spine view ===== */
/* Vertical spine: index 0 in the JS array = bottom of screen (early game). */
.roadmap-spine {
    display: flex;
    flex-direction: column-reverse;
    gap: 28px;
    padding: 24px 0 32px;
}

.roadmap-row {
    display: grid;
    gap: 20px;
    align-items: center;
    position: relative;
}
.roadmap-row.lane-both           { grid-template-columns: 1fr 220px 1fr; }
.roadmap-row.lane-equipment-only { grid-template-columns: 1fr 220px; }
.roadmap-row.lane-bosses-only    { grid-template-columns: 220px 1fr; }

@media (max-width: 800px) {
    .roadmap-row.lane-both           { grid-template-columns: 1fr 160px 1fr; gap: 8px; }
    .roadmap-row.lane-equipment-only { grid-template-columns: 1fr 160px; gap: 8px; }
    .roadmap-row.lane-bosses-only    { grid-template-columns: 160px 1fr; gap: 8px; }
}

/* Spine column — the line + node + tier label. */
.roadmap-col-spine {
    position: relative;
    text-align: center;
    padding: 0;
    z-index: 1;
}

/* Vertical accent line behind the node. Span the full row height plus the
   gap above and below so it joins to neighbouring tier nodes. */
.roadmap-col-spine::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -28px;
    bottom: -28px;
    width: 3px;
    background: var(--accent);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: -1;
}

/* Cap the spine at the bottom-most and top-most tiers so the line doesn't
   trail off into the page padding. */
.roadmap-col-spine.spine-bottom::before { top: 50%; }
.roadmap-col-spine.spine-top::before    { bottom: 50%; }

.roadmap-node {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    margin: 0 auto 6px;
    box-shadow: 0 0 0 1px var(--accent);
}

.roadmap-node-label {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.roadmap-tier-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}
.roadmap-tier-controls-row:first-child { margin-top: 0; }
.roadmap-tier-controls-row .btn {
    padding: 2px 6px;
    font-size: 11px;
}

.roadmap-tier-index {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 1px 5px;
    border-radius: 3px;
}

.roadmap-tier-title {
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}
.roadmap-tier-title:hover { border-bottom-color: var(--accent); }

/* Branch columns — chips on the left side of the spine align right (so they
   sit next to the spine), chips on the right align left. Connector dots are
   drawn via pseudo-elements pointing toward the spine. */
.roadmap-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Stretch chips to fill the column width so each tier row reads as a single
   filled band rather than two narrow chip stacks with empty space on either
   side. The internal chip flex layout keeps the sprite + name + budget on
   the spine side via row-reverse for left chips. */
.roadmap-col-left,
.roadmap-col-right { align-items: stretch; }
.roadmap-col-left  .roadmap-item { flex-direction: row-reverse; }

.roadmap-col .roadmap-add-btn {
    padding: 1px 8px;
    font-size: 10px;
    margin-top: 2px;
}

/* Item / boss chip styling. */
.roadmap-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.1s;
    /* No max-width — chips stretch to their column track (1fr) so the row
       fills the full row width. The internal flex layout keeps content
       centered/anchored toward the spine. */
    position: relative;
}
.roadmap-item:hover { background: var(--bg-tertiary); }

/* Connector dash from chip toward the spine. Side is determined by the chip's
   side class (set by the renderer). The classic view uses 'classic' which
   matches neither and so renders no connector. */
.roadmap-item-left::after,
.roadmap-item-right::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;
    border-top: 2px dotted var(--accent);
    opacity: 0.55;
}
.roadmap-item-left::after  { right: -16px; }
.roadmap-item-right::before { left: -16px; }

.roadmap-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.roadmap-item-dps {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.roadmap-item-warn {
    border-color: var(--warning, #f0a020);
    box-shadow: inset 0 0 0 1px rgba(240, 160, 32, 0.25);
}

/* Over-cap: item's stat budget exceeds the tier's MaxBudget. Distinct from
   the inversion warning (yellow) — bright red border + soft red bg so it
   reads as a hard validation failure rather than a soft hint. */
.roadmap-item-overcap {
    border-color: var(--danger, #d04040) !important;
    box-shadow: 0 0 0 1px var(--danger, #d04040), inset 0 0 0 1px rgba(208, 64, 64, 0.20);
    background: rgba(208, 64, 64, 0.06);
}
.roadmap-overcap-warning {
    color: var(--danger, #d04040);
    font-size: 13px;
    cursor: help;
}

/* Tier max-budget cap input. Compact field that sits in the tier header
   alongside the other controls. */
.roadmap-tier-cap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}
.roadmap-tier-cap > i { font-size: 13px; }
.roadmap-tier-cap-input {
    width: 64px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    text-align: right;
}

/* Show-lanes form switches — replaces the old btn-toggle pair. */
.lane-switches {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.lane-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-tertiary);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease, border-color 0.1s ease;
    font-size: 12px;
}
.lane-switch:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
}
.lane-switch input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.lane-switch input[type="checkbox"]:checked + .lane-switch-label {
    color: var(--accent);
    font-weight: 600;
}
.lane-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

/* Multi-select highlight + drag affordances. */
.roadmap-item-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 1px rgba(88, 166, 255, 0.15);
    background: rgba(88, 166, 255, 0.10);
}

.roadmap-item[draggable="true"] { cursor: grab; }
.roadmap-item[draggable="true"]:active { cursor: grabbing; }

.roadmap-item-dragging {
    opacity: 0.45;
}

/* Highlight tier as a drop target while dragging over it. */
.roadmap-row.drag-over,
.roadmap-tier.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Picker panel — sticky footer for bulk-add actions; "added" state on items. */
#pickerPanel {
    display: flex;
    flex-direction: column;
}

.picker-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.picker-body .filter-sidebar {
    max-height: none;
    flex-shrink: 0;
}

.picker-list-pane {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    min-width: 0;
}

.picker-list-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.picker-sort-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.picker-sort-row .btn { padding: 2px 8px; font-size: 11px; }

.picker-item-edit,
.roadmap-item-edit {
    padding: 1px 6px !important;
    font-size: 11px !important;
    flex-shrink: 0;
}
.picker-item-edit { margin-left: auto; }

.picker-select-all-action {
    margin: 0 8px;
    width: calc(100% - 16px) !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}
.picker-select-all-action:hover {
    background: var(--accent-bg, rgba(88, 166, 255, 0.12)) !important;
    color: var(--accent) !important;
}

.picker-footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
}

.picker-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.picker-staged-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    max-height: 88px;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.picker-staged-strip:empty { display: none; }

.picker-staged-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.05s ease;
}
.picker-staged-thumb:hover {
    transform: scale(1.08);
    border-color: var(--danger, #d04040);
    background: rgba(208, 64, 64, 0.12);
}
.picker-staged-thumb:hover::after {
    content: "×";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    line-height: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: var(--danger, #d04040);
    border-radius: 50%;
}
.picker-staged-thumb .sprite-icon {
    margin: 0;
    width: 28px;
    height: 28px;
}
.picker-staged-thumb-tier {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 8px !important;
    padding: 0 3px !important;
    line-height: 10px !important;
}

.picker-item-added {
    background: rgba(64, 192, 96, 0.08);
    cursor: default;
    opacity: 0.85;
}
.picker-item-added:hover { background: rgba(64, 192, 96, 0.08); }

.picker-item-staged {
    background: rgba(88, 166, 255, 0.12);
    border-left: 2px solid var(--accent);
    padding-left: 10px; /* compensate for the 2px border */
}

.picker-stage-cb {
    flex-shrink: 0;
    cursor: pointer;
}
.picker-stage-cb:disabled { cursor: default; opacity: 0.5; }

.picker-item-tag {
    font-size: 10px;
    color: var(--success, #40c060);
    font-weight: 600;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    white-space: nowrap;
}

.picker-footer-count {
    font-size: 12px;
    color: var(--text-muted);
}
.picker-footer-count strong { color: var(--accent); }

/* Bulk action bar — fixed at the bottom of the viewport. */
.roadmap-bulk-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 100;
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
}
.roadmap-bulk-count { font-size: 13px; }
.roadmap-bulk-bar .vr { align-self: stretch; }

.roadmap-warning {
    color: var(--warning, #f0a020);
    font-size: 13px;
    cursor: help;
}

/* Boss node — same connector dash as equipment chips. */
.roadmap-boss {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    overflow: hidden;
    max-width: 360px;
    position: relative;
}

.roadmap-col-right .roadmap-boss::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -16px;
    width: 14px;
    border-top: 2px dotted var(--accent);
    opacity: 0.55;
}

.roadmap-boss-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
}
.roadmap-boss-head:hover { background: var(--bg-tertiary); }
.roadmap-boss-head .btn { padding: 1px 6px; font-size: 11px; }

.roadmap-boss-body {
    display: none;
    padding: 6px 8px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.roadmap-boss.expanded .roadmap-boss-body { display: block; }

.roadmap-drops {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Audit log page */
.audit-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.audit-group-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: normal;
}
.audit-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.audit-table td {
    font-size: 12px;
    vertical-align: middle;
}
.audit-table .audit-details {
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
}