/* ── City Services ──────────────────────────────────────────────────
   Shared section primitives, HP bars, inventory grids, market tabs,
   trade item lists, forge recipe rows, ship catalog, delivery service,
   warehouse upgrade, transfer modal, and city node grids.
   ──────────────────────────────────────────────────────────────────── */

/* ── Shared section primitives ─────────────────────────────────── */
.svc-section {
    margin-bottom: 18px;
}
.svc-section:last-child {
    margin-bottom: 0;
}
/* .svc-section-title migrated to .panel-section-title (base.css).
   City services scoped override: slightly smaller, lower-opacity gold. */
.svc-section .panel-section-title {
    font-size: var(--font-size-md);
    color: rgba(197, 160, 89, 0.65);
    border-bottom-color: rgba(197, 160, 89, 0.18);
    margin-bottom: 10px;
}
/* rp-orders-header inside service card sections: compact spacing, no heavy border gap */
.svc-section .rp-orders-header,
.skill-panel-wrap .rp-orders-header {
    margin-bottom: 10px;
    border-bottom-color: #1e1d19;
}
#city-services-section .rp-orders-header ~ .rp-orders-header {
    margin-top: var(--space-sm);
}
.svc-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 5px 0;
}
.svc-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}
.svc-value {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-lg);
}
.svc-muted {
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    font-style: italic;
}
.svc-btn {
    padding: 6px 16px;
    font-size: var(--font-size-lg);
    font-family: var(--font-body);
    font-weight: bold;
    letter-spacing: 0.04em;
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.35);
    color: var(--gold);
    border-radius: 3px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
    white-space: nowrap;
}
.svc-btn:hover {
    background: rgba(197, 160, 89, 0.22);
    border-color: rgba(197, 160, 89, 0.7);
}
.svc-btn:disabled {
    opacity: 0.35;
    cursor: unset;
}
.svc-btn--primary {
    background: rgba(197, 160, 89, 0.85);
    color: #080b10;
    font-weight: bold;
    border-color: var(--gold);
}
.svc-btn--primary:hover {
    background: var(--gold);
}
.svc-btn--danger {
    border-color: rgba(197, 80, 80, 0.5);
    color: #e07070;
}
.svc-btn--danger:hover {
    background: rgba(197, 80, 80, 0.15);
}
.svc-cost-label {
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.4);
    margin-left: 4px;
}

/* ── HP / condition bar ────────────────────────────────────────── */
.svc-hp-bar {
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-lg);
    margin: 6px 0;
}
.svc-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf82, #82c75a);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.svc-hp-fill--low {
    background: linear-gradient(90deg, #e07070, #c54a4a);
}
.svc-hp-fill--mid {
    background: linear-gradient(90deg, #e0a840, #c59030);
}

/* ── Inventory grids (Warehouse) ───────────────────────────────── */
.svc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    align-items: start;
}
.svc-half-label {
    font-size: var(--font-size-md);
    letter-spacing: 0.06em;
    color: rgba(197, 160, 89, 0.6);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.svc-capacity-badge {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    margin-left: auto;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
}
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-xs);
    min-height: 80px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 6px;
}
.inv-grid.drag-over-target {
    border-color: rgba(197, 160, 89, 0.55);
    background: rgba(197, 160, 89, 0.06);
}
.inv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    padding: 5px 3px 4px;
    cursor: pointer;
    user-select: none;
    transition:
        border-color 0.12s,
        background 0.12s;
    aspect-ratio: 1;
}
.inv-item:hover {
    border-color: rgba(197, 160, 89, 0.5);
    background: rgba(197, 160, 89, 0.07);
}
.inv-item.dragging {
    opacity: 0.4;
    border-style: dashed;
}
.inv-item-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    line-height: 1;
}
.inv-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.inv-item-name {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.58);
    text-align: center;
    line-height: 1.2;
}
.inv-item-qty {
    font-size: var(--font-size-base);
    color: var(--gold);
    font-weight: bold;
}
.inv-empty-hint {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: var(--font-size-md);
    padding: 16px 0;
    font-style: italic;
}

/* ── Market tabs ───────────────────────────────────────────────── */
/* Diverges intentionally from .panel-tabs - two-item buy/sell toggle for city services. */
.svc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    margin-bottom: 12px;
}
.svc-tab {
    padding: 7px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    letter-spacing: 0.05em;
    cursor: pointer;
    margin-bottom: -1px;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.svc-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}
.svc-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.svc-tab-panel {
    display: none;
}
.svc-tab-panel.active {
    display: block;
}

/* ── Market / Store item list ──────────────────────────────────── */
.trade-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 7px 8px;
    border-radius: 3px;
    transition: background 0.12s;
}
.trade-item-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.trade-item-row + .trade-item-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.trade-item-icon {
    font-size: var(--font-size-xl);
    min-width: 26px;
    text-align: center;
}
.trade-item-info {
    flex: 1;
}
.trade-item-name {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.82);
}
.trade-item-price {
    font-size: var(--font-size-lg);
    color: rgba(197, 160, 89, 0.75);
}
.trade-qty-input {
    width: 52px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    color: white;
    font-size: var(--font-size-md);
    text-align: center;
    padding: 3px 4px;
}

/* ── Forge recipe rows ─────────────────────────────────────────── */
.forge-recipe-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.15);
    transition: border-color 0.12s;
}
.forge-recipe-row:hover {
    border-color: rgba(197, 160, 89, 0.3);
}
.forge-recipe-io {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-md);
    flex-wrap: wrap;
}
.forge-arrow {
    color: rgba(197, 160, 89, 0.6);
    font-size: var(--font-size-lg);
}
.forge-item {
    color: rgba(255, 255, 255, 0.75);
}
.forge-item--insufficient {
    color: rgba(255, 100, 100, 0.7);
}

/* ── Ship catalog (Shipwright) ─────────────────────────────────── */
.ship-class-row {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}
.ship-class-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.ship-class-header:hover {
    background: rgba(197, 160, 89, 0.08);
}
.ship-class-name {
    flex: 1;
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.04em;
}
.ship-class-chevron {
    color: var(--text-muted);
    font-size: var(--font-size-md);
    transition: transform 0.2s;
}
.ship-class-row.open .ship-class-chevron {
    transform: rotate(90deg);
}
.ship-level-cards {
    display: none;
    padding: 8px 10px 10px;
    gap: var(--space-sm);
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ship-class-row.open .ship-level-cards {
    display: flex;
}
.ship-level-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 8px 10px;
    width: calc(50% - 4px);
    min-width: 120px;
    flex: 1;
    transition: border-color 0.12s;
}
.ship-level-card:hover {
    border-color: rgba(197, 160, 89, 0.4);
}
.ship-level-img {
    width: 100%;
    height: 60px;
    object-fit: contain;
    margin-bottom: 5px;
    display: none; /* shown only when image loads */
}
.ship-level-name {
    font-size: var(--font-size-md);
    color: var(--gold);
    margin-bottom: 2px;
}
.ship-level-stats {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}
.ship-level-desc {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
    font-style: italic;
}

.rp-orders-header:has(.district-lore) {
    flex-wrap: wrap;
}

.district-lore {
    flex: 0 0 100%;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    margin: -0.3rem 0 0.4rem -0.3rem;
    padding: 0 2px;
    line-height: 1.4;
}