/* ============================================================
   Aktualne ceny rynku (Views/Account/CurrentMarketPrices.cshtml, _MarketPriceDetails.cshtml)
   Mobile-first, prefiks .mk-*. Kolory tylko z tokenów --g-* (global.css).
   Zachowania: wwwroot/assets/js/market-prices.js.
   ============================================================ */

.mk {
    overflow-x: hidden;
    color: var(--g-text);
}

.mk [hidden],
.mk-sheet [hidden] {
    display: none !important;
}

/* ---------- Podsumowanie ---------- */
.mk-sum {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg, 12px);
    background: var(--g-surface);
}

.mk-sum-ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--g-amber);
    color: var(--g-amber-text);
    font-size: 1.35rem;
}

.mk-sum-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mk-sum-main b {
    font-size: 0.95rem;
}

.mk-sum-main small {
    color: var(--g-text-muted);
    font-size: 0.76rem;
}

/* ---------- Wyszukiwarka + kategorie ---------- */
.mk-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.6rem;
}

.mk-search {
    position: relative;
    margin: 0;
}

.mk-search i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.mk-search input {
    width: 100%;
    height: 44px;
    padding: 0 0.75rem 0 2.3rem;
    border: 1px solid var(--g-border);
    border-radius: 10px;
    background: var(--g-surface);
    color: var(--g-text);
    font-size: 16px; /* bez zoomu iOS */
}

.mk-search input:focus {
    outline: none;
    border-color: var(--g-amber-border);
    box-shadow: 0 0 0 3px var(--g-amber);
}

/* Kategorie — jeden przewijany rząd pigułek */
.mk-tabs {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.mk-tabs::-webkit-scrollbar {
    display: none;
}

.mk-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    background: var(--g-surface);
    color: var(--g-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mk-tab span {
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--g-gray);
    font-size: 0.72rem;
}

.mk-tab i {
    color: var(--g-gold);
}

.mk-tab.is-on { background: var(--g-green); border-color: var(--g-green-border); color: var(--g-green-text); }

/* ---------- Lista ---------- */
.mk-head {
    display: none;
}

.mk-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg, 12px);
    background: var(--g-surface);
    overflow: hidden;
}

.mk-item {
    display: flex;
    align-items: stretch;
}

.mk-item + .mk-item {
    border-top: 1px solid var(--g-border);
}

/* Telefon: zdjęcie | nazwa + kategoria, pod spodem notowania (lokalnie / skup / ciężarówki) z widełkami | strzałka;
   gwiazdka osobnym przyciskiem */
.mk-row {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 48px minmax(0, 1fr) 14px;
    grid-template-areas:
        "photo name   chev"
        "photo quotes chev";
    row-gap: 0.2rem;
    align-items: center;
    column-gap: 0.65rem;
    min-width: 0;
    min-height: 64px;
    padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mk-row:hover,
.mk-row:focus-visible {
    background: var(--g-gray);
}

.mk-photo {
    grid-area: photo;
    align-self: start;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--g-surface-alt);
}

