/*
 * Team cards (yellow / red / АУТ) - one small stylesheet shared by the
 * organizer admin, the weighing screens and the public live ranking (desktop
 * and mobile). Never colour alone: every state also has a text badge.
 */

/* --- badges ------------------------------------------------------------- */
.tc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tc-badges--inline {
    display: inline-flex;
    margin: 0 0 0 8px;
    vertical-align: middle;
}

.tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.tc-badge--out {
    border: 1px solid #b91c1c;
    background: #dc2626;
    color: #ffffff;
}

.tc-badge--yellow {
    border: 1px solid #eab308;
    background: #fef08a;
    color: #713f12;
}

/* a small card shape, drawn with CSS (no icon font needed) */
.tc-card {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 12px;
    border-radius: 2px;
    vertical-align: -2px;
}

.tc-card--yellow { background: #eab308; }
.tc-card--red { background: #dc2626; }
.tc-badge--out .tc-card { background: #ffffff; }

/* --- the team that is out ------------------------------------------------ */
.tc-name--out {
    text-decoration: underline;
    text-decoration-color: #dc2626;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* public desktop ranking table */
.rtable tbody tr.tc-row--out td {
    background: #fef2f2;
}

.rtable tbody tr.tc-row--out td:first-child {
    box-shadow: inset 4px 0 0 #dc2626;
}

.rank-medal.tc-rank--out {
    background: #fee2e2;
    color: #991b1b;
}

/* public mobile ranking (accordion cards) */
.card.tc-card--out {
    border-left: 4px solid #dc2626 !important;
    background: #fef2f2;
}

/* organizer ranking cards */
.dashboard-ranking-team-card--out {
    border-color: #fca5a5;
    background: #fff5f5;
    box-shadow: inset 4px 0 0 #dc2626;
}

.dashboard-ranking-team-card__rank-badge--out {
    background: #fee2e2;
    color: #991b1b;
}

/* --- weighing screen: status + controls --------------------------------- */
.tc-out-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 12px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.4;
}

.tc-out-banner strong { font-weight: 800; }

.tc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #ffffff;
}

.tc-controls__label {
    margin-right: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.tc-btn:hover,
.tc-btn:focus { text-decoration: none; color: #0f172a; background: #f8fafc; }

.tc-btn--yellow { border-color: #eab308; background: #fef9c3; color: #713f12; }
.tc-btn--yellow:hover,
.tc-btn--yellow:focus { background: #fef08a; color: #713f12; }

.tc-btn--red { border-color: #ef4444; background: #fee2e2; color: #991b1b; }
.tc-btn--red:hover,
.tc-btn--red:focus { background: #fecaca; color: #991b1b; }

.tc-btn--ghost { color: #475569; }

/* a weighing form of a team that is out: only the status is shown */
.weighing-form--blocked > .form-group,
.weighing-form--blocked .weighing-form-actions,
.weighing-form--blocked .weighing-form-group {
    display: none;
}

/* the disabled "Теглене" of a team that is out */
.tc-weigh-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- confirmation modal -------------------------------------------------- */
.tc-modal .modal-header { border-bottom: 0; padding-bottom: 0; }
.tc-modal__team { margin: 0 0 8px; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.tc-modal__text { margin: 0; color: #334155; font-size: 15px; line-height: 1.5; }
.tc-modal .modal-footer { border-top: 0; display: flex; gap: 8px; justify-content: flex-end; }
.tc-modal .modal-footer .btn { min-height: 44px; font-weight: 700; margin: 0; }

@media (max-width: 767px) {
    .tc-controls .tc-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .tc-modal .modal-footer .btn { flex: 1 1 0; }
}

/* organizer ranking cards on phones (the admin styles them with an id selector) */
body.internal-shell #current-ranking .dashboard-ranking-mobile-card--out {
    border-color: #fca5a5;
    background: #fff5f5;
    box-shadow: inset 4px 0 0 #dc2626, 0 6px 16px rgba(15, 23, 42, 0.06);
}

/* public mobile ranking: the badges sit under the team name, aligned with it
   (the name has the same 1.5rem offset next to the vertical "отбор" label) */
.tc-badges--under {
    display: flex;
    margin: 4px 0 0 1.5rem;
}