/* PrUnderground Styles - APEX Console Theme */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    /* Backgrounds */
    --bg-primary: #0d0d15;
    --bg-secondary: #1a1a28;
    --bg-tertiary: #252535;
    --bg-highlight: #2a2a3c;

    /* Borders */
    --border-subtle: #2a2a3c;
    --border-medium: #3a3a50;
    --border-strong: #4a4a60;

    /* Text */
    --text-primary: #e0e0e8;
    --text-secondary: #a0a0b0;
    --text-tertiary: #606070;
    --text-inverse: #0d0d15;

    /* Accent Colors */
    --accent-yellow: #f0b830;
    --accent-green: #40c040;
    --accent-red: #e04040;
    --accent-cyan: #40c8c8;
    --accent-orange: #e08030;
    --accent-purple: #a050c0;

    /* Semantic */
    --color-success: var(--accent-green);
    --color-error: var(--accent-red);
    --color-warning: var(--accent-orange);
    --color-info: var(--accent-cyan);
    --color-highlight: var(--accent-yellow);

    /* Typography */
    --font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Responsive breakpoints */
    --bp-narrow: 540px;
    --bp-medium: 723px;

    /* Legacy aliases for compatibility */
    --color-bg: var(--bg-primary);
    --color-surface: var(--bg-secondary);
    --color-surface-2: var(--bg-tertiary);
    --color-border: var(--border-subtle);
    --color-text: var(--text-primary);
    --color-text-dim: var(--text-secondary);
    --color-primary: var(--accent-cyan);
    --color-danger: var(--accent-red);
}

/* ========================================
   Reset & Base
   ======================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ========================================
   Navbar
   ======================================== */
.navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nav-brand a {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

/* Global spinner - always visible, only animates on hover or loading */
#global-spinner {
    display: inline-block;
    animation: none;
}

#global-spinner::before,
#global-spinner::after {
    animation: none;
}

.nav-brand:hover #global-spinner,
body.loading #global-spinner {
    animation: spinner-rotate 1.8s linear infinite;
}

.nav-brand:hover #global-spinner::before,
body.loading #global-spinner::before {
    animation: spinner-rotate 1s linear infinite;
}

.nav-brand:hover #global-spinner::after,
body.loading #global-spinner::after {
    animation: spinner-rotate 0.7s linear infinite reverse;
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
}

.nav-links a {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
}

.nav-links a:hover {
    color: var(--accent-cyan);
    text-decoration: none;
}

/* ----------------------------------------
   Hamburger Menu (CSS-only)
   ---------------------------------------- */
.nav-toggle-input {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: var(--space-sm);
    z-index: 100;
}

.hamburger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    position: relative;
    transition: background 0.2s;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    left: 0;
    transition: transform 0.2s;
}

.hamburger-icon::before {
    top: -7px;
}

.hamburger-icon::after {
    top: 7px;
}

/* Hamburger animation when open */
.nav-toggle-input:checked + .nav-toggle-label .hamburger-icon {
    background: transparent;
}

.nav-toggle-input:checked + .nav-toggle-label .hamburger-icon::before {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle-input:checked + .nav-toggle-label .hamburger-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   Container
   ======================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
    flex: 1;
}

/* Limit table width on very wide screens */
.listings-table {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    border: none;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--accent-yellow);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: #d4a028;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

.btn-secondary:hover {
    background: var(--bg-highlight);
    border-color: var(--border-strong);
}

.btn-danger {
    background: var(--accent-red);
    color: var(--text-primary);
}

.btn-danger:hover {
    background: #c03030;
}

.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    line-height: 1;
}

.btn-edit {
    background: #404050;
    color: #c8c8d0;
    border: none;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    line-height: 1;
}

.btn-edit:hover {
    background: #505060;
}

/* ========================================
   Forms
   ======================================== */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-tertiary);
}

.form-row {
    display: flex;
    gap: var(--space-md);
}

.form-row .form-group {
    flex: 1;
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.form-actions-primary {
    display: flex;
    gap: var(--space-sm);
}

.form-actions-danger {
    margin-top: var(--space-md);
}

/* ========================================
   Tables
   ======================================== */

/* Zebra striping for all tables */
table tbody tr:nth-child(even) {
    background: var(--bg-tertiary);
}

table tbody tr:nth-child(odd) {
    background: transparent;
}

table tbody tr:hover {
    background: var(--bg-highlight);
}

.listings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.listings-table th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-medium);
}

