/* ---- Coin page: six tiles ------------------------------------------------
   Market on the left (chart, our price, traffic-light legend), the board
   in the middle, trading on the right (buy/sell, payment channels). The
   side columns set the height; the board fills it and scrolls inside. */
.dashboard-row {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 280px);
    grid-template-areas:
        "chart inquiries actions-primary"
        "chart inquiries actions-secondary"
        "rates inquiries actions-secondary"
        "status inquiries actions-secondary";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 20px;
    row-gap: 20px;
    align-items: start;
}

.dashboard-col--rates { grid-area: rates; }
.dashboard-col--status { grid-area: status; }

/* The board takes the height the side columns give it, not the other way round. */
.dashboard-col--inquiries {
    align-self: stretch;
    contain: size;
    min-height: 560px;
}

.dashboard-col--inquiries .board {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dashboard-col--inquiries .board-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.price-widget {
    min-width: 0;
    border-radius: var(--ui-radius, 18px);
    box-shadow: var(--ui-shadow);
}

@media (max-width: 1199px) {
    .dashboard-row {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        grid-template-areas:
            "chart inquiries"
            "actions-primary inquiries"
            "rates inquiries"
            "actions-secondary inquiries"
            "status inquiries";
        grid-template-rows: none;
    }
}

@media (max-width: 960px) {
    .dashboard-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "chart"
            "rates"
            "actions-primary"
            "inquiries"
            "actions-secondary"
            "status";
        row-gap: 16px;
    }

    .dashboard-col--inquiries {
        contain: none;
        min-height: 0;
    }

    .dashboard-col--inquiries .board-list {
        max-height: 560px;
    }
}

/* ---- Small tiles: our price, traffic-light legend ------------------------ */
.tile {
    padding: 16px;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-line, #e8ebf0);
    border-radius: var(--ui-radius, 18px);
    box-shadow: var(--ui-shadow);
}

.tile__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.tile__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-ink, #0f172a);
}

.tile__tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ui-faint, #94a3b8);
    white-space: nowrap;
}

.rates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rates__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--ui-buy-soft, rgba(22, 163, 74, 0.08));
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rates__item--sell {
    background: var(--ui-sell-soft, rgba(220, 38, 38, 0.07));
}

.rates__item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.rates__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-buy, #16a34a);
}