.mk-name {
    grid-area: name;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mk-name b {
    overflow: hidden;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-name small {
    color: var(--g-text-muted);
    font-size: 0.74rem;
}

.mk-cat,
.mk-best {
    display: none;
}

.mk-price {
    grid-area: price;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.mk-amount b {
    font-size: 1.02rem;
}

.mk-amount small,
.mk-big small,
.mk-offer-price small {
    color: var(--g-text-muted);
    font-size: 0.72rem;
}

.mk-trend {
    color: var(--g-text-muted);
    font-size: 0.72rem;
}

.mk-trend.is-up {
    color: var(--g-green-text);
}

.mk-trend.is-down {
    color: var(--g-red-text);
}

.mk-chev {
    grid-area: chev;
    color: var(--g-text-muted);
    font-size: 1.2rem;
}

.mk-star {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: 0;
    border-left: 1px solid var(--g-border);
    background: none;
    color: var(--g-text-muted);
    font-size: 1.3rem;
    cursor: pointer;
}

.mk-star:hover {
    background: var(--g-gray);
}

.mk-star.is-on {
    color: var(--g-gold);
}

.mk-empty {
    padding: 1.5rem 0.5rem;
    color: var(--g-text-muted);
    text-align: center;
}

/* ---------- Panel od dołu (na laptopie okno na środku: .g-sheet-center) ---------- */
.offcanvas.offcanvas-bottom.mk-sheet {
    height: auto;
    max-height: 85vh;
    border-top: 1px solid var(--g-border);
    border-radius: 18px 18px 0 0;
    background: var(--g-surface-alt);
    color: var(--g-text);
    padding-bottom: env(safe-area-inset-bottom);
}

.mk-sheet {
    --g-sheet-w: 560px;
}

@media (max-width: 767.98px) {
    /* nad dolnym paskiem gry (.gl-quick-actions-bar) */
    .offcanvas.offcanvas-bottom.mk-sheet {
        z-index: 1055;
        bottom: var(--gl-quick-bar-h, 60px);
        max-height: calc(100dvh - var(--gl-quick-bar-h, 60px) - 24px);
    }

    .offcanvas-backdrop {
        z-index: 1051;
    }
}

.mk-sheet-grip {
    width: 40px;
    height: 4px;
    margin: 0.5rem auto 0;
    border-radius: 4px;
    background: var(--g-border);
}

.mk-sheet-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 1rem 0.6rem;
    border-bottom: 1px solid var(--g-border);
}

.mk-sheet-photo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.mk-sheet-head h5 {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-sheet-body {
    padding: 0.6rem 1rem 1rem;
    overflow-y: auto;
}

.mk-loading {
    padding: 1.5rem 0;
    color: var(--g-text-muted);
    text-align: center;
}

.mk-block {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--g-border);
    border-radius: 12px;
    background: var(--g-surface);
}

.mk-block h6 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    color: var(--g-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.mk-big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
}

.mk-big b {
    font-size: 1.35rem;
}

.mk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.75rem;
    color: var(--g-text-muted);
    font-size: 0.76rem;
}

.mk-offers {
    display: flex;
    flex-direction: column;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.4rem 0;
}

.mk-offer + .mk-offer {
    border-top: 1px dashed var(--g-border);
}

.mk-offer-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.86rem;
}

.mk-offer-name small {
    color: var(--g-text-muted);
    font-size: 0.74rem;
}

.mk-offer-price {
    flex: none;
    white-space: nowrap;
    text-align: right;
}

.mk-offer.is-best .mk-offer-price b {
    color: var(--g-teal-text);
}

.mk-offer.is-best .mk-offer-name b::after {
    content: "najwyższa";
    margin-left: 0.4rem;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    background: var(--g-teal);
    color: var(--g-teal-text);
    font-size: 0.68rem;
    font-weight: 600;
}

.mk-none {
    padding: 1rem 0;
    color: var(--g-text-muted);
    text-align: center;
}

.mk-go {
    width: 100%;
    min-height: 44px;
    margin: 0;
}

/* ============================================================
   Laptop (≥ 992 px): pełna szerokość, wiersze w kolumnach pod nagłówkiem.
   ============================================================ */