.listings-table td {
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

/* Zebra striping for listings table */
.listings-table tbody tr:nth-child(even) {
    background: var(--bg-tertiary);
}

.listings-table tbody tr:nth-child(odd) {
    background: transparent;
}

.listings-table tbody tr:hover {
    background: var(--bg-highlight);
}

/* Sortable column headers */
.listings-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.listings-table th.sortable:hover {
    background: var(--bg-highlight);
}

.sort-indicator {
    font-size: 0.8em;
    color: var(--accent-cyan);
    margin-left: var(--space-xs);
}

/* Sort builder with chips */
.sort-builder {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.sort-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.sort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.sort-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.sort-chip:hover {
    background: var(--bg-highlight);
    border-color: var(--accent-cyan);
}

.sort-chip-dir {
    color: var(--accent-cyan);
    font-weight: 600;
}

.sort-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-left: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.sort-chip-remove:hover {
    color: var(--accent-red);
}

.sort-clear {
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.sort-clear:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.listings-table .actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

/* Material tickers in tables */
.listings-table td:first-child,
.ticker {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-cyan);
}

/* Price display */
.price {
    font-family: var(--font-mono);
}

.price-positive {
    color: var(--accent-green);
}

.price-negative {
    color: var(--accent-red);
}

/* Notes cell */
.notes-cell {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-cell[title] {
    cursor: help;
}

.notes-cell[title]:hover {
    color: var(--text-primary);
}

/* ========================================
   Badges
   ======================================== */
.badge {
    display: inline-block;
    padding: 2px var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-standing {
    background: rgba(64, 200, 200, 0.15);
    color: #40c8c8;
    border: 1px solid rgba(64, 200, 200, 0.3);
}

.badge-special {
    background: rgba(92, 184, 92, 0.15);
    color: #5cb85c;
    border: 1px solid rgba(92, 184, 92, 0.3);
}

.badge-expired {
    background: rgba(217, 83, 79, 0.15);
    color: #d9534f;
    border: 1px solid rgba(217, 83, 79, 0.3);
}

.badge-available {
    background: rgba(64, 192, 64, 0.15);
    color: #40c040;
    border: 1px solid rgba(64, 192, 64, 0.3);
}

.badge-low-stock {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.badge-out-of-stock {
    background: rgba(217, 83, 79, 0.15);
    color: #d9534f;
    border: 1px solid rgba(217, 83, 79, 0.3);
}

.badge-made-to-order {
    background: rgba(160, 80, 192, 0.15);
    color: #a050c0;
    border: 1px solid rgba(160, 80, 192, 0.3);
}

.qty-unlimited {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--accent-cyan);
}

.qty-ready {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-left: var(--space-xs);
}

.listing-expired {
    opacity: 0.5;
}

.expiry-info {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-left: var(--space-xs);
}

/* ========================================
   Alerts
   ======================================== */
.alert {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border-left: 3px solid;
}

.alert-error {
    background: rgba(224, 64, 64, 0.1);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.alert-success {
    background: rgba(64, 192, 64, 0.1);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.alert-warning {
    background: rgba(224, 128, 48, 0.1);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.alert-info {
    background: rgba(64, 200, 200, 0.1);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* ========================================
   Cards/Panels
   ======================================== */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    padding: var(--space-md);
}

.card-header {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

/* ========================================
   Hero (Home page)
   ======================================== */
.hero {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.hero h1 {
    font-size: var(--text-2xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    color: var(--accent-yellow);
}

.hero .tagline {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.hero-cta {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

/* ========================================
   Features
   ======================================== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.feature {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
}

.feature h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    color: var(--accent-yellow);
}

.feature p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ========================================
   Dashboard
   ======================================== */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.dashboard-header h1 {
    font-size: var(--text-xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.company-info {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.dashboard-actions {
    display: flex;
    gap: var(--space-sm);
}

.my-listings,
.my-bundles,
.suggestions,
.discord-export {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-md);
}

.my-listings h2,
.my-bundles h2,
.suggestions h2,
.discord-export h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

/* ========================================
   Suggestion Chips
   ======================================== */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.chip {
    display: inline-block;
    padding: 2px 6px;
    background: #2a2a3c;
    border: 1px solid #3a3a4c;
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    color: var(--accent-cyan);
    min-width: 32px;
    text-align: center;
}

.chip:hover {
    text-decoration: none;
    filter: brightness(1.15);
}

.chip.lite:hover {
    background: transparent;
    filter: brightness(1.2);
}

/* Quick add chip category colors - FILLED style (matching mat-tile exactly) */
.chip-agricultural-products:not(.lite) { background: linear-gradient(135deg, #003800, #0a4708); color: #8bb37b; border-color: #0a4708; }
.chip-consumables-basic:not(.lite) { background: linear-gradient(135deg, #a62c2a, #ba363c); color: #ff989e; border-color: #ba363c; }
.chip-consumables-luxury:not(.lite) { background: linear-gradient(135deg, #680000, #7b0012); color: #db9191; border-color: #7b0012; }
.chip-fuels:not(.lite) { background: linear-gradient(135deg, #548d22, #6ba23c); color: #cbfaa3; border-color: #6ba23c; }
.chip-liquids:not(.lite) { background: linear-gradient(135deg, #67a8da, #6098c3); color: #f1ffff; border-color: #6098c3; }
.chip-plastics:not(.lite) { background: linear-gradient(135deg, #791f62, #92387b); color: #f89ee1; border-color: #92387b; }
.chip-ship-shields:not(.lite) { background: linear-gradient(135deg, #bf740a, #d98c21); color: #dbdb79; border-color: #d98c21; }
.chip-alloys:not(.lite) { background: linear-gradient(135deg, #8a5414, #e08838); color: #e8b366; border-color: #e08838; }
.chip-chemicals:not(.lite) { background: linear-gradient(135deg, #a84a68, #e8809a); color: #f4a8be; border-color: #e8809a; }
.chip-construction-materials:not(.lite) { background: linear-gradient(135deg, #3a6aa8, #7098d0); color: #a8c8f0; border-color: #7098d0; }
.chip-construction-parts:not(.lite) { background: linear-gradient(135deg, #2e5a7c, #5494c8); color: #88b8dc; border-color: #5494c8; }
.chip-construction-prefabs:not(.lite) { background: linear-gradient(135deg, #102478, #2848d0); color: #6080e8; border-color: #2848d0; }
.chip-drones:not(.lite) { background: linear-gradient(135deg, #a03810, #f06028); color: #f89868; border-color: #f06028; }
.chip-electronic-devices:not(.lite) { background: linear-gradient(135deg, #5a1894, #9830f0); color: #c080f8; border-color: #9830f0; }
.chip-electronic-parts:not(.lite) { background: linear-gradient(135deg, #6848a8, #a078e0); color: #c8a8f8; border-color: #a078e0; }
.chip-electronic-pieces:not(.lite) { background: linear-gradient(135deg, #8070a8, #c0a8e8); color: #e0d0f8; border-color: #c0a8e8; }
.chip-electronic-systems:not(.lite) { background: linear-gradient(135deg, #441c6c, #7840ac); color: #a070d0; border-color: #7840ac; }
.chip-elements:not(.lite) { background: linear-gradient(135deg, #54402c, #907050); color: #b89878; border-color: #907050; }
.chip-energy-systems:not(.lite) { background: linear-gradient(135deg, #1c5838, #38a070); color: #70d0a0; border-color: #38a070; }
.chip-gases:not(.lite) { background: linear-gradient(135deg, #008888, #20e8e8); color: #60f8f8; border-color: #20e8e8; }
.chip-metals:not(.lite) { background: linear-gradient(135deg, #444444, #787878); color: #a8a8a8; border-color: #787878; }
.chip-minerals:not(.lite) { background: linear-gradient(135deg, #907858, #c8a880); color: #e8d0b0; border-color: #c8a880; }
.chip-ores:not(.lite) { background: linear-gradient(135deg, #585c68, #9498a8); color: #b8c0d0; border-color: #9498a8; }
.chip-ship-engines:not(.lite) { background: linear-gradient(135deg, #c02800, #ff5010); color: #ff9060; border-color: #ff5010; }
.chip-ship-kits:not(.lite) { background: linear-gradient(135deg, #b86000, #ff9810); color: #ffc060; border-color: #ff9810; }
.chip-ship-parts:not(.lite) { background: linear-gradient(135deg, #c07800, #ffa810); color: #ffd060; border-color: #ffa810; }
.chip-software-components:not(.lite) { background: linear-gradient(135deg, #988828, #d0c060); color: #e8e098; border-color: #d0c060; }
.chip-software-systems:not(.lite) { background: linear-gradient(135deg, #786808, #b09818); color: #d0c048; border-color: #b09818; }
.chip-software-tools:not(.lite) { background: linear-gradient(135deg, #a88010, #e8b028); color: #f8d870; border-color: #e8b028; }
.chip-textiles:not(.lite) { background: linear-gradient(135deg, #647020, #a8b848); color: #c8d878; border-color: #a8b848; }
.chip-unit-prefabs:not(.lite) { background: linear-gradient(135deg, #302830, #605058); color: #908088; border-color: #605058; }
.chip-default:not(.lite) { background: var(--bg-tertiary); color: var(--accent-cyan); border-color: var(--border-subtle); }

/* Quick add chip category colors - LITE style (more vivid text on transparent) */
.chip-agricultural-products.lite { color: #9ddf85; }
.chip-consumables-basic.lite { color: #ff7a82; }
.chip-consumables-luxury.lite { color: #ff9090; }
.chip-fuels.lite { color: #b8ff70; }
.chip-liquids.lite { color: #90e0ff; }
.chip-plastics.lite { color: #ff8eef; }
.chip-ship-shields.lite { color: #ffff60; }
.chip-alloys.lite { color: #ffb850; }
.chip-chemicals.lite { color: #ff90b8; }
.chip-construction-materials.lite { color: #90c8ff; }
.chip-construction-parts.lite { color: #70c0ff; }
.chip-construction-prefabs.lite { color: #5090ff; }
.chip-drones.lite { color: #ff8040; }
.chip-electronic-devices.lite { color: #d070ff; }
.chip-electronic-parts.lite { color: #c890ff; }
.chip-electronic-pieces.lite { color: #d8b8ff; }
.chip-electronic-systems.lite { color: #b860f0; }
.chip-elements.lite { color: #d8a870; }
.chip-energy-systems.lite { color: #50f0a0; }
.chip-gases.lite { color: #40ffff; }
.chip-metals.lite { color: #c8c8c8; }
.chip-minerals.lite { color: #ffd090; }
.chip-ores.lite { color: #c0d0e8; }
.chip-ship-engines.lite { color: #ff6830; }
.chip-ship-kits.lite { color: #ffb030; }
.chip-ship-parts.lite { color: #ffc030; }
.chip-software-components.lite { color: #f0e860; }
.chip-software-systems.lite { color: #e0d030; }
.chip-software-tools.lite { color: #ffe050; }
.chip-textiles.lite { color: #c8f050; }
.chip-unit-prefabs.lite { color: #b090a8; }
.chip-default.lite { color: #50e8e8; }

.chip-more {
    color: var(--text-tertiary);
    cursor: default;
}

.chip-more:hover {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-color: var(--border-subtle);
}

/* ========================================
   Discord Preview
   ======================================== */
.discord-preview-container {
    margin-bottom: var(--space-sm);
}

.discord-preview {
    width: 100%;
    padding: var(--space-sm);
    background: #36393f;
    font-family: var(--font-mono);
    white-space: pre-wrap;
    font-size: var(--text-sm);
    color: #dcddde;
    border: 1px solid var(--border-subtle);
    resize: vertical;
    min-height: 120px;
}

.discord-preview:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* Success button state for copy feedback */
.btn-success {
    background: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: var(--text-inverse) !important;
}

/* ========================================
   Empty State
   ======================================== */
.empty-state {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
}

.empty-state .btn {
    margin-top: var(--space-md);
}

/* ========================================
   Auth Pages
   ======================================== */
.auth-page {
    max-width: 480px;
    margin: 0 auto;
}

.auth-instructions {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-md);
}

.auth-instructions h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.auth-instructions ol {
    margin-left: var(--space-lg);
    margin-top: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.auth-instructions li {
    margin-bottom: var(--space-xs);
}

.auth-form {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
}

.auth-note {
    text-align: center;
    margin-top: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.auth-subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
}

/* ========================================
   Account Page
   ======================================== */
.account-page {
    max-width: 700px;
    margin: 0 auto;
}

.account-section {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-md);
}

.account-section h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.section-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm);
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs);
}

.info-value {
    font-weight: 500;
}

.info-value code {
    background: var(--bg-tertiary);
    padding: 2px var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.text-dim {
    color: var(--text-secondary);
}

.account-form {
    margin: var(--space-sm) 0;
}

.discord-preview {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    max-height: 300px;
    overflow-y: auto;
}

.discord-preview-content {
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.discord-preview-error {
    color: var(--color-error);
}

.data-list {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.data-list li {
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.data-list strong {
    color: var(--text-primary);
}

.account-actions {
    display: flex;
    gap: var(--space-sm);
}

/* ========================================
   Profile Page
   ======================================== */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.profile-header h1 {
    font-size: var(--text-xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.company-name {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.member-since {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-actions {
    display: flex;
    gap: var(--space-sm);
}

.profile-listings,
.profile-bundles {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
}

.profile-bundles {
    margin-top: var(--space-md);
}

.profile-bundles h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.profile-listings .listings-table {
    width: 100%;
    table-layout: auto;
}

/* Stock status in quantity cells - used in browse, profile, dashboard */
.qty-cell {
    min-width: 180px;
    white-space: nowrap;
}

.qty-cell .badge {
    margin-left: var(--space-sm);
}

.col-quantity .badge {
    margin-left: var(--space-xs);
}

/* ========================================
   Browse Tabs (Items / Bundles)
   ======================================== */
.browse-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.browse-tab {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.browse-tab:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.browse-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

/* ========================================
   Filter Form (Browse page)
   ======================================== */
.filter-form {
    margin-bottom: var(--space-md);
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
}

.filter-row {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
}

.filter-row input {
    flex: 1;
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--text-base);
}

.filter-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.filter-group label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.filter-group select,
.filter-group input {
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--text-base);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.filter-group .help-text {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: var(--text-xs);
}

.filter-actions {
    display: flex;
    gap: var(--space-xs);
}

.filter-actions-group {
    flex: 0 0 auto;
}

/* ========================================
   Radio Options (Price type)
   ======================================== */
.price-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.radio-option input[type="radio"] {
    width: auto;
    accent-color: var(--accent-cyan);
}

/* Tooltip icon for help hints */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: var(--space-xs);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    border-radius: 50%;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: help;
}

.tooltip-icon:hover {
    background: var(--bg-highlight);
    color: var(--accent-cyan);
}

/* ========================================
   Footer
   ======================================== */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-sm) var(--space-lg);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.footer p {
    margin: 2px 0;
}

/* ========================================
   Form Page (Listing create/edit)
   ======================================== */
.form-page {
    max-width: 450px;
    margin: 0 auto;
}

.form-page h1 {
    font-size: var(--text-xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.listing-form {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
}

.price-fields {
    margin-top: var(--space-xs);
}

/* Live inventory display */
.live-inventory {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-green);
}

.live-inventory.qty-ok {
    color: var(--accent-green);
}

.live-inventory.qty-low {
    color: var(--accent-orange);
}

.live-inventory.qty-out {
    color: var(--accent-red);
}

/* Qty value colors (browse/profile pages) */
.qty-value.qty-ok {
    color: var(--accent-green);
}

.qty-value.qty-low {
    color: var(--accent-orange);
}

.qty-value.qty-out {
    color: var(--accent-red);
}

.inventory-detail {
    font-weight: normal;
    color: var(--text-secondary);
    margin-left: var(--space-xs);
}

/* Help text */
.help-text {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: calc(-1 * var(--space-xs));
    margin-bottom: var(--space-sm);
}

.help-text.price-preview {
    margin-top: var(--space-sm);
}

/* Bundle form - dynamic item rows */
.bundle-item-row {
    margin-bottom: var(--space-sm);
}

.bundle-item-row .form-row {
    align-items: flex-end;
}

.bundle-item-row .form-group {
    margin-bottom: 0;
}

.bundle-item-row .form-group:first-child {
    flex: 2;
}

.bundle-item-row .form-group:nth-child(2) {
    flex: 1;
}

.bundle-item-row .form-group:last-child {
    flex: 0 0 auto;
}

.bundle-item-row .btn-danger {
    height: 34px;
    display: flex;
    align-items: center;
}

#bundle-items-container {
    margin-bottom: var(--space-sm);
}

#add-item-btn {
    margin-bottom: var(--space-md);
}

.form-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-md) 0;
}

/* ========================================
   Responsive - Three-tier system
   Narrow: <=540px, Medium: 541-723px, Desktop: >723px
   Uses container queries with media query fallbacks
   ======================================== */

/* ----------------------------------------
   URL Parameter Overrides
   ---------------------------------------- */
/* Force narrow mode (embed or ?narrow=1) */
html.force-narrow .container {
    padding: var(--space-sm);
}

html.force-narrow .nav-toggle-label {
    display: flex;
}

html.force-narrow .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-direction: column;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

html.force-narrow .nav-toggle-input:checked ~ .nav-links {
    max-height: 300px;
    padding: var(--space-sm) 0;
}

html.force-narrow .nav-links a {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

html.force-narrow .nav-links a:last-child {
    border-bottom: none;
}

/* Hide chrome (embed or ?chrome=0) */
html.no-chrome .footer {
    display: none;
}

html.no-chrome .nav-logo {
    display: none;
}

/* Force desktop mode (?embed=0) */
html.force-desktop .nav-toggle-label {
    display: none !important;
}

html.force-desktop .nav-links {
    position: static !important;
    max-height: none !important;
    flex-direction: row !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ----------------------------------------
   Stock Status Dots (narrow mode)
   ---------------------------------------- */
.stock-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: var(--space-xs);
    flex-shrink: 0;
}

.stock-dot.stock-out {
    background: var(--accent-red);
}

.stock-dot.stock-low {
    background: var(--accent-orange);
}

/* ----------------------------------------
   Responsive Display Helpers
   ---------------------------------------- */
.hide-narrow {
    display: initial;
}

.show-narrow {
    display: none;
}

/* Hide at medium and below (≤723px) */
.hide-medium {
    display: initial;
}

/* Show at medium and below (≤723px) */
.show-medium {
    display: none;
}

/* ----------------------------------------
   Media Query Fallbacks (for browsers without container query support)
   ---------------------------------------- */
@media (max-width: 723px) {
    /* Show hamburger menu */
    .nav-toggle-label {
        display: flex;
        align-items: center;
    }

    .navbar {
        position: relative;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-subtle);
        flex-direction: column;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        z-index: 50;
    }

    .nav-toggle-input:checked ~ .nav-links {
        max-height: 300px;
        padding: var(--space-sm) 0;
    }

    .nav-links a {
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--border-subtle);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* Filter form reflow */
    .filter-row {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .filter-group {
        width: 100%;
    }

    /* Dashboard header */
    .dashboard-header {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
        align-items: stretch;
    }

    .dashboard-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .dashboard-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Profile header */
    .profile-header {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .profile-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .profile-actions .btn {
        width: 100%;
    }

    /* Hero */
    .hero {
        padding: var(--space-lg) var(--space-sm);
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta .btn {
        width: 100%;
    }

    /* Sort builder */
    .sort-builder {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    /* Table column visibility - Medium tier */
    .col-notes {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 540px) {
    /* Narrow tier */
    .container {
        padding: var(--space-xs);
    }

    /* Hide columns at narrow */
    .col-notes {
        display: none;
    }

    /* Show dots instead of badges */
    .stock-dot {
        display: inline-block;
    }

    .badge-out-of-stock,
    .badge-low-stock {
        display: none;
    }

    /* Responsive helpers */
    .hide-narrow {
        display: none !important;
    }

    .show-narrow {
        display: initial !important;
    }

    /* Medium helpers also apply at narrow */
    .hide-medium {
        display: none !important;
    }

    .show-medium {
        display: initial !important;
    }

    /* Form actions stack */
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        text-align: center;
    }

    .form-actions-primary {
        /* Keep side-by-side even on mobile for primary actions */
    }

    .form-actions-danger .btn {
        width: 100%;
    }

    /* Table action buttons */
    .actions {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Hero title */
    .hero h1 {
        font-size: var(--text-xl);
    }

    /* Price options */
    .price-options {
        flex-direction: column;
        gap: var(--space-xs);
    }

    /* Hide updated column at narrow - FIO status bar shows freshness */
    .col-updated {
        display: none;
    }

    /* Tighter padding on browse page elements */
    .filter-form {
        padding: var(--space-sm);
    }

    .browse-page {
        padding: 0;
    }

    /* Tables fill available width */
    .listings-table {
        width: 100%;
    }
}


/* ----------------------------------------
   Sticky Table Header
   ---------------------------------------- */
.listings-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.listings-table thead th {
    background: var(--bg-tertiary);
}

/* ----------------------------------------
   Form Reflow at Narrow
   ---------------------------------------- */
@media (max-width: 540px) {
    /* Listing form: CX relative fields stack */
    #price-cx-fields {
        flex-direction: column;
    }

    #price-cx-fields .form-group {
        width: 100%;
    }

    /* Bundle form: item rows reflow */
    .bundle-item-row .form-row {
        flex-wrap: wrap;
    }

    .bundle-item-row .form-group:first-child {
        flex: 1 1 100%;
        margin-bottom: var(--space-xs);
    }

    .bundle-item-row .form-group:nth-child(2) {
        flex: 1 1 auto;
    }

    .bundle-item-row .form-group:last-child {
        flex: 0 0 auto;
    }

    /* Bundle items: Material full width, Qty + Remove on same row */
    .bundle-item-row .form-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px;
    }

    .bundle-item-row .form-group:first-child {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .bundle-item-row .form-group:nth-child(2) {
        flex: 1;
    }

    .bundle-item-row .form-group:last-child {
        flex: 0;
        display: flex;
        align-items: flex-end;
    }

    .bundle-item-row .btn-danger {
        white-space: nowrap;
    }

    /* Space between item rows */
    .bundle-item-row {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-subtle);
    }

    /* Add Item button full width, below items */
    #add-item-btn {
        width: 100%;
        margin-top: 8px;
    }

    /* Price fields in bundle form */
    #bundle-price-fields {
        flex-direction: column;
    }

    #bundle-price-fields .form-group {
        width: 100%;
    }

    /* Form row generic reflow */
    .form-row {
        flex-direction: column;
    }

    .form-row .form-group {
        width: 100%;
    }
}

/* ----------------------------------------
   Column Visibility at Narrow
   ---------------------------------------- */
@media (max-width: 540px) {
    /* Hide non-essential columns at narrow width */
    .col-notes,
    .col-items {
        display: none;
        width: 0;
        padding: 0 !important;
        border: 0;
    }

    /* APEX-style ultra-compact table */
    .listings-table {
        font-size: 10px;
    }

    /* Bundles table should fill width */
    .profile-bundles .listings-table,
    .my-bundles .listings-table {
        width: 100%;
    }

    .listings-table th,
    .listings-table td {
        padding: 2px 4px;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Move border from cells to rows for consistent alignment */
    .listings-table td {
        border-bottom: none;
    }

    .listings-table tbody tr {
        border-bottom: 1px solid var(--border-subtle);
    }

    .listings-table th {
        font-size: 9px;
    }

    /* Override min-width on qty-cell for narrow */
    .qty-cell {
        min-width: 0;
    }

    /* Bundle name column - truncate to prevent horizontal overflow */
    .col-name {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide "(X ready)" on narrow viewport - badge is enough */
    .qty-ready {
        display: none;
    }

    /* Full-width container, minimal padding */
    .container {
        padding: 4px;
        max-width: 100%;
        margin: 0;
    }

    /* Remove body margins */
    body {
        margin: 0;
    }

    /* Ultra-tight sections */
    .my-listings,
    .my-bundles,
    .profile-listings,
    .profile-bundles,
    .filter-form,
    .suggestions,
    .discord-export {
        padding: 6px;
        margin: 0 0 6px 0;
        border-width: 1px;
    }

    /* Browse page - match dashboard styling */
    .browse-page {
        margin: 0;
        padding: 0;
    }

    .browse-page h1 {
        margin-bottom: 6px;
    }

    .browse-page .browse-tabs {
        margin-bottom: 6px;
    }

    .browse-page .filter-form {
        margin-bottom: 6px;
    }

    .browse-page .sort-builder {
        margin-bottom: 6px;
    }

    .browse-page .listings-table {
        width: 100%;
    }

    /* Minimal section headers */
    .my-listings h2,
    .my-bundles h2,
    .profile-listings h2,
    .profile-bundles h2,
    .suggestions h2,
    .discord-export h2 {
        margin-bottom: 4px;
        padding-bottom: 4px;
        font-size: 10px;
    }

    /* Compact headings */
    h1 {
        font-size: var(--text-base);
        margin-bottom: 6px;
    }

    h2 {
        font-size: 11px;
    }

    /* Minimal dashboard/profile headers */
    .dashboard-header,
    .profile-header {
        margin-bottom: 6px;
        padding-bottom: 6px;
        gap: 4px;
    }

    .company-info,
    .company-name,
    .member-since {
        font-size: 9px;
        margin-bottom: 0;
    }

    /* Compact buttons */
    .dashboard-actions,
    .profile-actions {
        gap: 4px;
    }

    .btn {
        padding: 4px 8px;
        font-size: 10px;
    }

    .btn-sm {
        padding: 2px 6px;
        font-size: 9px;
    }

    /* Compact badges */
    .badge {
        padding: 1px 4px;
        font-size: 9px;
    }

    /* Compact filter form */
    .filter-form {
        padding: 6px;
    }

    .filter-row {
        gap: 4px;
    }

    .filter-group {
        gap: 2px;
    }

    .filter-group label {
        font-size: 9px;
    }

    .filter-group input,
    .filter-group select {
        padding: 4px;
        font-size: 11px;
    }

    /* Filter actions full width */
    .filter-actions {
        flex-direction: column;
        width: 100%;
    }

    .filter-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Minimal form spacing */
    .form-group {
        margin-bottom: 8px;
    }

    .form-group label {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 4px 6px;
        font-size: 11px;
    }

    /* Compact FIO status */
    .fio-status-bar {
        margin-bottom: 4px;
        font-size: 9px;
        padding: 2px 0;
    }

    /* Tighter browse tabs */
    .browse-tabs {
        margin-bottom: 6px;
    }

    .browse-tab {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* Compact sort builder */
    .sort-builder {
        padding: 4px 6px;
        margin-bottom: 4px;
    }

    .sort-label {
        font-size: 9px;
    }

    .sort-chip {
        padding: 2px 6px;
        font-size: 10px;
    }

    /* Compact navbar */
    .navbar {
        padding: 4px 8px;
    }

    .nav-brand a {
        font-size: var(--text-sm);
    }

    /* Compact footer */
    .footer {
        padding: 4px 8px;
        font-size: 9px;
    }

    /* Compact chips */
    .chip {
        padding: 2px 6px;
        font-size: 10px;
    }

    /* Help text minimal */
    .help-text {
        font-size: 9px;
        margin-top: 1px;
        margin-bottom: 2px;
    }

    /* Table wrapper - no extra space, full width */
    .table-wrapper {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* Actions column - horizontal layout, pushed right */
    .actions {
        display: flex;
        flex-direction: row;
        gap: 4px;
        justify-content: flex-end;
    }

    td.col-actions {
        text-align: right;
    }

    /* Hide "Actions" header text at narrow - buttons are self-explanatory */
    th.col-actions {
        font-size: 0;
        padding-right: 4px;
    }

    .actions .btn {
        width: auto;
    }

    /* Price display compact */
    .price {
        font-size: 10px;
    }

    /* Ticker compact */
    .ticker {
        font-size: 10px;
    }
}

/* Wide-medium tier: 724px - 986px */
@media (max-width: 986px) and (min-width: 724px) {
    /* Container fills width */
    .container {
        max-width: 100%;
        margin: 0;
    }

    /* Allow horizontal scroll if table is too wide */
    .table-wrapper {
        overflow-x: auto;
    }

    /* Override min-width on qty-cell */
    .qty-cell {
        min-width: 0;
    }

    /* Hide inventory breakdown - show only main qty */
    .inventory-detail {
        display: none;
    }

    /* Hide notes column */
    .col-notes {
        display: none;
    }

    /* Hide stock badges, show dots instead */
    .badge-out-of-stock,
    .badge-low-stock {
        display: none;
    }

    .stock-dot {
        display: inline-block;
    }

    /* Keep location abbreviated */
    .col-location .hide-medium {
        display: none !important;
    }

    .col-location .show-medium {
        display: initial !important;
    }
}

/* Medium tier: 541px - 723px */
@media (max-width: 723px) and (min-width: 541px) {
    /* Medium tier - mostly desktop styling, just hide non-essential columns
       and use condensed display macros */

    /* Slightly smaller table text at medium */
    .listings-table {
        font-size: 12px;
    }

    .listings-table th {
        font-size: 11px;
    }

    .listings-table td {
        line-height: 1;
    }

    /* Override min-width on qty-cell */
    .qty-cell {
        min-width: 0;
    }

    /* Hide inventory breakdown - show only main qty */
    .inventory-detail {
        display: none;
    }

    /* Hide non-essential columns */
    .col-notes,
    .col-items {
        display: none;
    }

    /* Bundle name column - truncate to prevent tall rows */
    .col-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Bundle price column - don't wrap */
    .my-bundles .col-price,
    .profile-bundles .col-price {
        white-space: nowrap;
    }

    /* Hide UPDATED column at medium to save space */
    .col-updated {
        display: none;
        width: 0;
        padding: 0 !important;
        border: 0;
    }

    /* Ensure tables fit within container */
    .listings-table {
        width: 100%;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    /* Slightly reduce container padding, ensure it fits viewport */
    .container {
        padding: var(--space-md);
        max-width: 100%;
        margin: 0;
    }

    /* Section padding */
    .my-listings,
    .my-bundles,
    .profile-listings,
    .profile-bundles,
    .filter-form,
    .suggestions,
    .discord-export {
        padding: var(--space-sm);
    }

    /* Profile bundles - align VIEW button with section edge */
    .profile-bundles .listings-table {
        width: 100%;
    }

    .profile-bundles .col-actions {
        text-align: right;
    }

    .profile-bundles .col-actions .btn {
        margin-right: -8px;
    }

    /* Responsive helpers at medium */
    .hide-medium {
        display: none !important;
    }

    .show-medium {
        display: initial !important;
    }

    /* Bundle form item rows - align Remove button with inputs */
    .bundle-item-row .form-row {
        align-items: flex-end;
    }

    .bundle-item-row .form-group:last-child {
        display: flex;
        align-items: flex-end;
        padding-bottom: 1px;
    }

    .bundle-item-row .btn-danger {
        height: 34px;
        display: flex;
        align-items: center;
    }
}

/* Desktop tier: >986px - explicit container constraint */
@media (min-width: 987px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ========================================
   Loading Spinner (APEX-style segmented arc)
   ======================================== */
.spinner {
    --spinner-size: 32px;
    --spinner-color: var(--accent-yellow);
    --spinner-color-2: var(--accent-cyan);

    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
    display: inline-block;
}

.spinner::before,
.spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
}

/* Yellow segments - top half arc */
.spinner::before {
    background: conic-gradient(
        var(--spinner-color) 0deg,
        var(--spinner-color) 20deg,
        transparent 20deg,
        transparent 30deg,
        var(--spinner-color) 30deg,
        var(--spinner-color) 50deg,
        transparent 50deg,
        transparent 60deg,
        var(--spinner-color) 60deg,
        var(--spinner-color) 80deg,
        transparent 80deg,
        transparent 90deg,
        var(--spinner-color) 90deg,
        var(--spinner-color) 110deg,
        transparent 110deg,
        transparent 120deg,
        var(--spinner-color) 120deg,
        var(--spinner-color) 140deg,
        transparent 140deg,
        transparent 150deg,
        var(--spinner-color) 150deg,
        var(--spinner-color) 170deg,
        transparent 170deg,
        transparent 360deg
    );
    animation: spinner-rotate 1s linear infinite;
}

/* Cyan segments - bottom half arc, counter-rotate */
.spinner::after {
    background: conic-gradient(
        transparent 0deg,
        transparent 180deg,
        var(--spinner-color-2) 180deg,
        var(--spinner-color-2) 200deg,
        transparent 200deg,
        transparent 210deg,
        var(--spinner-color-2) 210deg,
        var(--spinner-color-2) 230deg,
        transparent 230deg,
        transparent 240deg,
        var(--spinner-color-2) 240deg,
        var(--spinner-color-2) 260deg,
        transparent 260deg,
        transparent 270deg,
        var(--spinner-color-2) 270deg,
        var(--spinner-color-2) 290deg,
        transparent 290deg,
        transparent 300deg,
        var(--spinner-color-2) 300deg,
        var(--spinner-color-2) 320deg,
        transparent 320deg,
        transparent 330deg,
        var(--spinner-color-2) 330deg,
        var(--spinner-color-2) 350deg,
        transparent 350deg,
        transparent 360deg
    );
    opacity: 0.5;
    animation: spinner-rotate 1s linear infinite reverse;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Spinner sizes */
.spinner-sm {
    --spinner-size: 16px;
}

.spinner-sm::before,
.spinner-sm::after {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
}

.spinner-lg {
    --spinner-size: 48px;
}

.spinner-lg::before,
.spinner-lg::after {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
}

/* ----------------------------------------
   Option A: Radar Sweep
   ---------------------------------------- */
.spinner-radar {
    --spinner-size: 32px;
    --spinner-color: var(--accent-yellow);
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
    display: inline-block;
}

.spinner-radar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        transparent 0deg,
        var(--spinner-color) 0deg,
        var(--spinner-color) 60deg,
        transparent 90deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    animation: spinner-rotate 0.8s linear infinite;
}

.spinner-radar::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1px solid var(--accent-cyan);
    opacity: 0.3;
}

.spinner-radar.spinner-sm { --spinner-size: 16px; }
.spinner-radar.spinner-sm::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
}
.spinner-radar.spinner-lg { --spinner-size: 48px; }
.spinner-radar.spinner-lg::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
}

/* ----------------------------------------
   Option B: Hex Pulse
   ---------------------------------------- */
.spinner-hex {
    --spinner-size: 32px;
    --spinner-color: var(--accent-yellow);
    --spinner-color-2: var(--accent-cyan);
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
    display: inline-block;
}

.spinner-hex::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--spinner-color);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: hex-pulse 1.2s ease-in-out infinite, spinner-rotate 3s linear infinite;
}

.spinner-hex::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--bg-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@keyframes hex-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

.spinner-hex.spinner-sm { --spinner-size: 16px; }
.spinner-hex.spinner-sm::after { inset: 2px; }
.spinner-hex.spinner-lg { --spinner-size: 48px; }
.spinner-hex.spinner-lg::after { inset: 6px; }

/* ----------------------------------------
   Option C: Data Stream (Triple Ring)
   ---------------------------------------- */
.spinner-data {
    --spinner-size: 32px;
    --spinner-color: var(--accent-yellow);
    --spinner-color-2: var(--accent-cyan);
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--spinner-color);
    animation: spinner-rotate 1.8s linear infinite;
}

.spinner-data::before,
.spinner-data::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.spinner-data::before {
    inset: 3px;
    border: 1px solid transparent;
    border-top-color: var(--spinner-color);
    border-right-color: var(--spinner-color);
    animation: spinner-rotate 1s linear infinite;
}

.spinner-data::after {
    inset: 7px;
    border: 1px solid transparent;
    border-bottom-color: var(--spinner-color-2);
    animation: spinner-rotate 0.7s linear infinite reverse;
}

.spinner-data.spinner-sm { --spinner-size: 16px; }
.spinner-data.spinner-sm::before { inset: 2px; }
.spinner-data.spinner-sm::after { inset: 4px; }
.spinner-data.spinner-lg { --spinner-size: 48px; }
.spinner-data.spinner-lg::before { inset: 5px; }
.spinner-data.spinner-lg::after { inset: 11px; }

/* ----------------------------------------
   Option D: Orbit
   ---------------------------------------- */
.spinner-orbit {
    --spinner-size: 32px;
    --spinner-color: var(--accent-yellow);
    --spinner-color-2: var(--accent-cyan);
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
}

.spinner-orbit::before,
.spinner-orbit::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.spinner-orbit::before {
    width: 6px;
    height: 6px;
    background: var(--spinner-color);
    top: -3px;
    left: calc(50% - 3px);
    animation: spinner-rotate 0.8s linear infinite;
    transform-origin: 3px calc(var(--spinner-size) / 2 + 3px);
    box-shadow: 0 0 6px var(--spinner-color);
}

.spinner-orbit::after {
    width: 4px;
    height: 4px;
    background: var(--spinner-color-2);
    top: calc(50% - 2px);
    left: -2px;
    animation: spinner-rotate 1.2s linear infinite reverse;
    transform-origin: calc(var(--spinner-size) / 2 + 2px) 2px;
    box-shadow: 0 0 4px var(--spinner-color-2);
}

.spinner-orbit.spinner-sm { --spinner-size: 16px; }
.spinner-orbit.spinner-sm::before { width: 4px; height: 4px; top: -2px; left: calc(50% - 2px); transform-origin: 2px calc(var(--spinner-size) / 2 + 2px); }
.spinner-orbit.spinner-sm::after { width: 3px; height: 3px; top: calc(50% - 1.5px); left: -1.5px; transform-origin: calc(var(--spinner-size) / 2 + 1.5px) 1.5px; }
.spinner-orbit.spinner-lg { --spinner-size: 48px; }
.spinner-orbit.spinner-lg::before { width: 8px; height: 8px; top: -4px; left: calc(50% - 4px); transform-origin: 4px calc(var(--spinner-size) / 2 + 4px); }
.spinner-orbit.spinner-lg::after { width: 6px; height: 6px; top: calc(50% - 3px); left: -3px; transform-origin: calc(var(--spinner-size) / 2 + 3px) 3px; }

/* ----------------------------------------
   FIO Loading State
   ---------------------------------------- */
.fio-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--text-secondary);
}

.fio-loading-text {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fio-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--accent-red);
    font-size: var(--text-sm);
}

.fio-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.fio-status-bar {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.fio-refresh-status {
    color: var(--text-secondary);
}

/* HTMX indicator - hidden by default, shown during request */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Button with inline spinner */
.btn .htmx-indicator {
    margin-right: var(--space-xs);
}

/* FIO data container with loading overlay */
.fio-data-container {
    position: relative;
}

.fio-data-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 21, 0.85);
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fio-data-container.loading .fio-data-overlay {
    display: flex;
}

/* Inline variant for smaller elements like form fields */
.fio-data-overlay-inline {
    flex-direction: row;
    gap: var(--space-sm);
    padding: var(--space-sm);
    font-size: var(--text-xs);
}

/* Button spinner */
.btn-spinner {
    display: none;
    margin-right: var(--space-xs);
}

.htmx-request .btn-spinner {
    display: inline-flex;
}

/* Loading overlay for sections/cards */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 21, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 10;
}

.loading-overlay .loading-text {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

/* Container needs relative positioning for overlay */
.loading-container {
    position: relative;
    min-height: 100px;
}

/* Inline loading indicator */
.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Button loading state */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -7px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    animation: spinner-rotate 0.6s linear infinite;
}

.btn-primary.loading::after {
    border-top-color: var(--text-inverse);
    border-right-color: var(--text-inverse);
}

/* HTMX loading states */
.htmx-request .spinner,
.htmx-request.spinner {
    display: inline-block;
}

.htmx-request .hide-on-load {
    display: none;
}

.show-on-load {
    display: none;
}

.htmx-request .show-on-load {
    display: inline-flex;
}

/* Pulse animation for skeleton loading */
@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.skeleton {
    background: var(--bg-tertiary);
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-xs);
}

.skeleton-text:last-child {
    width: 60%;
}

/* ========================================
   About Page
   ======================================== */
.about-page h1 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.about-page .credits-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

/* ========================================
   Data Management Section
   ======================================== */
.data-management {
    margin-top: var(--space-xl);
}

.data-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.data-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.data-card h3 {
    margin: 0 0 var(--space-xs) 0;
    color: var(--text-primary);
    font-size: var(--text-lg);
}

.data-card p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-md) 0;
}

.data-card .data-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.data-card .form-group {
    margin-bottom: var(--space-md);
}

.data-card .form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.data-card input[type="file"] {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.data-card input[type="file"]::file-selector-button {
    background: var(--bg-highlight);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    margin-right: var(--space-sm);
    cursor: pointer;
}

.data-card input[type="file"]::file-selector-button:hover {
    background: var(--border-medium);
}

.data-card select {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.import-result {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.import-result:empty {
    display: none;
}

.import-result.success {
    background: rgba(64, 192, 64, 0.15);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
}

.import-result.error {
    background: rgba(224, 64, 64, 0.15);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
}

/* ========================================
   Required Field Indicators
   ======================================== */
.required {
    color: var(--accent-red);
    font-weight: normal;
}

/* Error text for validation messages */
.error-text {
    color: var(--accent-red) !important;
    font-weight: 500;
}

/* ========================================
   Danger Zone (Delete actions)
   ======================================== */
.danger-zone {
    margin-top: var(--space-xl);
    padding: var(--space-md);
    border: 1px solid var(--accent-red);
    background: rgba(224, 64, 64, 0.05);
}

.danger-zone h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-red);
    margin-bottom: var(--space-sm);
}

/* ========================================
   Modal
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-2xl);
    cursor: pointer;
    line-height: 1;
    padding: var(--space-xs);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-content h2 {
    margin-bottom: var(--space-sm);
    padding-right: var(--space-lg);
}

.modal-content h3 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.bundle-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.bundle-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meta-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.bundle-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.bundle-items-table th,
.bundle-items-table td {
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.bundle-items-table th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

/* Zebra striping for bundle items table */
.bundle-items-table tbody tr:nth-child(even) {
    background: var(--bg-tertiary);
}

.bundle-items-table tbody tr:nth-child(odd) {
    background: transparent;
}

.bundle-items-table tbody tr:hover {
    background: var(--bg-highlight);
}

.bundle-notes {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.bundle-notes p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ========================================
   Material Tile Styles (Category Colors)
   ======================================== */

/* Base tile style */
.mat-tile {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    text-decoration: none;
    min-width: 32px;
    text-align: center;
}

.mat-tile:hover {
    text-decoration: none;
    filter: brightness(1.1);
}

/* Fallback/default */
.mat-tile-default {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
}

/* ----------------------------------------
   rPrun Overrides (7 categories)
   ---------------------------------------- */
.mat-tile-agricultural-products {
    background: linear-gradient(135deg, #003800, #0a4708);
    color: #8bb37b;
}

.mat-tile-consumables-basic {
    background: linear-gradient(135deg, #a62c2a, #ba363c);
    color: #ff989e;
}

.mat-tile-consumables-luxury {
    background: linear-gradient(135deg, #680000, #7b0012);
    color: #db9191;
}

.mat-tile-fuels {
    background: linear-gradient(135deg, #548d22, #6ba23c);
    color: #cbfaa3;
}

.mat-tile-liquids {
    background: linear-gradient(135deg, #67a8da, #6098c3);
    color: #f1ffff;
}

.mat-tile-plastics {
    background: linear-gradient(135deg, #791f62, #92387b);
    color: #f89ee1;
}

.mat-tile-ship-shields {
    background: linear-gradient(135deg, #bf740a, #d98c21);
    color: #dbdb79;
}

/* ----------------------------------------
   Formula-derived categories
   ---------------------------------------- */
.mat-tile-alloys {
    background: linear-gradient(135deg, #8a5414, #e08838);
    color: #e8b366;
}

.mat-tile-chemicals {
    background: linear-gradient(135deg, #a84a68, #e8809a);
    color: #f4a8be;
}

.mat-tile-construction-materials {
    background: linear-gradient(135deg, #3a6aa8, #7098d0);
    color: #a8c8f0;
}

.mat-tile-construction-parts {
    background: linear-gradient(135deg, #2e5a7c, #5494c8);
    color: #88b8dc;
}

.mat-tile-construction-prefabs {
    background: linear-gradient(135deg, #102478, #2848d0);
    color: #6080e8;
}

.mat-tile-drones {
    background: linear-gradient(135deg, #a03810, #f06028);
    color: #f89868;
}

.mat-tile-electronic-devices {
    background: linear-gradient(135deg, #5a1894, #9830f0);
    color: #c080f8;
}

.mat-tile-electronic-parts {
    background: linear-gradient(135deg, #6848a8, #a078e0);
    color: #c8a8f8;
}

.mat-tile-electronic-pieces {
    background: linear-gradient(135deg, #8070a8, #c0a8e8);
    color: #e0d0f8;
}

.mat-tile-electronic-systems {
    background: linear-gradient(135deg, #441c6c, #7840ac);
    color: #a070d0;
}

.mat-tile-elements {
    background: linear-gradient(135deg, #54402c, #907050);
    color: #b89878;
}

.mat-tile-energy-systems {
    background: linear-gradient(135deg, #1c5838, #38a070);
    color: #70d0a0;
}

.mat-tile-gases {
    background: linear-gradient(135deg, #008888, #20e8e8);
    color: #60f8f8;
}

.mat-tile-metals {
    background: linear-gradient(135deg, #444444, #787878);
    color: #a8a8a8;
}

.mat-tile-minerals {
    background: linear-gradient(135deg, #907858, #c8a880);
    color: #e8d0b0;
}

.mat-tile-ores {
    background: linear-gradient(135deg, #585c68, #9498a8);
    color: #b8c0d0;
}

.mat-tile-ship-engines {
    background: linear-gradient(135deg, #c02800, #ff5010);
    color: #ff9060;
}

.mat-tile-ship-kits {
    background: linear-gradient(135deg, #b86000, #ff9810);
    color: #ffc060;
}

.mat-tile-ship-parts {
    background: linear-gradient(135deg, #c07800, #ffa810);
    color: #ffd060;
}

.mat-tile-software-components {
    background: linear-gradient(135deg, #988828, #d0c060);
    color: #e8e098;
}

.mat-tile-software-systems {
    background: linear-gradient(135deg, #786808, #b09818);
    color: #d0c048;
}

.mat-tile-software-tools {
    background: linear-gradient(135deg, #a88010, #e8b028);
    color: #f8d870;
}

.mat-tile-textiles {
    background: linear-gradient(135deg, #647020, #a8b848);
    color: #c8d878;
}

.mat-tile-unit-prefabs {
    background: linear-gradient(135deg, #302830, #605058);
    color: #908088;
}

/* ========================================
   Theme Variants for Material Tiles
   Applied via data-theme attribute on <html>
   ======================================== */

/* ----------------------------------------
   Monochrome Theme
   All tiles are neutral grey
   ---------------------------------------- */
[data-theme="monochrome"] .mat-tile,
[data-theme="monochrome"] .mat-tile-default,
[data-theme="monochrome"] .mat-tile-agricultural-products,
[data-theme="monochrome"] .mat-tile-consumables-basic,
[data-theme="monochrome"] .mat-tile-consumables-luxury,
[data-theme="monochrome"] .mat-tile-fuels,
[data-theme="monochrome"] .mat-tile-liquids,
[data-theme="monochrome"] .mat-tile-plastics,
[data-theme="monochrome"] .mat-tile-ship-shields,
[data-theme="monochrome"] .mat-tile-alloys,
[data-theme="monochrome"] .mat-tile-chemicals,
[data-theme="monochrome"] .mat-tile-construction-materials,
[data-theme="monochrome"] .mat-tile-construction-parts,
[data-theme="monochrome"] .mat-tile-construction-prefabs,
[data-theme="monochrome"] .mat-tile-drones,
[data-theme="monochrome"] .mat-tile-electronic-devices,
[data-theme="monochrome"] .mat-tile-electronic-parts,
[data-theme="monochrome"] .mat-tile-electronic-pieces,
[data-theme="monochrome"] .mat-tile-electronic-systems,
[data-theme="monochrome"] .mat-tile-elements,
[data-theme="monochrome"] .mat-tile-energy-systems,
[data-theme="monochrome"] .mat-tile-gases,
[data-theme="monochrome"] .mat-tile-metals,
[data-theme="monochrome"] .mat-tile-minerals,
[data-theme="monochrome"] .mat-tile-ores,
[data-theme="monochrome"] .mat-tile-ship-engines,
[data-theme="monochrome"] .mat-tile-ship-kits,
[data-theme="monochrome"] .mat-tile-ship-parts,
[data-theme="monochrome"] .mat-tile-software-components,
[data-theme="monochrome"] .mat-tile-software-systems,
[data-theme="monochrome"] .mat-tile-software-tools,
[data-theme="monochrome"] .mat-tile-textiles,
[data-theme="monochrome"] .mat-tile-unit-prefabs {
    background: #2a2a3c;
    color: #c8c8d0;
    border: 1px solid #3a3a4c;
}

/* Monochrome chips - FILLED style (matching mat-tile) */
[data-theme="monochrome"] .chip[class*="chip-"]:not(.lite) {
    background: #2a2a3c;
    color: #c8c8d0;
    border-color: #3a3a4c;
}
/* Monochrome chips - LITE style */
[data-theme="monochrome"] .chip[class*="chip-"].lite {
    color: #c8c8d0;
}

/* ----------------------------------------
   High Contrast Theme
   Solid saturated colors for visibility
   ---------------------------------------- */
[data-theme="high-contrast"] .mat-tile-agricultural-products {
    background: #2d5a2d;
    color: #90ee90;
}
[data-theme="high-contrast"] .mat-tile-consumables-basic {
    background: #8b0000;
    color: #ff6b6b;
}
[data-theme="high-contrast"] .mat-tile-consumables-luxury {
    background: #5a0000;
    color: #ff8888;
}
[data-theme="high-contrast"] .mat-tile-fuels {
    background: #228b22;
    color: #98fb98;
}
[data-theme="high-contrast"] .mat-tile-liquids {
    background: #1e90ff;
    color: #ffffff;
}
[data-theme="high-contrast"] .mat-tile-plastics {
    background: #9932cc;
    color: #dda0dd;
}
[data-theme="high-contrast"] .mat-tile-ship-shields {
    background: #b8860b;
    color: #ffff00;
}
[data-theme="high-contrast"] .mat-tile-alloys {
    background: #8b4513;
    color: #ffd700;
}
[data-theme="high-contrast"] .mat-tile-chemicals {
    background: #c71585;
    color: #ffb6c1;
}
[data-theme="high-contrast"] .mat-tile-construction-materials {
    background: #4169e1;
    color: #b0c4de;
}
[data-theme="high-contrast"] .mat-tile-construction-parts {
    background: #4682b4;
    color: #add8e6;
}
[data-theme="high-contrast"] .mat-tile-construction-prefabs {
    background: #0000cd;
    color: #87ceeb;
}
[data-theme="high-contrast"] .mat-tile-drones {
    background: #ff4500;
    color: #ffa07a;
}
[data-theme="high-contrast"] .mat-tile-electronic-devices {
    background: #8a2be2;
    color: #e6e6fa;
}
[data-theme="high-contrast"] .mat-tile-electronic-parts {
    background: #9370db;
    color: #e6e6fa;
}
[data-theme="high-contrast"] .mat-tile-electronic-pieces {
    background: #ba55d3;
    color: #ffffff;
}
[data-theme="high-contrast"] .mat-tile-electronic-systems {
    background: #6a0dad;
    color: #dda0dd;
}
[data-theme="high-contrast"] .mat-tile-elements {
    background: #8b4513;
    color: #f5deb3;
}
[data-theme="high-contrast"] .mat-tile-energy-systems {
    background: #006400;
    color: #98fb98;
}
[data-theme="high-contrast"] .mat-tile-gases {
    background: #00ced1;
    color: #ffffff;
}
[data-theme="high-contrast"] .mat-tile-metals {
    background: #696969;
    color: #dcdcdc;
}
[data-theme="high-contrast"] .mat-tile-minerals {
    background: #d2691e;
    color: #ffe4c4;
}
[data-theme="high-contrast"] .mat-tile-ores {
    background: #708090;
    color: #e0e0e0;
}
[data-theme="high-contrast"] .mat-tile-ship-engines {
    background: #dc143c;
    color: #ffc0cb;
}
[data-theme="high-contrast"] .mat-tile-ship-kits {
    background: #ff8c00;
    color: #fffacd;
}
[data-theme="high-contrast"] .mat-tile-ship-parts {
    background: #ffa500;
    color: #ffffff;
}
[data-theme="high-contrast"] .mat-tile-software-components {
    background: #9acd32;
    color: #ffffff;
}
[data-theme="high-contrast"] .mat-tile-software-systems {
    background: #6b8e23;
    color: #f0e68c;
}
[data-theme="high-contrast"] .mat-tile-software-tools {
    background: #bdb76b;
    color: #2f2f2f;
}
[data-theme="high-contrast"] .mat-tile-textiles {
    background: #7cfc00;
    color: #2f2f2f;
}
[data-theme="high-contrast"] .mat-tile-unit-prefabs {
    background: #4f4f4f;
    color: #c0c0c0;
}

/* High contrast chips - FILLED style (matching mat-tile) */
[data-theme="high-contrast"] .chip-agricultural-products:not(.lite) { background: #2d5a2d; color: #90ee90; border-color: #3d6a3d; }
[data-theme="high-contrast"] .chip-consumables-basic:not(.lite) { background: #8b0000; color: #ff6b6b; border-color: #9b1010; }
[data-theme="high-contrast"] .chip-consumables-luxury:not(.lite) { background: #5a0000; color: #ff8888; border-color: #6a1010; }
[data-theme="high-contrast"] .chip-fuels:not(.lite) { background: #228b22; color: #98fb98; border-color: #329b32; }
[data-theme="high-contrast"] .chip-liquids:not(.lite) { background: #1e90ff; color: #ffffff; border-color: #3ea0ff; }
[data-theme="high-contrast"] .chip-plastics:not(.lite) { background: #9932cc; color: #dda0dd; border-color: #a942dc; }
[data-theme="high-contrast"] .chip-ship-shields:not(.lite) { background: #b8860b; color: #ffff00; border-color: #c8961b; }
[data-theme="high-contrast"] .chip-alloys:not(.lite) { background: #8b4513; color: #ffd700; border-color: #9b5523; }
[data-theme="high-contrast"] .chip-chemicals:not(.lite) { background: #c71585; color: #ffb6c1; border-color: #d72595; }
[data-theme="high-contrast"] .chip-construction-materials:not(.lite) { background: #4169e1; color: #b0c4de; border-color: #5179f1; }
[data-theme="high-contrast"] .chip-construction-parts:not(.lite) { background: #4682b4; color: #add8e6; border-color: #5692c4; }
[data-theme="high-contrast"] .chip-construction-prefabs:not(.lite) { background: #0000cd; color: #87ceeb; border-color: #1010dd; }
[data-theme="high-contrast"] .chip-drones:not(.lite) { background: #ff4500; color: #ffa07a; border-color: #ff5510; }
[data-theme="high-contrast"] .chip-electronic-devices:not(.lite) { background: #8a2be2; color: #e6e6fa; border-color: #9a3bf2; }
[data-theme="high-contrast"] .chip-electronic-parts:not(.lite) { background: #9370db; color: #e6e6fa; border-color: #a380eb; }
[data-theme="high-contrast"] .chip-electronic-pieces:not(.lite) { background: #ba55d3; color: #ffffff; border-color: #ca65e3; }
[data-theme="high-contrast"] .chip-electronic-systems:not(.lite) { background: #6a0dad; color: #dda0dd; border-color: #7a1dbd; }
[data-theme="high-contrast"] .chip-elements:not(.lite) { background: #8b4513; color: #f5deb3; border-color: #9b5523; }
[data-theme="high-contrast"] .chip-energy-systems:not(.lite) { background: #006400; color: #98fb98; border-color: #107410; }
[data-theme="high-contrast"] .chip-gases:not(.lite) { background: #00ced1; color: #ffffff; border-color: #10dee1; }
[data-theme="high-contrast"] .chip-metals:not(.lite) { background: #696969; color: #dcdcdc; border-color: #797979; }
[data-theme="high-contrast"] .chip-minerals:not(.lite) { background: #d2691e; color: #ffe4c4; border-color: #e2792e; }
[data-theme="high-contrast"] .chip-ores:not(.lite) { background: #708090; color: #e0e0e0; border-color: #8090a0; }
[data-theme="high-contrast"] .chip-ship-engines:not(.lite) { background: #dc143c; color: #ffc0cb; border-color: #ec244c; }
[data-theme="high-contrast"] .chip-ship-kits:not(.lite) { background: #ff8c00; color: #fffacd; border-color: #ff9c10; }
[data-theme="high-contrast"] .chip-ship-parts:not(.lite) { background: #ffa500; color: #ffffff; border-color: #ffb510; }
[data-theme="high-contrast"] .chip-software-components:not(.lite) { background: #9acd32; color: #ffffff; border-color: #aadd42; }
[data-theme="high-contrast"] .chip-software-systems:not(.lite) { background: #6b8e23; color: #f0e68c; border-color: #7b9e33; }
[data-theme="high-contrast"] .chip-software-tools:not(.lite) { background: #bdb76b; color: #2f2f2f; border-color: #cdc77b; }
[data-theme="high-contrast"] .chip-textiles:not(.lite) { background: #7cfc00; color: #2f2f2f; border-color: #8cff10; }
[data-theme="high-contrast"] .chip-unit-prefabs:not(.lite) { background: #4f4f4f; color: #c0c0c0; border-color: #5f5f5f; }
/* High contrast chips - LITE style */
[data-theme="high-contrast"] .chip-agricultural-products.lite { color: #90ee90; }
[data-theme="high-contrast"] .chip-consumables-basic.lite { color: #ff6b6b; }
[data-theme="high-contrast"] .chip-consumables-luxury.lite { color: #ff8888; }
[data-theme="high-contrast"] .chip-fuels.lite { color: #98fb98; }
[data-theme="high-contrast"] .chip-liquids.lite { color: #ffffff; }
[data-theme="high-contrast"] .chip-plastics.lite { color: #dda0dd; }
[data-theme="high-contrast"] .chip-ship-shields.lite { color: #ffff00; }
[data-theme="high-contrast"] .chip-alloys.lite { color: #ffd700; }
[data-theme="high-contrast"] .chip-chemicals.lite { color: #ffb6c1; }
[data-theme="high-contrast"] .chip-construction-materials.lite { color: #b0c4de; }
[data-theme="high-contrast"] .chip-construction-parts.lite { color: #add8e6; }
[data-theme="high-contrast"] .chip-construction-prefabs.lite { color: #87ceeb; }
[data-theme="high-contrast"] .chip-drones.lite { color: #ffa07a; }
[data-theme="high-contrast"] .chip-electronic-devices.lite { color: #e6e6fa; }
[data-theme="high-contrast"] .chip-electronic-parts.lite { color: #e6e6fa; }
[data-theme="high-contrast"] .chip-electronic-pieces.lite { color: #ffffff; }
[data-theme="high-contrast"] .chip-electronic-systems.lite { color: #dda0dd; }
[data-theme="high-contrast"] .chip-elements.lite { color: #f5deb3; }
[data-theme="high-contrast"] .chip-energy-systems.lite { color: #98fb98; }
[data-theme="high-contrast"] .chip-gases.lite { color: #00ced1; }
[data-theme="high-contrast"] .chip-metals.lite { color: #dcdcdc; }
[data-theme="high-contrast"] .chip-minerals.lite { color: #ffe4c4; }
[data-theme="high-contrast"] .chip-ores.lite { color: #e0e0e0; }
[data-theme="high-contrast"] .chip-ship-engines.lite { color: #ffc0cb; }
[data-theme="high-contrast"] .chip-ship-kits.lite { color: #fffacd; }
[data-theme="high-contrast"] .chip-ship-parts.lite { color: #ffa500; }
[data-theme="high-contrast"] .chip-software-components.lite { color: #9acd32; }
[data-theme="high-contrast"] .chip-software-systems.lite { color: #f0e68c; }
[data-theme="high-contrast"] .chip-software-tools.lite { color: #bdb76b; }
[data-theme="high-contrast"] .chip-textiles.lite { color: #7cfc00; }
[data-theme="high-contrast"] .chip-unit-prefabs.lite { color: #c0c0c0; }

/* ----------------------------------------
   PrUn Default Theme
   Vanilla PrUn base colors
   ---------------------------------------- */
[data-theme="prun-default"] .mat-tile-agricultural-products {
    background: linear-gradient(135deg, #781010, #c83030);
    color: #e86060;
}
[data-theme="prun-default"] .mat-tile-consumables-basic {
    background: linear-gradient(135deg, #943838, #e06868);
    color: #f89898;
}
[data-theme="prun-default"] .mat-tile-fuels {
    background: linear-gradient(135deg, #1a8a1a, #40e040);
    color: #80f080;
}
[data-theme="prun-default"] .mat-tile-liquids {
    background: linear-gradient(135deg, #8aa8c0, #d0e8f8);
    color: #f0f8ff;
}
[data-theme="prun-default"] .mat-tile-plastics {
    background: linear-gradient(135deg, #901840, #e04078);
    color: #f080a8;
}

/* PrUn default chips - FILLED style (matching mat-tile) */
[data-theme="prun-default"] .chip-agricultural-products:not(.lite) { background: linear-gradient(135deg, #781010, #c83030); color: #e86060; border-color: #c83030; }
[data-theme="prun-default"] .chip-consumables-basic:not(.lite) { background: linear-gradient(135deg, #943838, #e06868); color: #f89898; border-color: #e06868; }
[data-theme="prun-default"] .chip-fuels:not(.lite) { background: linear-gradient(135deg, #1a8a1a, #40e040); color: #80f080; border-color: #40e040; }
[data-theme="prun-default"] .chip-liquids:not(.lite) { background: linear-gradient(135deg, #8aa8c0, #d0e8f8); color: #f0f8ff; border-color: #d0e8f8; }
[data-theme="prun-default"] .chip-plastics:not(.lite) { background: linear-gradient(135deg, #901840, #e04078); color: #f080a8; border-color: #e04078; }
/* PrUn default chips - LITE style (more vivid) */
[data-theme="prun-default"] .chip-agricultural-products.lite { color: #ff5050; }
[data-theme="prun-default"] .chip-consumables-basic.lite { color: #ff8080; }
[data-theme="prun-default"] .chip-fuels.lite { color: #60ff60; }
[data-theme="prun-default"] .chip-liquids.lite { color: #a0d8ff; }
[data-theme="prun-default"] .chip-plastics.lite { color: #ff60a0; }

/* ========================================
   Theme Selector UI Styles
   ======================================== */
.theme-selector {
    margin-top: var(--space-md);
}

.theme-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.theme-option:hover {
    background: var(--bg-highlight);
}

.theme-option.selected {
    border-color: var(--accent-yellow);
    background: rgba(240, 184, 48, 0.05);
}

.theme-option input[type="radio"] {
    display: none;
}

.theme-radio-dot {
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-option.selected .theme-radio-dot {
    border-color: var(--accent-yellow);
}

.theme-radio-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent-yellow);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.theme-option.selected .theme-radio-dot::after {
    opacity: 1;
}

.theme-content {
    flex: 1;
}

.theme-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: 2px;
}

.theme-desc {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.theme-preview {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.theme-preview-tile {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* Theme preview tiles - rPrun */
.theme-preview-rprun-agri { background: linear-gradient(135deg, #003800, #0a4708); color: #8bb37b; }
.theme-preview-rprun-cons { background: linear-gradient(135deg, #a62c2a, #ba363c); color: #ff989e; }
.theme-preview-rprun-fuel { background: linear-gradient(135deg, #548d22, #6ba23c); color: #cbfaa3; }
.theme-preview-rprun-liq { background: linear-gradient(135deg, #67a8da, #6098c3); color: #f1ffff; }
.theme-preview-rprun-plas { background: linear-gradient(135deg, #791f62, #92387b); color: #f89ee1; }

/* Theme preview tiles - Default PrUn */
.theme-preview-default-agri { background: linear-gradient(135deg, #781010, #c83030); color: #e86060; }
.theme-preview-default-cons { background: linear-gradient(135deg, #943838, #e06868); color: #f89898; }
.theme-preview-default-fuel { background: linear-gradient(135deg, #1a8a1a, #40e040); color: #80f080; }
.theme-preview-default-liq { background: linear-gradient(135deg, #8aa8c0, #d0e8f8); color: #f0f8ff; }
.theme-preview-default-plas { background: linear-gradient(135deg, #901840, #e04078); color: #f080a8; }

/* Theme preview tiles - High Contrast */
.theme-preview-contrast-agri { background: #2d5a2d; color: #90ee90; }
.theme-preview-contrast-cons { background: #8b0000; color: #ff6b6b; }
.theme-preview-contrast-fuel { background: #228b22; color: #98fb98; }
.theme-preview-contrast-liq { background: #1e90ff; color: #ffffff; }
.theme-preview-contrast-plas { background: #9932cc; color: #dda0dd; }

/* Theme preview tiles - Monochrome */
.theme-preview-mono { background: #2a2a3c; color: #c8c8d0; border: 1px solid #3a3a4c; }

/* ========================================
   Status Badges and Dots (Feature 1)
   ======================================== */

/* Status badge - full text for wide view */
.status-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.status-badge.instock {
    background: rgba(64, 192, 64, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(64, 192, 64, 0.3);
}

.status-badge.low {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.status-badge.out {
    background: rgba(217, 83, 79, 0.15);
    color: #d9534f;
    border: 1px solid rgba(217, 83, 79, 0.3);
}

.status-badge.mto {
    background: rgba(160, 80, 192, 0.15);
    color: var(--accent-purple);
    border: 1px solid rgba(160, 80, 192, 0.3);
}

.status-badge.unlimited {
    background: rgba(64, 200, 200, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(64, 200, 200, 0.3);
    font-size: var(--text-lg);
}

/* Status dot - compact for medium view */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.instock {
    background: var(--accent-green);
}

.status-dot.low {
    background: #e67e22;
}

.status-dot.out {
    background: #d9534f;
}

.status-dot.mto {
    background: var(--accent-purple);
}

.status-dot.unlimited {
    background: var(--accent-cyan);
}

/* Status column responsive visibility */
.col-status {
    white-space: nowrap;
}

.status-wide {
    display: inline;
}

.status-medium {
    display: none;
}

/* Qty neutral color (when status column visible) */
.qty-value.qty-neutral {
    color: var(--text-primary);
}

/* Qty special colors for narrow view */
.qty-value.qty-unlimited {
    color: var(--accent-cyan);
    font-weight: 600;
}

.qty-value.qty-mto {
    color: var(--accent-purple);
}

/* Medium viewport: show dot, hide badge */
@media (max-width: 720px) and (min-width: 450px) {
    .status-wide {
        display: none;
    }
    .status-medium {
        display: inline;
    }
}

/* 450-540px gap fix: general helpers toggle at 540px, but status column
   doesn't hide until 450px. Keep qty neutral in this range. */
@media (max-width: 540px) and (min-width: 451px) {
    .col-quantity .hide-narrow {
        display: initial !important;
    }
    .col-quantity .show-narrow {
        display: none !important;
    }
}

/* Narrow viewport: hide status column entirely, show colored qty */
@media (max-width: 450px) {
    .col-status {
        display: none;
    }

    /* Show colored qty values when status column is hidden */
    .qty-value.qty-neutral {
        display: none;
    }

    /* Override show-narrow to work at 450px for qty display */
    .col-quantity .show-narrow {
        display: initial !important;
    }

    .col-quantity .hide-narrow {
        display: none !important;
    }

    /* Hide copy buttons on browse table — too cramped at this width */
    .listings-table .copy-btn {
        display: none;
    }
}

/* ========================================
   Seller Contact Info (Browse + Profile)
   ======================================== */

.contact-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.contact-label {
    opacity: 0.6;
}

.contact-value {
    color: var(--text-primary);
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 2px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.copy-btn:hover {
    opacity: 1;
    color: var(--accent-cyan);
}

.copy-btn.copied {
    opacity: 1;
    color: var(--accent-green);
}

/* Profile page contact block */
.profile-contact {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.profile-contact .contact-item {
    font-size: var(--text-sm);
}

/* Inline copyable field wrapper (material, price, location cells) */
.field-copyable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ========================================
   Collapsible Filter Section (Feature 2)
   ======================================== */

.filter-section {
    margin-bottom: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
}

.filter-fields {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 var(--space-md);
}

.filter-fields.expanded {
    max-height: 200px;
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Toggle button state */
.filter-toggle-hide {
    display: none;
}

.filter-fields.expanded ~ .filter-bar .filter-toggle-show,
.filter-bar:has(~ .filter-fields.expanded) .filter-toggle-show {
    display: none;
}

.filter-fields.expanded ~ .filter-bar .filter-toggle-hide,
.filter-bar:has(~ .filter-fields.expanded) .filter-toggle-hide {
    display: inline;
}

/* Since :has() isn't fully supported, use JS to toggle a class */
.filter-section.filters-expanded .filter-toggle-show {
    display: none;
}

.filter-section.filters-expanded .filter-toggle-hide {
    display: inline;
}

/* Small button style (PrUn native style) */
.btn-small {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-small:hover {
    background: var(--bg-highlight);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Active filters container */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    flex: 1;
}

/* Filter pill */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--accent-cyan);
}

.filter-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: 2px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.filter-pill-remove:hover {
    color: var(--accent-red);
}

/* Narrow viewport adjustments */
@media (max-width: 540px) {
    .filter-bar {
        padding: 4px 6px;
    }

    .filter-fields.expanded {
        padding: 4px 6px 6px;
    }

    .btn-small {
        padding: 2px 6px;
        font-size: 9px;
    }

    .filter-pill {
        padding: 1px 4px;
        font-size: 10px;
    }
}

/* ========================================
   Material Tile Lite Style (Feature 3)
   ======================================== */

/* Lite style - underline only, no fill */
.mat-tile.lite {
    background: transparent !important;
    text-shadow: none;
    border: none;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
}

.mat-tile.lite:hover {
    filter: brightness(1.2);
}

/* Lite style for quick add chips */
.chip.lite {
    background: transparent !important;
    text-shadow: none;
    border: none;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
}

.chip.lite:hover {
    background: transparent !important;
    filter: brightness(1.2);
}

/* Theme preview tiles - Lite style */
.theme-preview-tile.lite {
    background: transparent !important;
    text-shadow: none;
    border: none;
    border-bottom: 2px solid currentColor;
}

/* ========================================
   Theme Selector Refactor (Feature 3)
   ======================================== */

.theme-section {
    margin-bottom: var(--space-lg);
}

.theme-section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

/* Horizontal palette options */
.palette-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.palette-option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.palette-option:hover {
    background: var(--bg-highlight);
}

.palette-option.selected {
    border-color: var(--accent-yellow);
    background: rgba(240, 184, 48, 0.05);
}

.palette-option input[type="radio"] {
    display: none;
}

.palette-name {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Style options (Filled vs Lite) */
.style-options {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.style-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
}

.style-option:hover {
    background: var(--bg-highlight);
}

.style-option.selected {
    border-color: var(--accent-yellow);
    background: rgba(240, 184, 48, 0.05);
}

.style-option input[type="radio"] {
    display: none;
}

.style-radio-dot {
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.style-option.selected .style-radio-dot {
    border-color: var(--accent-yellow);
}

.style-radio-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent-yellow);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.style-option.selected .style-radio-dot::after {
    opacity: 1;
}

.style-content {
    flex: 1;
}

.style-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.style-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Live preview section */
.theme-live-preview {
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}

.theme-live-preview-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.theme-live-preview-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* ========================================
   Auto-apply Lite Style via data attribute
   ======================================== */

/* When data-tile-style="lite" is set on html, apply lite style to all tiles */
[data-tile-style="lite"] .mat-tile {
    background: transparent !important;
    text-shadow: none;
    border: none;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
}

[data-tile-style="lite"] .mat-tile:hover {
    filter: brightness(1.2);
}

/* More vivid colors for lite mat-tiles (matching chip lite colors) */
[data-tile-style="lite"] .mat-tile-agricultural-products { color: #9ddf85; }
[data-tile-style="lite"] .mat-tile-consumables-basic { color: #ff7a82; }
[data-tile-style="lite"] .mat-tile-consumables-luxury { color: #ff9090; }
[data-tile-style="lite"] .mat-tile-fuels { color: #b8ff70; }
[data-tile-style="lite"] .mat-tile-liquids { color: #90e0ff; }
[data-tile-style="lite"] .mat-tile-plastics { color: #ff8eef; }
[data-tile-style="lite"] .mat-tile-ship-shields { color: #ffff60; }
[data-tile-style="lite"] .mat-tile-alloys { color: #ffb850; }
[data-tile-style="lite"] .mat-tile-chemicals { color: #ff90b8; }
[data-tile-style="lite"] .mat-tile-construction-materials { color: #90c8ff; }
[data-tile-style="lite"] .mat-tile-construction-parts { color: #70c0ff; }
[data-tile-style="lite"] .mat-tile-construction-prefabs { color: #5090ff; }
[data-tile-style="lite"] .mat-tile-drones { color: #ff8040; }
[data-tile-style="lite"] .mat-tile-electronic-devices { color: #d070ff; }
[data-tile-style="lite"] .mat-tile-electronic-parts { color: #c890ff; }
[data-tile-style="lite"] .mat-tile-electronic-pieces { color: #d8b8ff; }
[data-tile-style="lite"] .mat-tile-electronic-systems { color: #b860f0; }
[data-tile-style="lite"] .mat-tile-elements { color: #d8a870; }
[data-tile-style="lite"] .mat-tile-energy-systems { color: #50f0a0; }
[data-tile-style="lite"] .mat-tile-gases { color: #40ffff; }
[data-tile-style="lite"] .mat-tile-metals { color: #c8c8c8; }
[data-tile-style="lite"] .mat-tile-minerals { color: #ffd090; }
[data-tile-style="lite"] .mat-tile-ores { color: #c0d0e8; }
[data-tile-style="lite"] .mat-tile-ship-engines { color: #ff6830; }
[data-tile-style="lite"] .mat-tile-ship-kits { color: #ffb030; }
[data-tile-style="lite"] .mat-tile-ship-parts { color: #ffc030; }
[data-tile-style="lite"] .mat-tile-software-components { color: #f0e860; }
[data-tile-style="lite"] .mat-tile-software-systems { color: #e0d030; }
[data-tile-style="lite"] .mat-tile-software-tools { color: #ffe050; }
[data-tile-style="lite"] .mat-tile-textiles { color: #c8f050; }
[data-tile-style="lite"] .mat-tile-unit-prefabs { color: #b090a8; }
[data-tile-style="lite"] .mat-tile-default { color: #50e8e8; }

/* PrUn Default lite mat-tile colors (more vivid) */
[data-tile-style="lite"][data-theme="prun-default"] .mat-tile-agricultural-products { color: #ff5050; }
[data-tile-style="lite"][data-theme="prun-default"] .mat-tile-consumables-basic { color: #ff8080; }
[data-tile-style="lite"][data-theme="prun-default"] .mat-tile-fuels { color: #60ff60; }
[data-tile-style="lite"][data-theme="prun-default"] .mat-tile-liquids { color: #a0d8ff; }
[data-tile-style="lite"][data-theme="prun-default"] .mat-tile-plastics { color: #ff60a0; }

/* High Contrast lite mat-tile colors (extra vivid, matching high-contrast theme) */
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-agricultural-products { color: #90ee90; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-consumables-basic { color: #ff6b6b; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-consumables-luxury { color: #ff8888; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-fuels { color: #98fb98; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-liquids { color: #87ceff; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-plastics { color: #ff80ff; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-ship-shields { color: #ffff00; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-alloys { color: #ffd700; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-chemicals { color: #ffb6c1; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-construction-materials { color: #b0c4ff; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-construction-parts { color: #add8e6; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-construction-prefabs { color: #87ceeb; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-drones { color: #ffa07a; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-electronic-devices { color: #e6e6fa; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-electronic-parts { color: #dcd0ff; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-electronic-pieces { color: #ffffff; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-electronic-systems { color: #dda0dd; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-elements { color: #f5deb3; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-energy-systems { color: #98fb98; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-gases { color: #00ffff; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-metals { color: #dcdcdc; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-minerals { color: #ffe4c4; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-ores { color: #e0e0e0; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-ship-engines { color: #ffc0cb; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-ship-kits { color: #fffacd; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-ship-parts { color: #ffa500; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-software-components { color: #adff2f; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-software-systems { color: #f0e68c; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-software-tools { color: #bdb76b; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-textiles { color: #7cfc00; }
[data-tile-style="lite"][data-theme="high-contrast"] .mat-tile-unit-prefabs { color: #c0c0c0; }

/* Monochrome lite mat-tile colors (stay grey) */
[data-tile-style="lite"][data-theme="monochrome"] .mat-tile,
[data-tile-style="lite"][data-theme="monochrome"] .mat-tile[class*="mat-tile-"] { color: #c8c8d0; }

/* Lite style for chips via data attribute */
[data-tile-style="lite"] .chip[class*="chip-"]:not(.chip-more) {
    background: transparent !important;
    border: none;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
}

[data-tile-style="lite"] .chip[class*="chip-"]:not(.chip-more):hover {
    background: transparent !important;
    filter: brightness(1.2);
}