.rates__item--sell .rates__label {
    color: var(--ui-sell, #dc2626);
}

.rates__value {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ui-ink, #0f172a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ampel {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ampel__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    font-size: 13px;
    color: var(--ui-muted, #64748b);
}

.ampel__item .traffic-light__lamp {
    width: 10px;
    height: 10px;
}

.ampel__label {
    flex: 1 1 auto;
}

.ampel__count {
    min-width: 28px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ui-chip, #f1f5f9);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: var(--ui-ink, #0f172a);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
    /* On a phone the legend is a single line of three chips. */
    .ampel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .ampel__item {
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
        border-radius: 12px;
        background: var(--ui-hover, #f8fafc);
        font-size: 11px;
        text-align: center;
    }

    .ampel__label {
        flex: 0 0 auto;
    }
}

/* ---- Inquiries board -----------------------------------------------------
   One white card: title bar with filters, the column captions once, then
   rows without ruled lines. Every row sits on the same 3-column grid:
   lamps + place | type + action | date on top, then amount | price of one
   coin | coins on one line, so the three figures share a baseline and the
   two outer ones mirror each other around the price. */
.board {
    --board-buy: var(--ui-buy, #16a34a);
    --board-buy-soft: var(--ui-buy-soft, rgba(22, 163, 74, 0.1));
    --board-sell: var(--ui-sell, #dc2626);
    --board-sell-soft: var(--ui-sell-soft, rgba(220, 38, 38, 0.09));
    --board-ink: var(--ui-ink, #0f172a);
    --board-muted: var(--ui-muted, #64748b);
    --board-faint: var(--ui-faint, #94a3b8);
    --board-hover: var(--ui-hover, #f8fafc);

    position: relative;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-line, #e8ebf0);
    border-radius: var(--ui-radius, 18px);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}

/* ---- Title bar ---------------------------------------------------------- */
.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
}

.board-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--board-ink);
}

.board-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ui-chip, #f1f5f9);
    font-size: 12px;
    font-weight: 600;
    color: var(--board-muted);
    font-variant-numeric: tabular-nums;
}

.board-filter {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--ui-chip, #f1f5f9);
}

.board-filter__btn {
    padding: 5px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--board-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.board-filter__btn span {
    margin-left: 2px;
    font-weight: 500;
    color: var(--board-faint);
}

.board-filter__btn:hover {
    color: var(--board-ink);
}

.board-filter__btn.is-active {
    background: #fff;
    color: var(--board-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ---- Column captions, once, on the same grid as the rows ---------------- */
.board-cols,
.board-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 16px;
}

.board-cols {
    padding: 8px 28px;
    border-top: 1px solid var(--ui-chip, #f1f5f9);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--board-faint);
}

.board-cols span:nth-child(2) {
    text-align: center;
}

.board-cols span:nth-child(3) {
    text-align: right;
}

/* ---- Rows ---------------------------------------------------------------- */
.board-list {
    list-style: none;
    margin: 0;
    padding: 0 8px 20px;
    max-height: 420px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.board-list::-webkit-scrollbar {
    width: 6px;
}

.board-list::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 6px;
}

/* Soft fade at the bottom says "there is more" without a hard cut. */
.board::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--ui-surface, #fff));
    pointer-events: none;
}

.board-row {
    grid-template-areas:
        "who deal date"
        "amount rate coins";
    row-gap: 6px;
    align-items: center;
    padding: 12px 20px;
    border-radius: 14px;
    transition: background-color 0.15s ease;
}

.board-row + .board-row {
    box-shadow: inset 0 1px 0 var(--ui-chip, #f1f5f9);
}

.board-row:hover,
.board-row:hover + .board-row {
    box-shadow: none;
}

.board-row[hidden] {
    display: none;
}

.board-row:hover {
    background: var(--board-hover);
}

.board-who { grid-area: who; }
.board-deal { grid-area: deal; }
.board-date { grid-area: date; }
.board-figure--start { grid-area: amount; }
.board-figure--middle { grid-area: rate; }
.board-figure--end { grid-area: coins; }

/* Line 1: the lamps over the person, the trade in the middle, the date. */
.board-who {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.board-place,
.board-date {
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    color: var(--board-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-date {
    text-align: right;
}

.board-deal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

/* Line 2: the figures — the reason the row exists. */
.board-figure {
    display: block;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--board-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-figure--middle {
    justify-self: center;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--ui-chip, #f1f5f9);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.board-figure--end {
    text-align: right;
}

.board-figure__unit {
    margin-left: 0.3em;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--board-faint);
}

.board-figure--middle .board-figure__unit {
    font-size: 11px;
}

.board-figure__approx {
    margin-right: 0.2em;
    font-weight: 500;
    color: var(--board-faint);
}

.board-type {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--board-buy);
    background: var(--board-buy-soft);
    white-space: nowrap;
}

.board-row[data-type="sell"] .board-type {
    color: var(--board-sell);
    background: var(--board-sell-soft);
}

.board-accept {
    padding: 2px 12px;
    border: 1px solid var(--board-ink);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--board-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.board-accept:hover,
.board-row:hover .board-accept {
    background: var(--board-ink);
    color: #fff;
}

.board-state {
    font-size: 11.5px;
    color: var(--board-faint);
    white-space: nowrap;
}

.board-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--board-muted);
}

.board-empty[hidden] {
    display: none;
}

/* Small horizontal traffic light in front of the place. */
.traffic-light--row {
    flex-direction: row;
    gap: 3px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #1e293b;
}

.traffic-light--row .traffic-light__lamp {
    width: 7px;
    height: 7px;
    background-color: #475569;
    box-shadow: none;
}

.traffic-light--row .traffic-light__lamp--yellow.is-on {
    background-color: #facc15;
    box-shadow: 0 0 6px 1px rgba(250, 204, 21, 0.75);
}

.traffic-light--row .traffic-light__lamp--green.is-on {
    background-color: #22c55e;
    box-shadow: 0 0 6px 1px rgba(34, 197, 94, 0.75);
}

.traffic-light--row .traffic-light__lamp--blue.is-on {
    background-color: #3b82f6;
    box-shadow: 0 0 6px 1px rgba(59, 130, 246, 0.75);
}

/* Phone: three short lines — who, the three figures, then when and the trade. */
@media (max-width: 600px) {
    .board {
        border-radius: 16px;
    }

    .board-head {
        flex-wrap: wrap;
        padding: 14px 14px 10px;
    }

    .board-filter {
        width: 100%;
    }

    .board-filter__btn {
        flex: 1 1 0;
        padding: 7px 6px;
    }

    .board-cols,
    .board-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 8px;
    }

    .board-cols {
        padding: 8px 18px;
    }

    .board-list {
        padding: 0 4px 16px;
    }

    .board-row {
        grid-template-areas:
            "who who who"
            "amount rate coins"
            "date deal deal";
        row-gap: 8px;
        padding: 12px;
    }

    .board-deal {
        justify-content: flex-end;
    }

    /* Type and button sit at the right edge, so the date may run under their column. */
    .board-date {
        overflow: visible;
        text-align: left;
    }

    .board-figure {
        font-size: 14px;
    }

    .board-figure--middle {
        padding: 2px 6px;
        font-size: 12px;
    }

    /* The unit is the same on every row; the "Kurs" caption says what it is. */
    .board-figure--middle .board-figure__unit {
        display: none;
    }

    .board-figure__unit {
        font-size: 10.5px;
    }

    .board-figure--middle .board-figure__unit {
        font-size: 10px;
    }

    .board-place,
    .board-date {
        font-size: 11.5px;
    }

    .board-accept {
        padding: 5px 16px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .board-figure {
        font-size: 13px;
    }

    .board-figure__unit {
        margin-left: 0.2em;
    }
}

/* ---- Trade column --------------------------------------------------------
   Same card language as the board. Kaufen / Verkaufen stay the loudest
   things in the column; the payment channels are a quiet list with an
   icon, a one-line hint and a chevron instead of four black slabs. */
.trade-card {
    padding: 16px;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-line, #e8ebf0);
    border-radius: var(--ui-radius, 18px);
    box-shadow: var(--ui-shadow);
}

.trade-card__title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
}

.trade-card__caption {
    margin: 0 0 6px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.trade-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.trade-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.trade-btn--buy {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.25);
}

.trade-btn--sell {
    background: linear-gradient(135deg, #f05252, #dc2626);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.22);
}

.trade-btn__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
}

.trade-btn__icon svg,
.channel__icon svg,
.channel__chevron {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trade-btn__icon svg {
    width: 18px;
    height: 18px;
}

.trade-btn__text,
.channel__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.trade-btn__label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.trade-btn__hint {
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.85;
}

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

.channel {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: #0f172a;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.channel:hover {
    background: #f8fafc;
}

.channel__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.channel:hover .channel__icon {
    background: #0f172a;
    color: #fff;
}

.channel__icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.channel__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.channel__hint {
    font-size: 12px;
    line-height: 1.3;
    color: #64748b;
}

.channel__chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #cbd5e1;
    transition: transform 0.15s ease, color 0.15s ease;
}

.channel:hover .channel__chevron {
    color: #0f172a;
    transform: translateX(2px);
}

@media (max-width: 960px) {
    /* On a phone the two trades sit side by side, the channels in two columns. */
    .trade-main {
        flex-direction: row;
    }

    .trade-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .channel-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }
}

@media (max-width: 420px) {
    .trade-btn {
        gap: 8px;
        padding: 10px;
    }

    .trade-btn__icon {
        width: 30px;
        height: 30px;
    }

    .trade-btn__hint,
    .channel__hint {
        display: none;
    }
}