@media (min-width: 992px) {
    .mk-bar {
        flex-direction: row;
        align-items: center;
        margin: 1.25rem 0 0.75rem;
    }

    .mk-search {
        flex: 0 1 22rem;
    }

    .mk-tabs {
        flex: 1 1 auto;
        flex-wrap: wrap;
        overflow: visible;
    }

    .mk-row,
    .mk-head {
        grid-template-columns: 48px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 14px;
        grid-template-areas: "photo name cat price best chev";
        column-gap: 1rem;
        padding-block: 0.5rem;
        padding-left: 1.25rem;
    }

    .mk-head {
        display: grid;
        border: 1px solid var(--g-border);
        border-bottom: 2px solid var(--g-border);
        border-radius: var(--g-radius-lg, 12px) var(--g-radius-lg, 12px) 0 0;
        padding-right: 54px;
        background: var(--g-surface-alt);
        color: var(--g-text-muted);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mk-head > span:first-child {
        grid-column: 1 / 3;
    }

    .mk-head > span:nth-child(2) { grid-column: 3; }
    .mk-head > span:nth-child(3) { grid-column: 4; }
    .mk-head > span:nth-child(4) { grid-column: 5; }

    .mk-head + .mk-list {
        border-top: 0;
        border-radius: 0 0 var(--g-radius-lg, 12px) var(--g-radius-lg, 12px);
    }

    .mk-name small {
        display: none;
    }

    .mk-cat {
        grid-area: cat;
        display: block;
        color: var(--g-text-muted);
        font-size: 0.86rem;
    }

    .mk-price {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 0.5rem;
    }

    .mk-best {
        grid-area: best;
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-size: 0.86rem;
    }

    .mk-best small {
        color: var(--g-text-muted);
        font-size: 0.76rem;
    }
}

/* ---------- Notowania w wierszu: lokalnie / skup / ciężarówki ---------- */
.mk-quotes {
    grid-area: quotes;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.05rem;
    min-width: 0;
}

.mk-q {
    display: grid;
    grid-template-columns: 1.1rem auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.45rem;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.mk-q.is-empty,
.mk-q-level,
.mk-q-where,
.mk-full {
    display: none;
}

.mk-q-label {
    color: var(--g-text-muted);
    font-size: 0.95rem;
    font-style: normal;
}

.mk-legend {
    color: var(--g-text-muted);
    font-size: 0.7rem;
}

.mk-legend .is-high {
    color: var(--g-green-text);
    font-weight: 600;
}

.mk-legend .is-low {
    color: var(--g-red-text);
    font-weight: 600;
}

.mk-q-price {
    white-space: nowrap;
}

.mk-q-price b {
    font-size: 0.9rem;
}

.mk-q-unit {
    margin-left: 0.1rem;
    color: var(--g-text-muted);
    font-size: 0.68rem;
}

.mk-q-price .mk-trend {
    margin-left: 0.2rem;
    font-size: 0.9rem;
}

.mk-q-range {
    color: var(--g-text);
    font-size: 0.72rem;
}

/* dla sprzedającego: cena wysoko w widełkach = zielona cena, nisko = czerwona (zakres zostaje biały) */
.mk-q.is-high .mk-q-price b { color: var(--g-green-text); }
.mk-q.is-low .mk-q-price b { color: var(--g-red-text); }

@media (min-width: 992px) {
    .mk-row,
    .mk-head {
        grid-template-columns: 48px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr) 14px;
        grid-template-areas: "photo name direct both truck chev";
        align-items: center;
    }

    .mk-photo {
        align-self: center;
    }

    .mk-name small {
        display: block;
    }

    .mk-head > span:nth-child(2) { grid-column: 3; }
    .mk-head > span:nth-child(3) { grid-column: 4; }
    .mk-head > span:nth-child(4) { grid-column: 5; }

    .mk-quotes {
        display: contents;
    }

    .mk-q {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
    }

    .mk-q-direct { grid-area: direct; }
    .mk-q-both { grid-area: both; }
    .mk-q-truck { grid-area: truck; }

    .mk-q.is-empty {
        display: flex;
        color: var(--g-text-muted);
    }

    .mk-q-label,
    .mk-short {
        display: none;
    }

    .mk-full,
    .mk-q-where {
        display: inline;
    }

    .mk-q-price b {
        font-size: 1rem;
    }

    .mk-q-range,
    .mk-q-where {
        font-size: 0.76rem;
    }

    .mk-q-where {
        overflow: hidden;
        color: var(--g-text-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mk-q-level {
        display: inline-block;
        width: fit-content;
        padding: 0 0.4rem;
        border-radius: 999px;
        background: var(--g-gray);
        color: var(--g-text-muted);
        font-size: 0.68rem;
        font-weight: 700;
    }

    .mk-q.is-high .mk-q-level { background: var(--g-green); color: var(--g-green-text); }
    .mk-q.is-low .mk-q-level { background: var(--g-red); color: var(--g-red-text); }
}