/**
 * Bridge Bidding Table Styles
 * BEM methodology with .bridge-bidding namespace
 */

/* ---- Container ---- */

.bridge-bidding {
    margin: 1.5em auto;
    max-width: 400px;
    font-size: 16px;
}

/* ---- Table ---- */

.bridge-bidding__table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    table-layout: fixed;
}

.bridge-bidding__table th,
.bridge-bidding__table td {
    border: 1px solid #ccc;
    padding: 0.3em 0.5em;
    min-width: 50px;
}

/* ---- Position Headers ---- */

.bridge-bidding__position {
    background-color: #f0f0f0;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: capitalize;
}

/* ---- Player Names ---- */

.bridge-bidding__players td {
    font-size: 0.85em;
    font-style: italic;
    color: #666;
    background-color: #fafafa;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Bid Cells ---- */

.bridge-bidding__bid {
    font-weight: 500;
    white-space: nowrap;
}

.bridge-bidding__bid--empty {
    color: #ccc;
}

.bridge-bidding__bid--pass {
    color: #888;
}

.bridge-bidding__bid--double {
    color: #888;
}

.bridge-bidding__bid--redouble {
    color: #888;
}

.bridge-bidding__bid--allpass {
    color: #888;
    font-style: italic;
}

.bridge-bidding__bid--question {
    color: #D9262A;
    font-weight: 700;
    font-size: 1.1em;
}

/* ---- Suit Icons in Bids ---- */

.bridge-bidding__bid img.suit-icon {
    width: 0.9em;
    height: auto;
    vertical-align: baseline;
    position: relative;
    top: 0.1em;
}

/* ---- Annotation References ---- */

.bridge-bidding__annotation-ref {
    font-size: 0.75em;
    color: #D9262A;
    font-weight: 700;
    margin-left: 0.1em;
}

/* ---- Annotations Footer ---- */

.bridge-bidding__annotations {
    margin-top: 0.5em;
    padding: 0.3em 0.5em;
    font-size: 0.85em;
    color: #555;
    border-top: 1px solid #eee;
}

.bridge-bidding__annotations p {
    margin: 0.2em 0;
}

.bridge-bidding__annotations sup {
    color: #D9262A;
    font-weight: 700;
    margin-right: 0.3em;
}

/* ---- Responsive ---- */

@media (max-width: 600px) {
    .bridge-bidding {
        max-width: 100%;
        font-size: 13px;
    }

    .bridge-bidding__table th,
    .bridge-bidding__table td {
        padding: 0.2em 0.3em;
        min-width: 40px;
    }
}