/* admin-tools on phones (docs/architecture.md, "Mobile UI"): md (768 px) is the breakpoint. */

/* A form on its own page: the full width on a phone, a readable column above. */
.form-card {
    width: 100%;
    max-width: 720px;
}

/* The icon actions of a row; touch targets of 44 px on a phone. */
.btn-icon {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .btn-icon {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }

    .btn, .form-control, .form-select {
        min-height: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
    }

    /* A list table becomes cards: every row a card, every cell "label: value" (data-label). */
    .table-cards thead {
        display: none;
    }

    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td {
        display: block;
        width: 100%;
    }

    .table-cards tr {
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
    }

    .table-cards > :not(caption) > * > * {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0;
        padding: .25rem 0;
        box-shadow: none !important;
        background: transparent !important;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .table-cards td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: left;
        flex-shrink: 0;
    }

    /* the first cell is the card's title */
    .table-cards td:first-child {
        font-weight: 600;
        font-size: 1.05rem;
    }

    .table-cards td.actions {
        justify-content: flex-end;
        gap: .5rem;
        padding-top: .5rem;
    }

    .table-cards td.actions::before {
        content: none;
    }

    /* the row of an empty list */
    .table-cards td[colspan] {
        display: block;
        text-align: left;
    }

    /* a wide number report stays a table, scrolled inside its block with its first column in place */
    .table-scroll th:first-child, .table-scroll td:first-child {
        position: sticky;
        left: 0;
        background: var(--bs-table-bg);
        z-index: 1;
    }
}

@media (max-width: 767.98px) {
    /* the filters in their off-canvas panel: one field per line, the full width */
    .offcanvas-md .offcanvas-body form {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
    }

    .offcanvas-md .offcanvas-body form > div {
        width: 100%;
    }
}

/* The round page: the window of a spin, its cells square, the win lines drawn over it. */
.round-window {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 4px;
    max-width: 520px;
    padding: 4px;
    background: var(--bs-dark);
    border-radius: .5rem;
}

.round-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border-radius: .25rem;
    font-size: .7rem;
    text-align: center;
    overflow: hidden;
}

.round-window.has-wins .round-cell:not(.win) {
    opacity: .45;
}

.round-cell.win {
    box-shadow: inset 0 0 0 3px var(--bs-warning);
}

.round-cell img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.round-lines {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    pointer-events: none;
}

.round-lines polyline {
    fill: none;
    stroke-width: 4;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: .8;
}

.round-lines .line-a { stroke: var(--bs-danger); }
.round-lines .line-b { stroke: var(--bs-primary); }

/* One win picked: only its cells and its line. */
.round-window.one-win .round-cell:not(.picked) {
    opacity: .45;
    box-shadow: none;
}

.round-window.one-win .round-cell.picked {
    opacity: 1;
    box-shadow: inset 0 0 0 3px var(--bs-warning);
}

.round-window.one-win .round-lines polyline:not(.picked) {
    display: none;
}

/* The QR code of setting 2FA up: a viewBox SVG, scaled whole to at most 240 px. */
.two-factor-qr svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}

/* the currency rates filter: fields wide enough for their values, a scrolled list of currencies */
.fx-filter-field { width: 11rem; }
.fx-filter-options { max-height: 16rem; overflow-y: auto; }

/* The dashboard's charts: a fixed height, the width of their card. */
.dashboard-chart {
    position: relative;
    height: 220px;
}