/* Custom styles for Albion Crafting Calculator */

/* Layout */
.browse-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .browse-layout {
        grid-template-columns: 1fr;
    }
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* Category tree */
.category-tree {
    font-size: 0.875rem;
}

.category-tree ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.category-tree ul ul {
    padding-left: 1rem;
}

.category-tree li {
    margin: 0.25rem 0;
}

.category-tree a {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}

.category-tree a:hover {
    background: var(--pico-secondary-background);
}

.category-tree a.active {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.category-tree .count {
    opacity: 0.6;
    font-size: 0.75rem;
}

/* Filters bar */
.filters-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 1rem;
}

.filters-bar .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filters-bar label {
    font-size: 0.75rem;
    margin: 0;
}

.filters-bar select,
.filters-bar input {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.875rem;
}

.filters-bar input[type="search"] {
    min-width: 200px;
}

/* Results table */
.results-table {
    font-size: 0.875rem;
}

.results-table th,
.results-table td {
    padding: 0.5rem;
}

.results-table tr {
    cursor: pointer;
}

.results-table tr:hover {
    background: var(--pico-secondary-background);
}

.results-table .tier-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.tier-badge.t1 { background: #888; }
.tier-badge.t2 { background: #4a7; }
.tier-badge.t3 { background: #47a; }
.tier-badge.t4 { background: #a47; }
.tier-badge.t5 { background: #a74; }
.tier-badge.t6 { background: #7a4; }
.tier-badge.t7 { background: #74a; }
.tier-badge.t8 { background: #a44; }

.enchant-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--pico-secondary-background);
}

/* Item detail */
.item-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.item-header h1 {
    margin: 0;
}

/* Recipe display */
.recipe-card {
    background: var(--pico-card-background-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.recipe-card h3 {
    margin-top: 0;
}

.materials-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.materials-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.materials-list li:last-child {
    border-bottom: none;
}

/* Calculation form */
.calc-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.calc-form label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.calc-form input {
    margin: 0;
}

/* Calculation results */
.calc-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.calc-result-card {
    background: var(--pico-card-background-color);
    border-radius: 8px;
    padding: 1rem;
}

.calc-result-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    opacity: 0.7;
}

.calc-result-card .value {
    font-size: 1.5rem;
    font-weight: bold;
}

.calc-result-card .sub {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Price table */
.price-table input[type="number"] {
    width: 120px;
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Status indicators */
.status-ok { color: #4a7; }
.status-warn { color: #a74; }
.status-error { color: #a44; }

/* Missing prices alert */
.missing-prices {
    background: #a4422a;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.missing-prices h4 {
    margin: 0 0 0.5rem 0;
}

.missing-prices ul {
    margin: 0;
    padding-left: 1.5rem;
}

/* Profit per kg table */
.profit-table {
    font-size: 0.875rem;
}

.profit-table th,
.profit-table td {
    padding: 0.5rem;
}

.profit-positive { color: #4a7; }
.profit-negative { color: #a44; }

/* Conservative profit display */
.quality-profit {
    opacity: 0.8;
    font-size: 0.85em;
}
.quality-profit.profit-positive { color: #4a7; }
.quality-profit.profit-negative { color: #a44; }

/* Loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Collapsible sections */
details summary {
    cursor: pointer;
    padding: 0.5rem 0;
}

details summary:hover {
    color: var(--pico-primary);
}

/* Number formatting */
.silver {
    font-family: monospace;
}

.silver::after {
    content: " silver";
    opacity: 0.6;
    font-size: 0.75em;
}

.kg {
    font-family: monospace;
}

.kg::after {
    content: " kg";
    opacity: 0.6;
    font-size: 0.75em;
}

/* Craft Calculator Page */
.settings-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .settings-row {
        grid-template-columns: 1fr;
    }
}

.filters-box {
    min-width: 180px;
}

.filters-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filters-grid label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.filters-grid select {
    margin: 0;
    width: 100%;
}

.defaults-box {
    flex: 1;
}

.defaults-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.defaults-grid label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.defaults-grid input {
    margin: 0;
    padding: 0.5rem;
}

/* Cascading selects */
.cascade-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.cascade-selects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    flex: 1;
}

.add-all-container {
    display: flex;
    flex-direction: column;
}

.add-all-btn {
    margin: 0;
    white-space: nowrap;
    padding: 0.5rem 1rem;
}

@media (max-width: 768px) {
    .cascade-row {
        flex-direction: column;
        align-items: stretch;
    }
    .add-all-container {
        margin-top: 0.5rem;
    }
    .add-all-container label {
        display: none;
    }
}

.cascade-selects label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.cascade-selects select {
    margin: 0;
    width: 100%;
}

.cascade-selects select:disabled {
    opacity: 0.5;
}

/* Item params form */
.item-params {
    margin-top: 1rem;
    padding-top: 1rem;
}

.item-params h4 {
    margin: 0 0 1rem 0;
}

.params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    align-items: end;
}

.params-grid label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.params-grid input {
    margin: 0;
    padding: 0.5rem;
}

.add-btn-container {
    display: flex;
    flex-direction: column;
}

.add-btn {
    margin: 0;
    white-space: nowrap;
}

/* Craft results table */
.results-wrapper {
    overflow-x: auto;
}

.craft-results-table {
    width: 100%;
    font-size: 0.7rem;
    border-collapse: collapse;
}

.craft-results-table th,
.craft-results-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.craft-results-table th {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.craft-results-table .num {
    text-align: right;
    font-family: monospace;
}

.craft-results-table .materials-cell {
    font-size: 0.65rem;
    max-width: 300px;
    white-space: normal;
    line-height: 1.4;
}

.craft-results-table .mat-item {
    display: inline-block;
    margin-right: 0.25rem;
}

.craft-results-table tbody tr {
    border-bottom: 1px solid var(--pico-muted-border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.craft-results-table tbody tr:hover {
    background: var(--pico-secondary-background);
}

.craft-row {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.craft-results-table tbody tr.missing-prices-row {
    background: rgba(255, 140, 0, 0.3) !important;
    border-left: 4px solid #ff8c00;
}

.craft-results-table tbody tr.missing-prices-row:hover {
    background: rgba(255, 140, 0, 0.4) !important;
}

.empty-message {
    text-align: center;
    opacity: 0.6;
    padding: 2rem;
}

button.small {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* Detail page */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-box {
    background: var(--pico-card-background-color);
    border-radius: 8px;
    padding: 1rem;
}

.info-box.highlight {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.info-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.info-value {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: monospace;
}

.detail-table {
    width: 100%;
    font-size: 0.875rem;
}

.detail-table th {
    text-align: left;
    font-weight: normal;
    opacity: 0.8;
    width: 40%;
}

.detail-table td {
    text-align: right;
    font-family: monospace;
}

.detail-table td.num {
    text-align: right;
}

.ppkg-table {
    margin-top: 1rem;
}

.error-box {
    background: #a4422a;
    border-radius: 8px;
    padding: 1rem;
}

/* Item Search */
.item-search {
    position: relative;
    margin-bottom: 1rem;
}

.item-search input {
    width: 100%;
    margin: 0;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--pico-muted-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.search-result-item:hover {
    background: var(--pico-secondary-background);
}

.search-result-item strong {
    font-size: 0.9rem;
}

.search-result-item small {
    opacity: 0.6;
    font-size: 0.75rem;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    opacity: 0.6;
    font-size: 0.875rem;
}

/* Or divider */
.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.or-divider span {
    padding: 0 1rem;
    opacity: 0.6;
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* Origin Selector Styles - Compact */
.origin-box {
    margin-bottom: 1rem;
    padding: 0.5rem;
}

.origin-box header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    margin-bottom: 0;
}

.origin-box .toggle-btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1;
    min-width: 1.5rem;
    margin: 0;
}

.origin-content {
    padding-top: 0.5rem;
}

.origin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.origin-item {
    padding: 0.4rem;
    background: var(--pico-card-background-color);
    border-radius: 4px;
    border: 1px solid var(--pico-muted-border-color);
}

.origin-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.origin-label {
    font-weight: 600;
    font-size: 0.75rem;
    min-width: 55px;
}

.origin-select {
    margin: 0 !important;
    padding: 0.2rem 0.3rem !important;
    font-size: 0.7rem !important;
    height: auto !important;
    min-width: 60px;
}

.origin-select.freshness-select {
    min-width: 45px;
}

.origin-select.city-select {
    min-width: 50px;
}

.origin-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.city-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
}

.city-grid.mini {
    font-size: 0.65rem;
}

/* Custom checkbox styling to fix uncheck issue */
.city-cb {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    margin: 0;
    padding: 0.1rem;
    font-size: 0.65rem;
    user-select: none;
}

.city-cb input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.city-cb span {
    white-space: nowrap;
    line-height: 1;
}

.mini-label {
    font-size: 0.65rem;
    opacity: 0.7;
}

.avg-label {
    margin-left: 0.3rem;
}

.origin-pct {
    margin: 0 !important;
    padding: 0.2rem !important;
    font-size: 0.7rem !important;
    width: 50px !important;
    height: auto !important;
}

.origin-days {
    margin: 0 !important;
    padding: 0.2rem !important;
    font-size: 0.7rem !important;
    width: 50px !important;
    height: auto !important;
}

/* Tier filter checkboxes */
.tier-filter-wrapper {
    /* Isolate from Pico CSS form styling */
}

.tier-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.tier-cb {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}

.tier-cb input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Material filter checkboxes */
.material-filter-wrapper {
    /* Isolate from Pico CSS form styling */
}

.material-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.mat-cb {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}

.mat-cb input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    cursor: pointer;
}

.filter-label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.per-material-toggle {
    margin-left: auto;
    border-left: 1px solid var(--pico-muted-border-color);
    padding-left: 0.4rem;
}

.per-material-config {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--pico-muted-border-color);
    max-height: 150px;
    overflow-y: auto;
}

.per-mat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.65rem;
}

.per-mat-name {
    min-width: 80px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.per-mat-placeholder {
    color: var(--pico-muted-color);
    font-size: 0.7rem;
    font-style: italic;
    padding: 0.3rem;
}

@media (max-width: 768px) {
    .origin-grid {
        grid-template-columns: 1fr;
    }
}

/* API price source badge */
.api-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: bold;
    color: #ff4444;
    margin-left: 0.15rem;
    vertical-align: super;
    line-height: 1;
}

/* Historical price source badge */
.hist-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: bold;
    color: #4488ff;
    margin-left: 0.15rem;
    vertical-align: super;
    line-height: 1;
}

/* Cache price source badge */
.cache-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: bold;
    color: #44bb44;
    margin-left: 0.15rem;
    vertical-align: super;
    line-height: 1;
}

/* Transport fees grid */
.fees-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fee-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fee-row label {
    min-width: 80px;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0;
}

.fee-row input[type="number"] {
    width: 70px;
    margin: 0;
    padding: 0.4rem;
    font-size: 0.8rem;
}

.fee-row select {
    margin: 0;
    padding: 0.3rem;
    font-size: 0.75rem;
    min-width: 120px;
}

.fee-row .fee-type {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Formula breakdown collapsible */
.formula-details {
    margin: 1.5rem 0;
    background: var(--pico-card-background-color);
    border-radius: 8px;
    border: 1px solid var(--pico-muted-border-color);
}

.formula-details summary {
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.formula-details summary:hover {
    background: var(--pico-secondary-background);
}

.formula-details[open] summary {
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.formula-details .formula-table {
    margin: 0;
    padding: 1rem;
}

/* Formula breakdown table */
.formula-table {
    font-size: 0.8rem;
}

.formula-table th {
    width: 30%;
    white-space: nowrap;
}

.formula-table td.formula {
    font-family: monospace;
    font-size: 0.7rem;
    opacity: 0.7;
    text-align: left;
    width: 45%;
}

.formula-table td.num {
    width: 25%;
    text-align: right;
    font-weight: 500;
}

.formula-table tr.formula-subtotal {
    border-top: 1px solid var(--pico-muted-border-color);
}

.formula-table tr.formula-subtotal th,
.formula-table tr.formula-subtotal td {
    font-weight: 600;
}

.formula-table tr.formula-result {
    border-top: 2px solid var(--pico-primary);
}

.formula-table tr.formula-result th,
.formula-table tr.formula-result td {
    font-weight: bold;
    font-size: 0.9rem;
}

/* Session Badge */
.session-badge {
    display: inline-block;
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-left: 0.3rem;
    min-width: 1.2rem;
    text-align: center;
}

.session-nav-link {
    display: flex;
    align-items: center;
}

/* Session Page */
.session-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card {
    background: var(--pico-card-background-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--pico-muted-border-color);
}

.summary-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: bold;
    font-family: monospace;
}

.session-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.session-actions button {
    margin: 0;
    padding: 0.5rem 1rem;
}

/* Session table */
.session-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.session-table th,
.session-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.session-table th {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.session-table .num {
    text-align: right;
    font-family: monospace;
}

.session-table tbody tr {
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.session-table tbody tr:hover {
    background: var(--pico-secondary-background);
}

.session-row {
    animation: fadeIn 0.3s ease-in;
}

/* Quality prices table */
.quality-prices-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.quality-prices-table th,
.quality-prices-table td {
    padding: 0.5rem;
    text-align: left;
}

.quality-prices-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.quality-prices-table .num {
    text-align: right;
    font-family: monospace;
}

.quality-prices-table tbody tr {
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.quality-prices-table tbody tr:hover {
    background: var(--pico-secondary-background);
}

/* Materials table */
.materials-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.materials-table th,
.materials-table td {
    padding: 0.5rem;
    text-align: left;
}

.materials-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.materials-table .num {
    text-align: right;
    font-family: monospace;
}

.materials-table tbody tr {
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.materials-table tfoot .total-row {
    border-top: 2px solid var(--pico-primary);
    font-weight: bold;
}

.materials-table tfoot th {
    font-size: 0.8rem;
}

/* Action cell in craft row */
.action-cell {
    display: flex;
    gap: 0.25rem;
}

.session-add-btn {
    background: var(--pico-primary-background) !important;
}

/* Total materials section */
.total-materials-section {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: var(--pico-card-background-color);
    border-radius: 6px;
    border: 2px solid var(--pico-primary);
}

.total-materials-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--pico-primary);
}

.total-materials-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pico-primary);
}

.total-materials-count {
    font-size: 0.8rem;
    font-weight: 600;
}

/* City material sections - compact */
.city-materials-section {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--pico-card-background-color);
    border-radius: 6px;
    border: 1px solid var(--pico-muted-border-color);
}

.city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.city-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pico-primary);
}

.city-total {
    font-size: 0.75rem;
    color: var(--pico-muted-color);
}

/* Per-city section heading */
.per-city-heading {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pico-muted-color);
    margin: 1.5rem 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--pico-muted-border-color);
}

/* Material groups - compact */
.material-group {
    margin-bottom: 0.5rem;
    background: var(--pico-card-background-color);
    border-radius: 4px;
    border: 1px solid var(--pico-muted-border-color);
    overflow: hidden;
}

.material-group-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: var(--pico-secondary-background);
    border-bottom: 1px solid var(--pico-muted-border-color);
    font-size: 0.75rem;
}

.material-group-icon {
    font-size: 0.85rem;
}

.material-group-name {
    font-weight: 600;
    font-size: 0.75rem;
}

.material-group-count {
    margin-left: auto;
    font-size: 0.65rem;
    opacity: 0.7;
}

.material-group .materials-table {
    margin: 0;
    border: none;
    font-size: 0.7rem;
}

.material-group .materials-table th,
.material-group .materials-table td {
    padding: 0.15rem 0.5rem;
}

.material-group .materials-table thead {
    display: none;
}

.material-group .materials-table tbody tr:last-child {
    border-bottom: none;
}

.material-group .subtotal-row {
    background: var(--pico-secondary-background);
    border-top: 1px solid var(--pico-muted-border-color);
}

.material-group .subtotal-row th {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
}

.materials-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
}

.materials-grand-total .num {
    font-family: monospace;
    font-size: 1.1rem;
}

/* Material row tier backgrounds (Albion Online colors) */
.material-group .materials-table tbody tr.mat-row {
    border-left: 4px solid transparent;
}

/* Apply background to td cells - Albion Online tier colors */
.material-group .materials-table tbody tr.mat-row.tier-1 td { background-color: rgba(72, 64, 71, 0.5); }    /* #484047 */
.material-group .materials-table tbody tr.mat-row.tier-2 td { background-color: rgba(99, 83, 73, 0.5); }    /* #635349 */
.material-group .materials-table tbody tr.mat-row.tier-3 td { background-color: rgba(63, 81, 49, 0.5); }    /* #3f5131 */
.material-group .materials-table tbody tr.mat-row.tier-4 td { background-color: rgba(53, 95, 120, 0.5); }   /* #355f78 */
.material-group .materials-table tbody tr.mat-row.tier-5 td { background-color: rgba(119, 34, 26, 0.5); }   /* #77221a */
.material-group .materials-table tbody tr.mat-row.tier-6 td { background-color: rgba(201, 113, 44, 0.5); }  /* #c9712c */
.material-group .materials-table tbody tr.mat-row.tier-7 td { background-color: rgba(209, 176, 68, 0.5); }  /* #d1b044 */
.material-group .materials-table tbody tr.mat-row.tier-8 td { background-color: rgba(208, 208, 208, 0.5); } /* #d0d0d0 */

/* Enchantment left border colors */
.material-group .materials-table tbody tr.mat-row.enchant-0 { border-left-color: transparent; }
.material-group .materials-table tbody tr.mat-row.enchant-1 { border-left-color: #5ac45a; }  /* Green */
.material-group .materials-table tbody tr.mat-row.enchant-2 { border-left-color: #4a9fe8; }  /* Blue */
.material-group .materials-table tbody tr.mat-row.enchant-3 { border-left-color: #c45ac4; }  /* Purple */
.material-group .materials-table tbody tr.mat-row.enchant-4 { border-left-color: #e8c84a; }  /* Gold */

/* Hover state for tier rows */
.material-group .materials-table tbody tr.mat-row:hover td {
    filter: brightness(1.2);
}

/* Copyable material rows */
.material-group .materials-table tbody tr.mat-row.copyable {
    cursor: pointer;
}

.material-group .materials-table tbody tr.mat-row.copied td {
    background-color: rgba(68, 187, 68, 0.4) !important;
    transition: background-color 0.15s ease;
}

/* Journals table */
.journals-table {
    margin: 0;
    font-size: 0.8rem;
    width: 100%;
}

.journals-table th,
.journals-table td {
    padding: 0.35rem 0.75rem;
}

.journals-table .journal-row {
    cursor: pointer;
}

.journals-table .journal-row:hover td {
    filter: brightness(1.2);
}

.journals-table .journal-row.copied td {
    background-color: rgba(68, 187, 68, 0.4) !important;
    transition: background-color 0.15s ease;
}

/* Station sections */
.station-section {
    margin-bottom: 0.5rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
}

.station-section summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 500;
    background: var(--pico-card-background-color);
    border-radius: 4px;
    list-style: none;
}

.station-section summary::-webkit-details-marker {
    display: none;
}

.station-section summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.station-section[open] summary::before {
    transform: rotate(90deg);
}

.station-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.station-icon {
    font-size: 1.1rem;
}

.station-name {
    flex: 1;
}

.station-count {
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: normal;
}

.station-content {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.station-tier {
    margin-bottom: 1rem;
}

.station-tier:last-child {
    margin-bottom: 0;
}

.tier-header {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: var(--pico-muted-border-color);
    border-radius: 3px;
}

.station-items-table,
.station-materials-table {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    width: 100%;
}

.station-items-table th,
.station-items-table td,
.station-materials-table th,
.station-materials-table td {
    padding: 0.2rem 0.5rem;
}

.station-items-table thead,
.station-materials-table thead {
    display: none;
}

.tier-materials-header {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
    margin: 0.5rem 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.station-tier-materials .mat-row {
    border-left: 3px solid transparent;
}

.station-tier-materials .mat-row.tier-4 td { background-color: rgba(53, 95, 120, 0.3); }
.station-tier-materials .mat-row.tier-5 td { background-color: rgba(119, 34, 26, 0.3); }
.station-tier-materials .mat-row.tier-6 td { background-color: rgba(201, 113, 44, 0.3); }
.station-tier-materials .mat-row.tier-7 td { background-color: rgba(209, 176, 68, 0.3); }
.station-tier-materials .mat-row.tier-8 td { background-color: rgba(208, 208, 208, 0.3); }

.station-tier-materials .mat-row.enchant-1 { border-left-color: #5ac45a; }
.station-tier-materials .mat-row.enchant-2 { border-left-color: #4a9fe8; }
.station-tier-materials .mat-row.enchant-3 { border-left-color: #c45ac4; }
.station-tier-materials .mat-row.enchant-4 { border-left-color: #e8c84a; }

.station-tier-materials .mat-row.copyable {
    cursor: pointer;
}

.station-tier-materials .mat-row.copyable:hover td {
    filter: brightness(1.2);
}

.station-tier-materials .mat-row.copied td {
    background-color: rgba(68, 187, 68, 0.4) !important;
    transition: background-color 0.15s ease;
}

/* Results Filters */
.results-filters-box {
    margin-bottom: 1rem;
}

.results-filters-grid {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.results-filters-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.results-filters-grid label {
    font-size: 0.75rem;
    margin: 0;
}

.results-filters-grid input[type="number"] {
    width: 100px;
    margin: 0;
    padding: 0.5rem;
}

.results-filters-grid .filter-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-end;
}

.results-filters-grid .filter-actions label {
    display: none;
}

.results-filters-grid button {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* Inline results filters (under Select Item) */
.results-filters-inline {
    margin-top: 1rem;
}

.results-filters-inline hr {
    margin: 0.75rem 0;
}

/* Quantity Adjustment Row */
.qty-adjust-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(100, 149, 237, 0.1);
    border-radius: 4px;
    flex-wrap: wrap;
}

.qty-adjust-row .qty-label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 0.25rem;
}

.qty-adjust-row .qty-unit {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-right: 0.5rem;
}

.qty-adjust-row .qty-adjust-input {
    width: 70px;
    margin: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.qty-adjust-row button {
    margin: 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

/* Sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sort-arrow {
    font-size: 0.7em;
    opacity: 0.8;
}

/* Budget Trimmer */
.trimmer-section {
    margin-bottom: 1rem;
}

.trimmer-section header {
    padding: 0.5rem 0;
}

.trimmer-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.trimmer-controls label {
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
}

.trimmer-controls input[type="number"] {
    width: 150px;
    margin: 0;
    padding: 0.5rem;
}

.trimmer-controls button {
    margin: 0;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.trimmer-controls .qty-unit {
    font-size: 0.8rem;
    opacity: 0.8;
}

.trimmer-hint {
    display: block;
    margin-top: 0.5rem;
    opacity: 0.7;
}

.trim-status {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.trim-status.success {
    color: #4a7;
}

.trim-status.error {
    color: #a44;
}

/* Price Page Sections */
.price-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: var(--pico-primary);
    border-bottom: 2px solid var(--pico-primary);
    padding-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 0.85rem;
    font-weight: normal;
    opacity: 0.7;
}

.section-desc {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.section-divider {
    margin: 2.5rem 0;
    border: none;
    border-top: 2px dashed var(--pico-muted-border-color);
}

/* Price Cache Section */
#cache-section {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border-radius: 8px;
    border: 1px solid var(--pico-muted-border-color);
}

.cache-status {
    margin-bottom: 1rem;
}

.cache-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 0.5rem;
    background: var(--pico-secondary-background);
    border-radius: 6px;
}

.stat-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--pico-primary);
}

.cache-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--pico-secondary-background);
    border-radius: 6px;
}

.cache-progress progress {
    flex: 1;
    margin: 0;
    height: 1rem;
}

#cache-progress-text {
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 3rem;
}

#cache-phase {
    font-size: 0.8rem;
    opacity: 0.8;
}

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

.cache-actions button {
    margin: 0;
    padding: 0.5rem 1rem;
}

/* Cache source badge */
.cache-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: bold;
    color: #44aa88;
    margin-left: 0.15rem;
    vertical-align: super;
    line-height: 1;
}

/* Focus Profile Page */
.focus-profile-manager {
    margin-bottom: 1rem;
}

.profile-controls {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.profile-selector {
    flex: 1;
    min-width: 200px;
}

.profile-selector label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.profile-selector select {
    margin: 0;
    width: 100%;
}

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

.profile-actions button {
    margin: 0;
    padding: 0.5rem 1rem;
}

/* Focus Categories */
.focus-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.category-tab {
    padding: 0.5rem 1rem;
    margin: 0;
    background: var(--pico-secondary-background);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.category-tab:hover {
    background: var(--pico-card-background-color);
}

.category-tab.active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

/* Focus Tree Editor */
.focus-tree-editor {
    min-height: 300px;
}

.focus-tree {
    margin-bottom: 0.5rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    background: var(--pico-card-background-color);
}

.focus-tree summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
}

.focus-tree summary:hover {
    background: var(--pico-secondary-background);
}

.focus-tree .tree-name {
    font-weight: 600;
}

.focus-tree .tree-levels {
    font-size: 0.8rem;
    opacity: 0.7;
    font-family: monospace;
}

.focus-tree .tree-content {
    padding: 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.focus-tree .level-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.focus-tree .level-row label {
    min-width: 80px;
    font-size: 0.85rem;
    margin: 0;
}

.focus-tree .level-input {
    width: 80px;
    margin: 0;
    padding: 0.4rem;
    font-size: 0.85rem;
}

.focus-tree .specs-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.focus-tree .specs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.focus-tree .specs-header span {
    font-weight: 500;
    font-size: 0.85rem;
}

.focus-tree .specs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}

.focus-tree .spec-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    background: var(--pico-secondary-background);
    border-radius: 4px;
}

.focus-tree .spec-row label {
    flex: 1;
    font-size: 0.75rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-tree .spec-input {
    width: 60px;
}

/* Focus cost column in tables */
.focus-cost-col {
    color: #8b5cf6;
    font-family: monospace;
}

.focus-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: bold;
    color: #8b5cf6;
    margin-left: 0.15rem;
    vertical-align: super;
    line-height: 1;
}

/* Focus selector on craft page */
.focus-selector-box {
    min-width: 180px;
}

.focus-selector-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.focus-selector-grid label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.focus-selector-grid select {
    margin: 0;
    width: 100%;
}

/* ============================================================
   Item Data Page
   ============================================================ */

/* City checkboxes for data page */
.city-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.3rem;
}

/* Time range buttons */
.time-range-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.time-btn {
    margin: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    background: var(--pico-secondary-background);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.time-btn:hover {
    background: var(--pico-card-background-color);
}

.time-btn.active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

.time-btn:disabled {
    cursor: not-allowed;
}

/* Time controls layout */
.time-controls {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Granularity buttons */
.granularity-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.gran-btn {
    margin: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    background: var(--pico-secondary-background);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.gran-btn:hover {
    background: var(--pico-card-background-color);
}

.gran-btn.active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

.granularity-note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
}

/* Chart container */
#chart-container {
    min-height: 400px;
}

/* Current prices table */
.current-prices-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.current-prices-table th,
.current-prices-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.current-prices-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.current-prices-table .num {
    text-align: right;
    font-family: monospace;
}

.current-prices-table tbody tr {
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.current-prices-table tbody tr:hover {
    background: var(--pico-secondary-background);
}

/* Tradability Score Header */
.tradability-header {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border-radius: 8px;
    border: 2px solid var(--pico-muted-border-color);
}

.tradability-score-box {
    text-align: center;
    min-width: 120px;
}

.tradability-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.tradability-score {
    font-size: 3rem;
    font-weight: bold;
    font-family: monospace;
    line-height: 1;
}

.tradability-rating {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Tradability color classes */
.trade-excellent {
    color: #4a7;
}

.trade-good {
    color: #7a4;
}

.trade-fair {
    color: #a74;
}

.trade-poor {
    color: #a44;
}

/* Score Breakdown */
.tradability-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--pico-secondary-background);
    border-radius: 4px;
    font-size: 0.85rem;
}

.breakdown-label {
    opacity: 0.8;
}

.breakdown-val {
    font-family: monospace;
    font-weight: 600;
    color: var(--pico-primary);
}

.breakdown-max {
    font-size: 0.75rem;
    opacity: 0.5;
}

@media (max-width: 600px) {
    .tradability-header {
        flex-direction: column;
        text-align: center;
    }

    .tradability-breakdown {
        justify-content: center;
    }
}

/* Data Source Indicator */
.data-source-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: var(--pico-secondary-background);
    border-radius: 4px;
    font-size: 0.85rem;
}

.data-source-label {
    opacity: 0.7;
}

.data-source-value {
    font-weight: 600;
}

.data-source-value.source-api {
    color: #4a7;
}

.data-source-value.source-db {
    color: #47a;
}

.data-coverage {
    margin-left: auto;
    font-size: 0.8rem;
}

.data-coverage.coverage-good {
    color: #4a7;
}

.data-coverage.coverage-ok {
    color: #7a7;
}

.data-coverage.coverage-fair {
    color: #a74;
}

.data-coverage.coverage-poor {
    color: #a44;
}

/* Liquidity indicators */
.stat-val.liquidity-high {
    color: #4a7;
}

.stat-val.liquidity-medium {
    color: #a74;
}

.stat-val.liquidity-low {
    color: #a44;
}

.liquidity-warning {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(170, 119, 68, 0.15);
    border: 1px solid #a74;
    border-radius: 4px;
    color: #a74;
    font-size: 0.85rem;
}

/* Scanner Section Styles */
.scanner-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scanner-filters .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.scanner-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scanner-filters .filter-label {
    font-size: 0.75rem;
    opacity: 0.7;
}

.scanner-filters input[type="number"],
.scanner-filters select {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    min-width: 80px;
}

.mini-city-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mini-city-grid .city-cb {
    font-size: 0.75rem;
}

.mini-city-grid .city-cb span {
    padding: 0.2rem 0.4rem;
}

.scan-results-table {
    font-size: 0.85rem;
}

.scan-results-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.scan-results-table tbody tr:hover {
    background: var(--pico-primary-focus);
}

.scan-results-table .buy-day {
    color: #4a7;
    font-weight: 500;
}

.scan-results-table .sell-day {
    color: #4a9fe8;
    font-weight: 500;
}

.scan-results-table .profit-positive {
    color: #4a7;
    font-weight: 600;
}

/* Cyclicality Analysis Styles */
.cyclicality-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cyclicality-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cycle-recommendation {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border-radius: 8px;
    border: 1px solid var(--pico-muted-border-color);
}

.cycle-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    min-width: 120px;
}

.cycle-action.buy-action {
    background: rgba(68, 170, 68, 0.15);
    border: 1px solid #4a7;
}

.cycle-action.sell-action {
    background: rgba(74, 159, 232, 0.15);
    border: 1px solid #4a9fe8;
}

.action-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.action-day {
    font-size: 1.2rem;
    font-weight: 600;
}

.buy-action .action-day {
    color: #4a7;
}

.sell-action .action-day {
    color: #4a9fe8;
}

.action-price {
    font-size: 0.9rem;
    opacity: 0.9;
}

.action-deviation {
    font-size: 0.75rem;
    opacity: 0.7;
}

.cycle-arrow {
    font-size: 1.5rem;
    opacity: 0.5;
}

.cycle-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cycle-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cycle-stat .stat-name {
    font-size: 0.75rem;
    opacity: 0.7;
}

.cycle-stat .stat-val {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Day-by-day breakdown bars */
.day-breakdown {
    margin-top: 1rem;
}

.day-breakdown h4 {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.day-bars {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border-radius: 8px;
    border: 1px solid var(--pico-muted-border-color);
}

.day-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 50px;
    padding: 0.5rem 0;
}

.day-column.highlight-buy {
    background: rgba(68, 170, 68, 0.1);
    border-radius: 6px;
}

.day-column.highlight-sell {
    background: rgba(74, 159, 232, 0.1);
    border-radius: 6px;
}

.bar-container {
    position: relative;
    width: 30px;
    height: 80px;
    margin-bottom: 0.5rem;
}

.bar-zero-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--pico-muted-border-color);
}

.day-bar {
    position: absolute;
    left: 5px;
    right: 5px;
    border-radius: 3px;
}

.day-bar.positive {
    background: rgba(74, 159, 232, 0.6);
}

.day-bar.negative {
    background: rgba(232, 100, 74, 0.6);
}

.day-bar.buy-day {
    background: #4a7;
}

.day-bar.sell-day {
    background: #4a9fe8;
}

.day-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.day-deviation {
    font-size: 0.7rem;
    opacity: 0.7;
}

.day-price {
    font-size: 0.65rem;
    opacity: 0.6;
}

.day-tag {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-top: 0.25rem;
}

.day-tag.buy-tag {
    background: #4a7;
    color: #fff;
}

.day-tag.sell-tag {
    background: #4a9fe8;
    color: #fff;
}

@media (max-width: 600px) {
    .cyclicality-header {
        flex-direction: column;
    }

    .cycle-recommendation {
        flex-direction: column;
    }

    .cycle-arrow {
        transform: rotate(90deg);
    }

    .day-bars {
        flex-wrap: wrap;
    }

    .day-column {
        min-width: 40px;
    }
}

/* Price Statistics Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stats-group {
    background: var(--pico-card-background-color);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--pico-muted-border-color);
}

.stats-group h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--pico-primary);
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-bottom: 0.5rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.85rem;
}

.stat-name {
    opacity: 0.8;
}

.stat-val {
    font-family: monospace;
    font-weight: 600;
}

/* Volatility coloring */
.stat-val.stat-low {
    color: #4a7;
}

.stat-val.stat-medium {
    color: #a74;
}

.stat-val.stat-high {
    color: #a44;
}

/* Up/Down coloring */
.stat-val.stat-up {
    color: #4a7;
}

.stat-val.stat-down {
    color: #a44;
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* ============================================================
   Deal Score Styles
   ============================================================ */

/* Deal score colors */
.deal-excellent { color: #00c853; }  /* Bright green */
.deal-good { color: #64dd17; }       /* Light green */
.deal-fair { color: #ffc107; }       /* Yellow/amber */
.deal-poor { color: #ff5252; }       /* Red */
.deal-unknown { color: #888; }       /* Gray for no data */

/* Deal score badges */
.deal-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.deal-badge.deal-excellent {
    background: rgba(0, 200, 83, 0.2);
    color: #00c853;
}

.deal-badge.deal-good {
    background: rgba(100, 221, 23, 0.2);
    color: #64dd17;
}

.deal-badge.deal-fair {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.deal-badge.deal-poor {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

.deal-badge.deal-unknown {
    background: rgba(136, 136, 136, 0.2);
    color: #888;
}

/* Deal score legend */
.deal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--pico-card-background-color);
    border-radius: 6px;
    border: 1px solid var(--pico-muted-border-color);
}

.deal-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

/* Materials deal table */
.materials-deal-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.materials-deal-table th,
.materials-deal-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.materials-deal-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.materials-deal-table .num {
    text-align: right;
    font-family: monospace;
}

.materials-deal-table tbody tr {
    border-bottom: 1px solid var(--pico-muted-border-color);
    cursor: pointer;
}

.materials-deal-table tbody tr:hover {
    background: var(--pico-secondary-background);
}

.mat-deal-row {
    animation: fadeIn 0.3s ease-in;
}

.product-row.profit-positive {
    background: rgba(74, 119, 74, 0.15);
}

.product-row.profit-negative {
    background: rgba(170, 68, 68, 0.15);
}

/* Material price indicator in craft row */
.mat-deal-indicator {
    font-size: 0.65rem;
    margin-left: 0.2rem;
    vertical-align: super;
}

/* Conservative profit toggle in origin selector */
.conservative-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.4rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid #ffc107;
    border-radius: 4px;
}

.conservative-toggle label {
    font-size: 0.7rem;
    cursor: pointer;
    margin: 0;
}

.conservative-toggle input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Historical sell options (sell speed + quality) */
.sell-historical-options {
    padding: 0.4rem 0.5rem;
    margin-top: 0.3rem;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    font-size: 0.7rem;
}

.historical-mode-row,
.sell-speed-row,
.quality-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.quality-row {
    margin-bottom: 0;
}

.mode-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
}

.mode-radio input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    cursor: pointer;
}

.mode-radio span {
    font-size: 0.65rem;
}

.speed-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
}

.speed-radio input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    cursor: pointer;
}

.speed-radio span {
    font-size: 0.65rem;
}

/* Quality filter */
.quality-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    flex-wrap: wrap;
}

.quality-cb {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    margin: 0;
}

.quality-cb input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    cursor: pointer;
}

.quality-cb span {
    font-size: 0.65rem;
}

/* Conservative profit indicator */
.cons-profit-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: bold;
    color: #ffc107;
    margin-left: 0.1rem;
    vertical-align: super;
}

/* Resource cities grid */
.resource-cities-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-city-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.resource-city-row .res-label {
    min-width: 60px;
    font-weight: 600;
    font-size: 0.75rem;
}

.resource-city-row .city-checkboxes {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}