/* ==========================================================================
   css/theme/combat.css — KG unified theme · MARKET / ECONOMY area
   --------------------------------------------------------------------------
   Retrofits the legacy "Schwarzmarkt" (blackmarket buy/sell), Marktplatz,
   Miner and Schrottplatz pages onto the canonical --kg-* design tokens so the
   whole economy feels like one cohesive modern marketplace, while keeping the
   classic dark-navy + orange palette.

   These pages historically ship their own css/blackmarket.css with a dark-GRAY
   surface (#2a2a2a / #444 / #333) and GREEN (#24BC06) as the primary accent.
   Everything below is additive, token-based, and scoped under #main-content,
   so it simply re-skins that legacy markup without touching any PHP/JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Blackmarket container — gray panel -> dark navy card
   -------------------------------------------------------------------------- */
#main-content .blackmarket-container {
    background: var(--kg-surface) !important;
    color: var(--kg-text-1) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius) !important;
    box-shadow: var(--kg-shadow) !important;
}

#main-content .blackmarket-header {
    border-bottom: 1px solid var(--kg-line) !important;
}

#main-content .blackmarket-title {
    color: var(--kg-text-1) !important;
    letter-spacing: .3px;
    /* styleguide gives every h2 a GREEN dashed underline — recolor to orange
       so the market heading matches the navy+orange palette */
    border-bottom: 2px dashed var(--kg-accent) !important;
}

#main-content .blackmarket-subtitle {
    color: var(--kg-text-2) !important;
}

/* --------------------------------------------------------------------------
   2. Tabs (Kaufen / Verkaufen) — gray pills, green active -> navy + orange
   -------------------------------------------------------------------------- */
#main-content .blackmarket-tab {
    background: var(--kg-surface-2) !important;
    color: var(--kg-text-2) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius-sm) !important;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, transform .12s ease,
        box-shadow .15s ease;
}
#main-content .blackmarket-tab:hover {
    background: var(--kg-surface-3) !important;
    color: var(--kg-text-1) !important;
}
#main-content .blackmarket-tab.active {
    background: linear-gradient(135deg, var(--kg-accent) 0%, var(--kg-accent-2) 100%) !important;
    color: #fff !important;
    border-color: var(--kg-accent) !important;
    box-shadow: 0 3px 10px rgba(255, 102, 0, .3) !important;
}

/* --------------------------------------------------------------------------
   3. Market table — gray header/rows -> navy surfaces, orange-tinted hover
   -------------------------------------------------------------------------- */
#main-content .blackmarket-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius) !important;
    overflow: hidden;
    background: var(--kg-surface) !important;
}
#main-content .blackmarket-table th {
    background: var(--kg-surface-3) !important;
    color: var(--kg-text-1) !important;
    border-bottom: 1px solid var(--kg-line) !important;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
#main-content .blackmarket-table td {
    border-bottom: 1px solid var(--kg-line) !important;
    color: var(--kg-text-1) !important;
    font-size: 14px;
}
#main-content .blackmarket-table tr:hover td {
    background: var(--kg-surface-2) !important;
}
#main-content .blackmarket-table tr:last-child td {
    border-bottom: none !important;
}

/* Item name — green link -> orange accent link */
#main-content .blackmarket-table .item-name {
    color: var(--kg-accent) !important;
    font-weight: 600;
    transition: color .15s ease;
}
#main-content .blackmarket-table .item-name:hover {
    color: var(--kg-accent-2) !important;
}

#main-content .item-stock {
    color: var(--kg-text-1) !important;
}

/* Price column — orange accent for the headline price/Stk. */
#main-content .item-price span {
    color: var(--kg-accent) !important;
    font-weight: 700;
}

/* Kurs trend — keep semantic up=green / down=red, neutral readable */
#main-content .price-up    { color: var(--kg-success) !important; }
#main-content .price-down  { color: var(--kg-danger) !important; }
#main-content .price-neutral { color: var(--kg-text-1) !important; }

/* Quantity input — already remapped by kg-theme, just tighten the market look */
#main-content .blackmarket-input {
    background: var(--kg-surface-2) !important;
    color: var(--kg-text-1) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius-sm) !important;
    text-align: center;
}
#main-content .blackmarket-input:focus,
#main-content .blackmarket-input.focused {
    border-color: var(--kg-accent) !important;
    box-shadow: 0 0 0 2px rgba(255, 102, 0, .25) !important;
}

/* Totals row */
#main-content .blackmarket-total td,
#main-content tr.blackmarket-total td {
    background: var(--kg-surface-3) !important;
}
#main-content .blackmarket-total-value {
    color: var(--kg-accent) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons — orange CTA, semantic green for "buy/success" actions
   -------------------------------------------------------------------------- */
/* Neutral / secondary (Reset, "Nach oben", tab-style links) */
#main-content .blackmarket-button {
    background: var(--kg-surface-3) !important;
    color: var(--kg-text-1) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius-sm) !important;
    font-weight: 600;
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease,
        background .15s ease;
}
#main-content .blackmarket-button:hover {
    background: var(--kg-surface-2) !important;
    color: var(--kg-text-1) !important;
    transform: translateY(-1px);
}
#main-content .blackmarket-button-secondary {
    background: var(--kg-surface-3) !important;
    color: var(--kg-text-2) !important;
}
#main-content .blackmarket-button-secondary:hover {
    background: var(--kg-surface-2) !important;
    color: var(--kg-text-1) !important;
}
/* Primary confirm action (Kaufen / Verkaufen) — semantic green success */
#main-content .blackmarket-button-primary {
    background: linear-gradient(135deg, var(--kg-success) 0%, #1aa106 100%) !important;
    color: #fff !important;
    border-color: var(--kg-success) !important;
}
#main-content .blackmarket-button-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(36, 188, 6, .35) !important;
}

/* --------------------------------------------------------------------------
   5. Messages — keep semantic green/red, align to dark surface
   -------------------------------------------------------------------------- */
#main-content .blackmarket-message {
    background: var(--kg-surface-2) !important;
    border-radius: var(--kg-radius-sm) !important;
    color: var(--kg-text-1) !important;
}
#main-content .blackmarket-message-success {
    border-left: 4px solid var(--kg-success) !important;
    background: rgba(36, 188, 6, .12) !important;
}
#main-content .blackmarket-message-error {
    border-left: 4px solid var(--kg-danger) !important;
    background: rgba(255, 82, 82, .12) !important;
}

/* --------------------------------------------------------------------------
   6. Tooltips — gray popovers -> dark navy with orange header
   -------------------------------------------------------------------------- */
#main-content .blackmarket-tooltip {
    background: var(--kg-surface-2) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius-sm) !important;
    box-shadow: var(--kg-shadow) !important;
    color: var(--kg-text-1) !important;
}
#main-content .blackmarket-tooltip-header {
    color: var(--kg-accent) !important;
    border-bottom: 1px solid var(--kg-line) !important;
}
#main-content .blackmarket-tooltip-content {
    color: var(--kg-text-1) !important;
}

/* --------------------------------------------------------------------------
   7. Mobile card view of the table (legacy <768px) — re-skin gray cards
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #main-content .blackmarket-table tr {
        border: 1px solid var(--kg-line) !important;
        background: var(--kg-surface-2) !important;
        border-radius: var(--kg-radius-sm) !important;
    }
    #main-content .blackmarket-table td:before {
        color: var(--kg-text-2) !important;
    }
}

/* --------------------------------------------------------------------------
   8. Miner page — define the undefined .kg-table-dark + tidy the layout
   --------------------------------------------------------------------------
   pages/miner.php pairs .kg-table-header (defined) with .kg-table-dark
   (NOT defined anywhere) so its text floats on the bare navy background.
   Wrap the panel into one cohesive card.
   -------------------------------------------------------------------------- */
#main-content .kg-table-header {
    background: linear-gradient(135deg, var(--kg-accent) 0%, var(--kg-accent-2) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--kg-radius) var(--kg-radius) 0 0;
    padding: 10px 14px;
}
#main-content .kg-table-dark {
    background: var(--kg-surface) !important;
    color: var(--kg-text-1) !important;
    border-left: 1px solid var(--kg-line);
    border-right: 1px solid var(--kg-line);
    padding: 12px 14px;
}
/* round off + close the bottom of the stacked .kg-table-dark column */
#main-content .row:last-child > .kg-table-dark {
    border-bottom: 1px solid var(--kg-line);
    border-radius: 0 0 var(--kg-radius) var(--kg-radius);
}

/* --------------------------------------------------------------------------
   9. Marktplatz / Schrottplatz — placeholder text -> framed info card
   --------------------------------------------------------------------------
   pages/marketplace.php just echoes plain text; pages/junkyard.php renders a
   bare .content block. Give both a legible carded surface so they don't read
   as "broken" floating text.
   -------------------------------------------------------------------------- */
#main-content .content {
    background: var(--kg-surface) !important;
    color: var(--kg-text-1) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius) !important;
    box-shadow: var(--kg-shadow) !important;
    padding: 16px 18px !important;
    line-height: 1.6;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   10. Legacy <font> sizing — bump tiny market copy to a legible size
   -------------------------------------------------------------------------- */
#main-content .blackmarket-container font,
#main-content .content font {
    font-size: 14px !important;
    color: var(--kg-text-1) !important;
}