@import url("fontawesome-all.min.css");

html {
    height: 100%;
}

body {
    background-color: rgb(237, 238, 240);

    min-height: 100%;
    height: 100%;
}

:root {
    --layout-header-height: 72px;
    --layout-footer-height: 176px;
}

h1 {
    font-size: 1.4rem;
}

a {
    color: #2c3e50;
}

a:hover {
    color: #1e2b38;
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform 0.15s ease-out;
    transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
    transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out;
}

.page-title {
    position: relative;
    margin-bottom: 1rem;
    background: #ffffff;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    box-shadow: 0px -2px 15px #b1b1b1;
    overflow-x: clip;
}

.page-title #compLocation {
    color: #847f7f;
    font-weight: 400;
    margin-left: 1rem;
    font-size: 1rem;
    font-style: italic;
}

.page-title .page-title-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.page-title h1 {
    font-size: 1.25rem;
    font-weight: 400;
    display: flex;
    align-content: center;
    align-items: center;
}

.page-subtitle {
    font-size: 0.8rem;
}

.page-title .page-title-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.tab-content {
    min-height: calc(100vh - var(--layout-header-height) - var(--layout-footer-height));
}

.nav-tabs {
    border-bottom: 0;
}

.nav-link.active {
    font-weight: 500;
}

.nav-tabs .nav-item {
    z-index: 1;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #f13133 0%, #c43c3d 50%, #b23435 100%);
    border: 1px solid #b73436;
    box-shadow: 0 3px 6px rgba(178, 52, 53, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, #df5c5d 0%, #ce4647 50%, #b63233 100%);
    box-shadow: 0 4px 12px rgba(178, 52, 53, 0.45), 0 2px 6px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);

    border-color: #b73436;
}

.btn-primary:active {
    color: #fff;
    background: linear-gradient(135deg, #c43c3d 0%, #b23435 50%, #9d2c2d 100%);
    box-shadow: 0 3px 10px rgba(178, 52, 53, 0.35);
    transform: translateY(0);
}

.card-body {}

.hidden {
    display: none !important;
}

.btn-support {
    color: #fff;
    background: linear-gradient(135deg, #37b0e8 0%, #2d90d1 45%, #1f6fb8 100%);
    border: 1px solid #2b8ac8;
    box-shadow: 0 6px 14px rgba(43, 138, 200, 0.35);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.45rem 0.85rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.btn-support:hover {
    color: #fff;
    background: linear-gradient(135deg, #44b8f0 0%, #3499da 45%, #2377c0 100%);
    box-shadow: 0 8px 16px rgba(43, 138, 200, 0.45);
    filter: saturate(1.05);
    transform: translateY(-1px);
}

.btn-support:active {
    color: #fff;
    background: linear-gradient(135deg, #2d90d1 0%, #2377c0 45%, #1a5fa6 100%);
    box-shadow: 0 4px 10px rgba(43, 138, 200, 0.3);
    transform: translateY(0);
}

.btn-support .fa-telegram-plane {
    font-size: 1.05rem;
}

.btn-donate {
    color: #fff;
    background: linear-gradient(135deg, #b4252a 0%, #d24832 45%, #ec6c2f 100%);
    border: 1px solid #c23930;
    box-shadow: 0 6px 14px rgba(188, 53, 42, 0.35);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.9rem;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.btn-donate:hover {
    color: #fff;
    background: linear-gradient(135deg, #c23235 0%, #dd5836 45%, #f07b31 100%);
    box-shadow: 0 8px 16px rgba(188, 53, 42, 0.45);
    filter: saturate(1.05);
    transform: translateY(-1px);
}

.btn-donate:active {
    color: #fff;
    background: linear-gradient(135deg, #a81f27 0%, #c63c2f 45%, #e0662d 100%);
    box-shadow: 0 4px 10px rgba(188, 53, 42, 0.3);
    transform: translateY(0);
}

.btn-donate .donut-icon {
    width: 20px;
    height: 20px;
    margin-left: 4px;
}

.btn-donate__text {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1;
}

.footer-logo {
    min-width: 217px;
}

.footer-menu .nav-pills {
    gap: 0.5rem;
    margin-left: 1rem;
}

.footer-menu .nav-link {
    color: #f7f7f7;
    border: none;
    border-radius: 0;
    padding: 0.35rem 0.6rem;
    background: transparent;
    box-shadow: none;
    transition: color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.footer-menu .nav-link:hover {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.footer-menu .nav-link:active,
.footer-menu .nav-link:focus {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    box-shadow: none;
    transform: translateY(0);
}

.footer-menu {
    background: linear-gradient(135deg, #7b8a8b 0%, #667375 50%, #4f5a5d 100%) !important;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-menu .btn-support,
.footer-menu .btn-donate {
    padding: 0.45rem 0.9rem;
    line-height: 1.2;
    min-height: 44px;
}

.footer-menu .footer-donat {
    order: 2;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-menu .nav {
    order: 1;
}

.about-content {
    max-width: 840px;
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .footer-menu {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem 0.75rem;
    }

    .footer-menu .nav {
        order: 3;
        width: 100%;
        margin-left: 0 !important;
    }

    .footer-menu .footer-donat {
        order: 2;
        width: auto;
        margin-left: auto;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.05rem 0.5rem;
        text-align: right;
        padding-right: 14px;
    }

    .footer-menu .btn-donate {
        order: 1;
    }

    .footer-menu .btn-support {
        order: 2;
        flex-basis: 100%;
    }

    .footer-logo {
        order: 1;
        flex: 0 0 auto;
        margin-right: 0.25rem;
        align-self: flex-start;
    }

    .about-content {
        max-width: 100%;
        font-size: 1.1rem;
    }
}

.toc-nav .nav-link {
    font-size: 0.95rem;
    color: #4a4a4a;
    padding-left: 0;
}

.toc-nav .nav-link:hover {
    color: #1e2b38;
}

.toc-nav ul ul .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: #5b5b5b;
}

.toc-nav ul ul ul .nav-link {
    font-size: 0.85rem;
    font-weight: 400;
    color: #6a6a6a;
}

.toc-nav .nav-item {
    margin-bottom: 2px;
}

.toc-nav ul ul {
    margin-left: 0.75rem;
}

.text-page h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.text-page h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.text-page h4 {
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: none;
    margin-top: 1.1rem;
    margin-bottom: 0.5rem;
}

.ad-content {
    padding: 20px;
    max-width: 100%;
}

.direl .card-title {
    margin-bottom: 0 !important;
}


.card-title span {
    position: absolute;
    right: 10px;
    top: 5px;
}

.card-title .poule-info {
    position: static;
    font-size: 1rem;
    font-weight: 400;
    margin-left: 14px;
    color: #757575;
}

.card-title .poule-info-time,
.card-title .poule-info-piste,
.card-title .poule-info-ref {
    display: inline;
}



.card-title .poule-info-time::before {
    content: "\f017";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-left: 5px;
    display: inline-block;
    color: inherit;

}

.card-title .poule-info-piste::before {
    content: "\f018";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-left: 5px;
    display: inline-block;
    color: inherit;

}

.card-title .poule-info-ref::before {
    content: "\f183";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-left: 5px;
    display: inline-block;
    color: inherit;

}


.card-title .poulename {
    display: inline;
}


.clear-time,
.clear-input {
    min-width: 32px;
    margin-left: 10px;
}


.poule-info-hour {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.poule-info-minute {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



.card-title span .btn-link {
    margin-left: -10px;
}

@media (max-width: 576px) {
    .poule-card .card-title {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        padding-right: 96px;
    }

    .poule-card .card-title .poule-info {
        margin-left: 0;
        white-space: nowrap;
    }
}

.poule-table,
.poule-class-table,
.result-table,
.startlist-table {
    width: auto;
    border-top: 0;
    /*border-collapse: separate;
    border-spacing: 0;*/
    -webkit-box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 1);
    box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 1);
}

.result-table .res-num {
    min-width: 30px;
}

.result-table .res-name {
    min-width: 170px;
}

.result-table .res-name {
    min-width: 170px;
}

.poule-card,
.direl {
    box-shadow: 0px 0px 15px #d7d7d7;
}

.match {
    filter: drop-shadow(2px 2px 4px #d7d7d7);
    position: relative;
}

.startlist-table {
    width: auto;
    max-width: 100%;
    table-layout: auto;
    line-height: 0.9;
}

.startlist-table tbody tr {
    min-height: 100px;
}

.startlist-table th,
.startlist-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    vertical-align: middle;

}

.startlist-table tbody td {
    padding: 0.8rem 0.5rem;
}

.startlist-table th:first-child,
.startlist-table td:first-child {
    min-width: 2.8em;
    max-width: 3em;
    text-align: right;
    padding-left: 0.1rem;
}

.startlist-table .sl-button {
    min-width: 3.4em;
    max-width: 3.8em;
    text-align: right;
}

.sl-csv {
    margin-top: 20px;
}

.sl-csv textarea {
    margin: 10px 0px;
}

#ispresent {
    width: 20px;
    height: 20px;
    margin-top: 0;
    margin-left: 0px;
    position: initial;
    vertical-align: bottom;
    margin-right: 0;
}



.present {
    background: #d2d9df;
}


#maxPouleSize {
    width: 40px;
    display: inline-block;
    margin-left: 3px;
}

#poulePreviewModal .modal-dialog {
    max-width: 1100px;
}

#poulePreviewModal .modal-header,
#poulePreviewModal .modal-footer {
    padding: 0.5rem 0.75rem;
}

#poulePreviewModal .modal-body {
    padding: 0.75rem;
    overflow-x: hidden;
}

#poulePreviewModal .poule-preview-summary {
    margin-bottom: 0.35rem !important;
}

#poulePreviewModal .poule-preview-controls {
    margin-bottom: 0.5rem !important;
}

.poule-preview-manual-label {
    color: #2b3646;
}

.poule-preview-manual-hint {
    color: #9aa6b2;
}

.poule-preview-criteria {
    font-size: 0.78rem;
    line-height: 1.2;
}

.poule-preview-audit {
    color: #1f2a37;
    font-size: 0.78rem;
    line-height: 1.2;
}

.poule-preview-audit--ok::before {
    content: '';
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #2ecc71;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.poule-preview-audit--error {
    color: #c0392b;
    font-weight: 600;
}

.poule-preview-grid .poule-preview-card {
    margin-bottom: 0.5rem;
    border: 1px solid #c4cfdd;
    border-radius: 6px 6px 0 0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    overflow: visible;
    position: relative;
}

.poule-preview-grid {
    margin-left: 0;
    margin-right: 0;
}

.poule-preview-grid > [class*="col-"] {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.poule-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.2rem 0.4rem;
    cursor: move;
    border: 0;
    border-bottom: 1px solid #eef1f6;
    background: #fff;
}

.poule-preview-list .poule-preview-item:nth-child(odd) {
    background: #fbfcfe;
}

.poule-preview-list .poule-preview-item:last-child {
    border-bottom: 0;
}

.poule-preview-meta-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.poule-preview-name {
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poule-preview-meta {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.05;
    margin-top: 1px;
}

.poule-preview-meta--warn {
    background: var(--club-warn-bg, #ffe7a3);
    color: var(--club-warn-color, #5d4700);
    padding: 0 0.25rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.poule-preview-attrs {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.poule-preview-attr {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.05;
    display: inline-flex;
    align-items: center;
    padding: 0 0.2rem;
    border-radius: 3px;
    background: transparent;
}

.poule-preview-attr--warn {
    background: var(--club-warn-bg, #ffe7a3);
    color: var(--club-warn-color, #5d4700);
}

.poule-preview-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    margin-left: 0.25rem;
}

.poule-preview-placeholder {
    background: #f0f0f0;
    border: 1px dashed #c8c8c8;
    min-height: 1.6rem;
    margin: 2px 0;
    border-radius: 4px;
}

.poule-preview-rating-badge {
    width: 38px;
    min-width: 38px;
    margin-top: 1px;
    padding: 0.1rem 0.2rem;
    border: 1px solid #b9c4d4;
    border-radius: 4px;
    background: #f2f5fa;
    color: #2d3748;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

.poule-preview-card .card-header {
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    background: linear-gradient(180deg, #e6ebf3, #d9e0ea);
    border-bottom: 1px solid #c9d2df;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.poule-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.poule-preview-header-title {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.poule-preview-header-meta {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.05;
    white-space: nowrap;
}

.poule-preview-avg {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
}

.poule-preview-avg--low {
    background: #f8d7da;
    color: #721c24;
}

.poule-preview-avg--mid {
    background: #fff3cd;
    color: #856404;
}

.poule-preview-avg--high {
    background: #d4edda;
    color: #155724;
}

.poule-preview-flag {
    font-size: 0.68rem;
    font-weight: 500;
    color: #6c757d;
    background: #eef2f7;
    border: 1px solid #d4dbe6;
    border-radius: 999px;
    padding: 0.02rem 0.35rem;
    white-space: nowrap;
}

.poule-advanced-list {
    border: 0;
    border-radius: 0;
    margin: 0;
}

.poule-advanced-group {
    border: 1px solid #d3dbe7;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.poule-advanced-title {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #344253;
    background: #f2f5f8;
    border-bottom: 1px solid #d3dbe7;
}

.poule-advanced-item {
    padding: 0.35rem 0.5rem;
}

.poule-advanced-handle {
    color: #8a97ab;
    cursor: grab;
}

.poule-advanced-item[data-key="rating"] .poule-advanced-handle {
    cursor: default;
    opacity: 0.35;
}

.poule-advanced-placeholder {
    height: 2rem;
    background: #eef2f7;
    border: 1px dashed #c4cfdd;
}

.startlist-summary-card {
    border: 1px solid #cdd3d5;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, #d6dbdc 0%, #c4cbcd 50%, #b0b8bb 100%);
    box-shadow: 0 2px 6px rgba(22, 31, 50, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: #1b2733;
}

.startlist-summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.startlist-summary-metric {
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    box-shadow: 0 1px 3px rgba(22, 31, 50, 0.08);
}

.startlist-summary-metric--wide {
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.startlist-summary-metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.05;
    color: #1a232f;
    letter-spacing: 0.02em;
}

.startlist-summary-metric-label {
    font-size: 0.76rem;
    color: #3a4656;
    line-height: 1.15;
}

.startlist-summary-panel {
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(22, 31, 50, 0.08);
}

.startlist-summary-panel-label {
    font-size: 0.72rem;
    color: #3a4656;
    margin-bottom: 0.2rem;
}

.startlist-summary-panel-value {
    font-weight: 600;
    color: #1a2733;
    font-size: 0.86rem;
}

.startlist-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.startlist-summary-tag {
    border: 1px solid #e2e6ef;
    border-radius: 999px;
    padding: 0.16rem 0.6rem;
    font-size: 0.72rem;
    color: #2b3646;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(22, 31, 50, 0.06);
}

.max-poule-size-control .btn {
    min-width: 2rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.max-poule-size-control {
    max-width: 140px;
}

.max-poule-size-control .form-control {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.max-poule-size-control input[type="number"] {
    -moz-appearance: textfield;
}

.max-poule-size-control input[type="number"]::-webkit-outer-spin-button,
.max-poule-size-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* «Категории» modal: equal-width name inputs + aligned count columns. */
#categoriesModal .category-row,
#categoriesModal .category-head {
    gap: 0.5rem;
}
#categoriesModal .category-namecol {
    flex: 1 1 auto;
    min-width: 0;
}
#categoriesModal .category-col {
    flex: 0 0 60px;
    width: 60px;
    text-align: center;
    white-space: nowrap;
}
#categoriesModal .category-head .category-col {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}
#categoriesModal .cat-present {
    color: #1f9d55;
    font-weight: 600;
}

/* Tournament-formula modal «Макс в группе»: keep only the +/- buttons, hide the
   native number-spinner arrows that appear on focus. */
.tf-max-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.tf-max-input[type="number"]::-webkit-outer-spin-button,
.tf-max-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.startlist-settings-panel {
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(22, 31, 50, 0.08);
}


.dash {
    height: 30px;
    background: repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, transparent 3px, transparent 8px) !important;
}


#compStartList th i {
    margin-left: 5px;
}


#compStartList th:first-child i {
    display: none;
}

.sl-num {
    cursor: pointer;
}

/* Numeric SR (rating) entry mode toggle */
.startlist-table .sl-rating-input {
    display: none;
    box-sizing: border-box;
    width: 2.4em;
    height: 2.2em;
    text-align: center;
    padding: 0 0.15em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 0.9em;
    -moz-appearance: textfield;
    appearance: textfield;
}
.startlist-table .sl-rating-input::-webkit-outer-spin-button,
.startlist-table .sl-rating-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.startlist-table .sl-rating-input:focus {
    border-color: #18BC9C;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 188, 156, 0.25);
}
.startlist-table.sr-input-mode .sl-rating-input {
    display: inline-block;
}
.startlist-table.sr-input-mode .sl-num-text {
    display: none;
}
.startlist-table.sr-input-mode td.sl-num {
    cursor: default;
    text-align: center;
    padding: 0.4rem 0.15rem;
}

/* ZenFencing-locked startlist cells (ФИО + дата рождения) */
.startlist-table td.sl-locked {
    color: #6c757d;
    background-color: #f6f7f9;
    cursor: not-allowed;
}
/* Presence highlight must win over the locked-cell background. */
.startlist-table .startlist-class.present td.sl-locked {
    background-color: #d2d9df;
}
/* Small "z" badge marking ZenFencing-sourced athletes (replaces the lock icon). */
.zen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    background: #288b8a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
}

/* Reserve exactly one line for the search status so it never shifts the layout
   below it (single line, no wrap, ellipsis on overflow). */
.zen-search-status {
    height: 1.4rem;
    line-height: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search input clear (×) button */
.zen-input-wrap .form-control {
    padding-right: 2rem;
}
.zen-clear-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #adb5bd;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.zen-clear-btn:hover {
    color: #6c757d;
}

/* ZenFencing add-athletes modal — fixed two-column layout so the modal does
   not resize/jump as results arrive or athletes are picked. */
.zen-cols {
    margin-left: -8px;
    margin-right: -8px;
}
.zen-col {
    padding-left: 8px;
    padding-right: 8px;
}
.zen-col-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 4px;
}
.zen-search-results,
.zen-staged-list {
    height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: #fff;
}
.zen-search-results .zen-result-item {
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.zen-search-results .zen-result-item.zen-added {
    opacity: 0.65;
    cursor: default;
    background: #f3faf8;
}
.zen-results-empty,
.zen-staged-empty {
    padding: 10px;
}
.zen-staged-item {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
}

#compStartList .ui-sortable-placeholder {
    visibility: visible !important;
    background-color: #e8f4fc;
    border: 1px dashed #18BC9C;
}

#compStartList .ui-sortable-helper {
    display: table;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

#compStartList .ui-sortable-helper td {
    display: table-cell;
}

.tireur::after {
    content: attr(data-staus);
    /* content: '\00a0' attr(data-staus)'\00a0';*/
    background: none;
    position: absolute;
    line-height: 40px;
    margin-left: 7px;
}



.page-title-color {
    width: 50px;
    height: 50px;
    margin-right: 12px;
}

.scolor {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin: 3px;
    margin-bottom: 0px;
}

#compColor {
    width: 85px;
    display: inline-block;
    margin-right: 10px;
}

.color-picker {
    display: inline-block;
}

.poule-table {
    margin-bottom: 0;
}

.poule-table th,
.poule-class-table th,
.result-table th,
.startlist-table th {
    background: linear-gradient(180deg, #717171 0%, #3f3f3f 50%, #363636 100%);
    color: #fff;
    border-top: 0;
    border-bottom: 0 !important;
}

.poule-table tr td:nth-last-child(-n+6) {
    background: #f5f5f5;
}

.poule-table tr th:last-child {
    /* */
}

.poule-table td,
.poule-table th {
    padding: 0.5em;
    min-width: 3em;
}

.poule-table td:nth-child(2) {
    width: 10em;
}

.poule-table td.pmatch-hover,
.poule-table td.pmatch.pmatch-hover,
.poule-table td.prenomnom.pmatch-hover,
.poule-table td.tn.pmatch-hover {
    background-color: #d5ebe6 !important;
}



.poule-highlight,
.poule-highlight td {
    background-color: #d5ebe6 !important;
    
}

.match li.pmatch-hover {
    background-color: #d5ebe6 !important;
    border-color: #2bbbad !important;
    box-shadow: inset 0 0 0 1px rgba(43, 187, 173, 0.4);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.poule #toggleBoutsBtn {
    margin-bottom: 5px;
}

th:first-child,
td:first-child {
    position: sticky;
    left: 0px;
}


.startlist-table>thead,
.startlist-table th:first-child,
.startlist-table td:first-child {
    position: relative;
    left: unset;
    top: unset;
}


.poule-table .prenomnom:after {
    content: attr(data-org);
    color: #ababab;
    display: block;
    font-size: 10px;
    line-height: 0;
    margin-top: 5px;
}



td:first-child {
    background: #4c4c4c;
    color: #fff;
}

.team-participants-table td.team-rank-cell {
    background: #fff;
    color: inherit;
    cursor: text;
    text-align: center;
}

/* Captains viewing a match that isn't theirs: dim it to signal "read-only" but keep
   it clickable so they can still open the modal and watch the match. */
.team-match-locked {
    opacity: 0.7;
    filter: grayscale(30%);
}

.team-match-editable {
    cursor: pointer;
}

.trm-rosters-row {
    position: relative;
}

.trm-swap-display {
    position: absolute;
    left: 50%;
    top: 1px;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #adb5bd;
    background: #fff;
    color: #495057;
    z-index: 5;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.trm-swap-display:hover {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

.trm-swap-display:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.35);
}

.trm-swap-display i {
    font-size: 14px;
    line-height: 1;
}

.trm-ready-col > h6 {
    border: 1px solid #cdd3db;
    border-radius: 6px;
    background: #f8f9fa;
    padding: 6px 10px;
    margin-bottom: 8px;
    text-align: center;
}

/* Lineup roster items: flex layout so the per-fencer +/- diff badge
   parks on the right edge and never overlaps the name. */
.trm-lineup-a .list-group-item,
.trm-lineup-b .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.trm-fencer-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.trm-fencer-diff {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.25em 0.55em;
    border-radius: 0.55em;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.trm-fencer-diff-pos { background: #d4edda; color: #155724; }
.trm-fencer-diff-neg { background: #f8d7da; color: #721c24; }
.trm-fencer-diff-zero { background: #e9ecef; color: #495057; }

/* Team startlist tabs split: each tab-pane container holds the full partial output
   (both participants + teams cards) so a single AJAX update of the partial keeps
   both panes in sync. CSS hides the irrelevant card per pane. */
.tab-startlist-participants .team-startlist-teams,
.tab-startlist-teams .team-startlist-participants {
    display: none;
}

/* Imported participants are read-only: visual cue that name/place/region/club
   were copied from the source competition and cannot be edited here. */
.team-participants-table tbody tr.imported-row td.sl-rank,
.team-participants-table tbody tr.imported-row td.sl-lastname,
.team-participants-table tbody tr.imported-row td.sl-firstname,
.team-participants-table tbody tr.imported-row td.sl-middlename,
.team-participants-table tbody tr.imported-row td.sl-prenomnom,
.team-participants-table tbody tr.imported-row td.sl-region,
.team-participants-table tbody tr.imported-row td.sl-org {
    background: #f5f5f5;
    color: #555;
    font-style: italic;
}
.team-participants-table tbody tr.imported-row td.sl-button .fa-lock {
    color: #b0b0b0;
}

/* Participants table: add the left border (Bootstrap's .table only paints horizontal
   row dividers, no outer borders). The right column already inherits a border from
   the action column, so the visual asymmetry is the missing left edge. */
.team-participants-table {
    border-left: 1px solid #dee2e6;
}

/* Empty-state row inside the participants table — neutralise the global
   `td:first-child { background:#4c4c4c; color:#fff }` rule so the placeholder
   message reads on a normal table-row background, left-aligned. */
.startlist-empty-row td,
.startlist-empty-row td:first-child {
    background: #fff !important;
    color: #6c757d !important;
    text-align: left !important;
    padding: 0.8rem 1rem;
}

/* Team cards — visually distinct on the white parent background. Soft tint +
   small drop-shadow so each card reads as its own unit without being heavy. */
.team-card {
    background: #f5f7fa;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Seed place: small numeric square to the LEFT of the team name. The number
   is the team's rank after sorting by teamSeed (or its committed bracketRank
   once the bracket is created). */
.team-place-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1.9em;
    height: 1.9em;
    padding: 0 0.35em;
    border-radius: 4px;
    background: #2c3e50;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

/* Pending variant — shown when a team isn't yet eligible for seeding (missing
   present flag or incomplete squad). Hollow square with a × icon makes it
   visually distinct from the numbered place badge. */
.team-place-badge-pending {
    background: transparent;
    color: #adb5bd;
    border: 1px dashed #adb5bd;
    font-weight: 400;
}
.team-place-badge-pending i {
    font-size: 0.75rem;
}

/* Seed-sum badge (Σ N) — replaces the old badge-info. Different colour from
   the place badge so the two readings are visually distinct. */
.team-seed-sum-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.25em 0.55em;
    border-radius: 12px;
    background: #ede7f6;
    color: #4527a0;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.team-card .team-name-input,
.team-card .team-org-input,
.team-card .team-region-input {
    background: #fff;
}

/* Members table inside team card. Header gets a slightly darker tint than
   the card body so it reads as a "header strip". */
.team-members-table thead th {
    background: #e2e7ee;
    border-bottom: 1px solid #cbd2db;
    color: #111 !important;
    font-weight: 600;
}

/* "Состав не выбран" placeholder — white background, left-aligned, neutralise
   the global td:first-child dark rule. */
.team-members-empty-row td,
.team-members-empty-row td:first-child {
    background: #fff !important;
    color: #6c757d !important;
    text-align: left !important;
    padding: 0.5rem 0.75rem;
}

/* Member rank cell — neutralise the global dark `td:first-child` so it blends
   with the rest of the row (transparent over the card's tinted background).
   The number itself sits in a small bordered badge for visual emphasis. */
.team-members-table .team-member-rank-cell,
.team-members-table .team-member-rank-cell:first-child {
    background: transparent !important;
    color: inherit !important;
    text-align: center !important;
    padding: 0.25rem 0.4rem !important;
    width: 2.6em;
}
.team-member-rank-badge {
    display: inline-block;
    min-width: 1.7em;
    padding: 0.1em 0.4em;
    border: 1px solid #cbd2db;
    border-radius: 4px;
    background: #f5f7fa;
    color: #495057;
    font-weight: 600;
    line-height: 1.2;
}

/* Custom autocomplete dropdown for adding members to a team — replaces the
   native <datalist>. Sits as a positioned block under the full-width input
   row so suggestions don't drift off to the side. */
.team-member-add-wrap {
    position: relative;
}
.team-member-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cbd2db;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-top: 2px;
}
.team-member-suggest-item {
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-size: 0.875rem;
}
.team-member-suggest-item:hover,
.team-member-suggest-item:focus {
    background: #eef2f7;
}

.trm-bouts-table .trm-score-input-bold {
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.4;
    width: 40px;
    max-width: 40px;
    padding: 0.15rem 0.3rem;
    margin: 0 auto;
    display: inline-block;
}

.trm-ready-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.trm-ready-name-row > strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.trm-ready-sr:empty {
    display: none;
}

.trm-ready-sr:not(:empty) {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    color: #fff;
    background: #6c757d;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.trm-sc-frame {
    border: 1px solid #cdd3db;
    border-radius: 8px;
    padding: 14px 16px 12px;
    background: #eef1f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Final-match summary panel that takes over the score widget slot after bout 9 finishes. */
.trm-score-summary {
    background: linear-gradient(135deg, #eef1f3 0%, #d5d9de 50%, #c7ccd3 100%) !important;
    border: 1px solid #b8bdc4 !important;
}
/* Two-row grid: names on top, scores + colon on bottom (so the colon sits at
   score level, not floating between team names). Uses display:contents on the
   .trm-summary-side wrappers so their children become grid items directly. */
.trm-summary-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 4px;
    padding: 8px 0;
}
.trm-summary-side {
    display: contents;
}

.trm-summary-left  .trm-summary-team-name { grid-column: 1; grid-row: 1; }
.trm-summary-left  .trm-summary-score      { grid-column: 1; grid-row: 2; }
.trm-summary-right .trm-summary-team-name { grid-column: 3; grid-row: 1; }
.trm-summary-right .trm-summary-score      { grid-column: 3; grid-row: 2; }
.trm-summary-vs    { grid-column: 2; grid-row: 2; }

/* Names span their full track and inner text aligns toward centre. */
.trm-summary-left  .trm-summary-team-name { text-align: right; }
.trm-summary-right .trm-summary-team-name { text-align: left; }

/* Score badges (inline-block grid items) align toward the centre column. */
.trm-summary-left  .trm-summary-score { justify-self: end; }
.trm-summary-right .trm-summary-score { justify-self: start; }

.trm-summary-team-name {
    font-weight: 700;
    font-size: 1.35rem;
    color: #252525;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trm-summary-score {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
    min-width: 1.6em;
    text-align: center;
}
.trm-summary-score.trm-summary-winner {
    background: #E74C3C;
    color: #fff;
}
.trm-summary-score.trm-summary-loser  {
    background: #2C3E50;
    color: #fff;
}
.trm-summary-vs {
    font-size: 2rem;
    font-weight: 700;
    color: #495057;
    line-height: 1;
    align-self: center;
}

/* ── Top line: card slots + centered "Бой N / до M" badge ── */
.trm-sc-topline {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.trm-sc-slots-wrap {
    min-height: 1.6em;
    display: flex;
    align-items: center;
}
.trm-sc-left-slots { justify-content: flex-end; }
.trm-sc-right-slots { justify-content: flex-start; }

.trm-sc-bout-badge {
    background: #fff;
    border: 1px solid #cdd3db;
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 100px;
    text-align: center;
    line-height: 1.1;
}
.trm-sc-bout-badge .trm-sc-bout-num {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #212529;
    margin: 0;
}
.trm-sc-kicker {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    line-height: 1.2;
}

/* ── Main line: two fighter boxes with score + ± buttons, ":" in between ── */
.trm-sc-lineup {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
}
.trm-sc-side {
    background: #fff;
    border: 1px solid #cdd3db;
    border-radius: 6px;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.trm-sc-side .trm-sc-kicker {
    color: #343a40;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trm-sc-score-box {
    align-self: center;
    min-width: 2.8em;
    padding: 2px 12px;
    font-size: 2.6rem;
    font-weight: 200;
    line-height: 1;
    color: #212529;
    background: transparent;
    border: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.trm-sc-btns {
    display: flex;
    gap: 0;
    width: 100%;
}
.trm-sc-btns .btn {
    flex: 1 1 50%;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
}
.trm-sc-btns .btn + .btn { margin-left: 4px; }

.trm-sc-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 300;
    color: #adb5bd;
    line-height: 1;
}

/* ── Footer: finish-bout button ── */
.trm-sc-footer {
    text-align: center;
    border-top: 1px solid #dde3e9;
    padding-top: 10px;
}
.trm-sc-footer {
    position: relative;
}
.trm-sc-footer .btn {
    padding: 0.4rem 1.4rem;
    font-weight: 600;
}
.trm-sc-footer .trm-sc-cancel-bout {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.4rem 0.7rem;
    line-height: 1;
    font-weight: 400;
}

/* Mobile: ≤576px — pack the modal tighter to use screen real estate efficiently. */
@media (max-width: 576px) {
    #teamRelayModal .modal-dialog-centered {
        margin: 0.25rem auto;
        max-width: calc(100% - 0.5rem);
        min-height: calc(100% - 0.5rem);
    }
    #teamRelayModal .modal-content {
        border-radius: 6px;
    }
    #teamRelayModal .modal-body {
        padding: 0.5rem;
    }
    #teamRelayModal .modal-header,
    #teamRelayModal .modal-footer {
        padding: 0.5rem 0.75rem;
    }
}

.trm-active-bout {
    background-color: #a7f1db !important;
}

.trm-active-bout td {
    border-bottom: 4px solid #18bc9c !important;
}

/* Match info block (matchKey / piste / time / referee). Sits under the modal
   header for the whole pre-finished lifecycle; collapses behind the (i) toggle
   in the title once the match commits. */
.trm-info-block {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    align-items: center;
    background: #f5f7fa;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.4;
}
.trm-info-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.trm-info-match-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #2c3e50;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Weapon-hand badge in team rosters: single Cyrillic letter (Л / П) sitting at
   the right edge of each athlete row. Subtle but readable; coloured to make
   the lefty count obvious to the judge during the draw stage. */
.trm-hand-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.trm-hand-left,
.trm-hand-right {
    background: #eef2f7;
    color: #5d6d7e;
}
.trm-info-icon {
    color: #95a5a6;
    width: 14px;
    text-align: center;
    font-size: 12px;
}
.trm-info-value {
    color: #2c3e50;
    font-weight: 600;
}
.trm-info-toggle {
    color: #95a5a6;
    line-height: 1;
    vertical-align: baseline;
}
.trm-info-toggle:hover,
.trm-info-toggle:focus {
    color: #18bc9c;
    text-decoration: none;
}

@media (max-width: 576px) {
    .trm-info-block {
        gap: 4px 12px;
        padding: 6px 10px;
        font-size: 12px;
    }
}

.trm-active-bout td,
.trm-active-bout .trm-hit-cell {
    color: #212529 !important;
    background: transparent !important;
}

.trm-hit-cell {
    font-size: 1.1rem;
    width: 34px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.4;
    vertical-align: middle !important;
}

.trm-active-bout .trm-hit-cell {
    color: #6c757d !important;
}

.trm-score-text {
    font-size: 1.25rem;
    font-weight: 800;
    display: inline-block;
    text-align: center;
    line-height: 1.4;
    border: 1px solid #bbbb;
    padding: 2px 6px;
    width: 40px;
    height: 34px;
    border-radius: 4px;
    background-color: #fff;
}

.trm-bouts-table {
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    table-layout: fixed;
}

/* Symmetric layout via <colgroup>. Per side:
   name + 40 (hit) + 40 (score) + 7.5 (half of bout#) = 50%
   → name = 50% - 87.5px. Total numeric = 175px = 100% - 2 × name.
   <col> widths are the canonical way to drive table-layout: fixed. */
.trm-bouts-table .trm-col-name { width: calc(50% - 84px); }
.trm-bouts-table .trm-col-hit  { width: 34px; }
.trm-bouts-table .trm-col-score { width: 40px; }
.trm-bouts-table .trm-col-bout { width: 20px; }

/* Tighten paddings on hit/bout cells so content sits flush in the narrow widths. */
.trm-bouts-table tbody td:nth-child(2),
.trm-bouts-table tbody td:nth-child(6) {
    padding: 0 !important;
}

.trm-bouts-table tbody td:nth-child(1),
.trm-bouts-table tbody td:nth-child(7) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.trm-bouts-table tbody td:nth-child(1) {
    text-align: right;
}

.trm-bouts-table td {
    vertical-align: middle !important;
    border: 0;
    border-top: 1px solid #eef0f3;
}

.trm-bouts-table tbody tr:first-child td {
    border-top: 0;
}

/* Neutralise the global `td:first-child { background: #4c4c4c }` rule for this table —
   bout-number now lives in the centre and the first cell is just a regular team-name col. */
.trm-bouts-table tbody td:first-child {
    background: transparent;
    color: inherit;
    position: static;
}
.trm-bouts-table thead th:first-child {
    position: static;
}

.trm-bouts-table thead th {
    border: 0;
    background: #ebebeb !important;
    color: #212529;
    font-weight: 600;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.trm-bouts-table thead tr {
    border-bottom: 2px solid #dee2e6;
}

/* Bout-number cell — narrow column between the two score cells, hosts a tiny badge.
   Together with score-cell-left/right padding overrides this brings the two cumulative
   scores visually close to the central badge instead of spread out. */
.trm-bouts-table .trm-bout-num {
    padding: 0 !important;
    text-align: center !important;
     width: 20px;
}

.trm-bouts-table .trm-score-cell-left {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.trm-bouts-table .trm-score-cell-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.trm-bout-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 16px;
    border-radius: 3px;
    background: #e9ecef;
    color: #989fa6;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.trm-active-bout .trm-bout-badge {
    background: #18bc9c;
    color: #fff;
}

.trm-score-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.trm-score-input::-webkit-outer-spin-button,
.trm-score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.trm-row-next {
    cursor: pointer;
}

.trm-row-next:hover {
    background-color: #e9ecef !important;
}

.trm-row-locked {
    cursor: default;
    color: #6c757d;
}

.trm-card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    height: 1.6em;
    padding: 0 0.3em;
    margin: 0 1px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1.5px solid #000;
    border-radius: 3px;
    line-height: 1;
    vertical-align: middle;
    background: transparent;
}

button.trm-card-chip {
    cursor: pointer;
}

button.trm-card-chip:hover {
    opacity: 0.85;
}

.trm-card-chip-outline {
    opacity: 0.55;
}

.trm-card-chip-outline:hover {
    opacity: 1;
}

.trm-card-chip-disabled {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
}

.trm-card-chip-disabled:hover {
    opacity: 0.2 !important;
}

.trm-card-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.trm-card-group {
    display: flex;
    gap: 3px;
}


/* Card chips rendered inline next to fencer names in the bouts table. Fixed pixel size
   so regular cards (no glyph) and P-cards (with "P" glyph) look identical — no sizing
   drift from content-based shrink-wrap, and the base .trm-card-chip rules (inline-flex
   with 1.8em min-width) can't bleed through. */
.trm-bouts-body .trm-card-chip-filled {
    display: inline-block !important;
    width: 12px !important;
    height: 14px !important;
    min-width: 12px !important;
    padding: 0 !important;
    margin: 0 1px !important;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 14px !important;
    border-width: 1px !important;
    border-radius: 2px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box !important;
    overflow: hidden;
}

.trm-sc-left-slots .trm-card-slots {
    justify-content: flex-end;
}

.trm-sc-right-slots .trm-card-slots {
    justify-content: flex-start;
}

.team-match-overlay {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: #ffc107;
    color: #212529;
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    z-index: 2;
    pointer-events: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* On wider screens the piste/time block (.bout-info, width 85px, right:5px)
   occupies the right edge of a team match cell. Park the team-state overlay
   (Жеребьёвка / Расстановка / Выбор стороны / Идёт …) immediately to the LEFT
   of that block so both are visible side-by-side. */
@media (min-width: 577px) {
    .team-direl .team-match-overlay {
        right: 95px;
    }
    /* On wide viewports the icon next to the text is decorative — keep the
       label as the primary information. */
    .team-direl .team-match-state-overlay .tms-icon {
        display: none;
    }
}

/* Mobile: text labels (Жеребьёвка / Расстановка / Выбор стороны) take too much
   horizontal space next to the piste/time block. Replace them with a single
   icon that sits in the same "left of bout-info" position. */
@media (max-width: 576px) {
    .team-direl .team-match-overlay {
        right: 95px;
        padding: 4px 6px;
    }
    .team-direl .team-match-state-overlay .tms-label {
        display: none;
    }
    .team-direl .team-match-state-overlay .tms-icon {
        font-size: 14px;
        line-height: 1;
    }
}

.team-match-overlay small {
    font-size: 11px;
    line-height: 1;
}

.team-match-dice-overlay i {
    font-size: 16px;
}

.team-match-overlay.badge-info {
    background: #17a2b8;
    color: #fff;
}

.team-match-overlay.badge-success {
    background: #28a745;
    color: #fff;
}

.team-match-overlay.badge-warning {
    background: #ffc107;
    color: #212529;
}

.tireur td:first-child,
th {
    cursor: pointer;
}

thead {
    position: sticky;
    top: 0px;
}

.s,
.tn,
.direl .match {
    cursor: pointer;
}

.poule-table tr {
    height: 3em;
}

.poule-table .v {
    font-weight: bold;
    background-color: #cfcfcf;
}

.poule-table .prenomnom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poule-table tr td:nth-child(2),
.poule-table tr th:nth-child(2) {
    text-align: left;
}

.poule-table .Q {
    background: #4c4c4c !important;
    color: #9e9e9e;
    font-style: italic;
}

.poule-table .P {
    white-space: nowrap;
    overflow: hidden;
    max-width: 3em;
}

#changeResult .tirn1,
#changeResult .tirn2 {
    font-weight: bold;
    line-height: 1.5;
}

#tir2res,
#tir1res {
    min-width: 2.1em;
    vertical-align: top;
}

/*
.modal-footer .alert {
    display: none;
}
*/

#changeResult .row {
    padding: 0.2em 0;
    min-height: 3.2em;
}

#changeResult .modal-title {
    font-weight: bold;
    text-transform: uppercase;
}

#changeResult .row:first-child {
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.5rem;
}

#tir1resbtn label,
#tir2resbtn label {
    padding: 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
}

#mathes {
    margin-left: 0;
}

#mathes .match {
    margin-bottom: 1.2rem;
}

.tirres1,
.tirres2 {
    font-size: 1em;
    min-width: 2.1em;
}

/* Intermediate (live) score on bracket cells — running cumulative shown while the match
   is ready / in-progress but not yet committed. Only background/color/border differ from
   the final V/D badge; font-size, weight, padding, and min-width are inherited from
   `.badge` + `.tirres1/2` so the number renders identically to the committed result. */
.tirres-live {
    background: linear-gradient(to bottom, #c4c9ce 0%, #f1f3f5 100%) !important;
    color: #2d3238 !important;
    border: 1px solid #8a8f95 !important;
    align-self: center;
}

.el-range {
    width: 10rem;
    display: inline;
}

.el-range span {
    width: 10rem;
    font-weight: bold;
}

/*
.direl .match::after  {
    content: attr(data-piste);
    display: block;
    font-size: 0.9em;
    color: gray;
    margin-bottom: 5px;
    position: relative;
    top: 50%;
    z-index: 1;
    right: 7px;
    width: 70px;
    border: 1px solid #000;
    height: 0;

}
    */

.bout-info {
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 10;
    height: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2px;
    line-height: 1;
    transform: translateY(-50%);
    width: 85px;
    max-width: 85px;
    min-width: 85px;
    background: #d6dadf;
    color: #000000;
    border: 1px solid #8d8d8d;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
}

/* Read-only mode (regular referees): piste/time/referee blocks display as
   plain info, not as clickable controls. Set on .bout-info AND on
   .match-ref-floating by applyRoleVisibility for users without `allBouts`. */
.bout-info-readonly,
.bout-info.bout-info-readonly {
    cursor: default;
}

/* Empty bout-info placeholder: rendered for admins on bracket cells that
   have no piste/time/ref assigned yet, so they can pre-schedule the bout
   BEFORE the upstream match decides who plays here. Visually muted with a
   dashed border to suggest "click to fill". */
.bout-info.bout-info-empty {
    background: transparent;
    border-style: dashed;
    border-color: #b0b6bd;
    color: #8a9099;
    box-shadow: none;
}
.bout-info-placeholder {
    font-size: 0.65rem;
    color: #8a9099;
    font-style: italic;
    white-space: nowrap;
}
.bout-info-placeholder .fas {
    font-size: 0.65rem;
    margin-right: 2px;
}

.bout-info-line {
    font-size: 0.7rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.bout-info-line:not(:last-child) {
    margin-bottom: 2px;
}

/* Сбрасываем наследование для внутренних элементов */
.bout-info .b-piste,
.bout-info .b-start,
.bout-info .b-duration,
.bout-info .b-ref {
    background: none;
    /* Убираем фон */
    border: none;
    /* Убираем границы */
    padding: 0;
    /* Убираем отступы */
    color: inherit;
    /* Оставляем цвет текста таким же */
    font-size: inherit;
    /* Наследуем размер шрифта */
    display: inline;
    /* Сохраняем строчный формат */
}

.match-ref-floating {
    position: absolute;
    left: 12px;
    right: 95px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    line-height: 1.1;
    padding: 2px 6px;
    background: rgba(240, 242, 245, 0.9);
    border-radius: 6px;
    color: #2c3238;
    pointer-events: none;
    border: 1px solid #c7cdd4;
}

.match-ref-floating .fas {
    color: #6c757d;
    font-size: 0.7rem;
}

.match-ref-floating .b-ref {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.4em;
    white-space: normal;
}





.direl .col {
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 3rem 16px 2rem;
    border-bottom: 1px solid #dcdcdc;
}

.direl ul {
    margin-bottom: 1rem;
}

.direl ul li,
.match li {
    padding: 0.5rem 0.6rem;
    min-height: 2.5rem;
}

#addPoule {
    margin-bottom: 1rem;
}

.table-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #bdbdbd 0%, #eaedef 1%, #c9ced4 100%);
    color: #252525;
    padding: 0.5rem;
    padding-left: 1.5rem;
    font-weight: bold;
    border-left: 1px solid #505459;
    border-right: 1px solid #505459;
}

.bg-secondary2 {
    background: linear-gradient(135deg, #eef1f3 0%, #d5d9de 50%, #c7ccd3 100%) !important;
    border: 1px solid #b8bdc4;
}

.bg-light {
    background-color: #e9eef1 !important;
}

.btn-black {
    background-color: #000;
}


.btn-info {
    color: #fff;
    background-color: #18BC9C;
    border-color: #18BC9C;
}

/* линии табло от слотов */
.direl .match-slot {
    position: relative;
}

.direl .match-slot::after {
    content: '';
    position: absolute;
    width: 14px;
    height: calc(50% + 0.25rem);
    right: 12px;
    background: none;

    z-index: 3;
}

/* вниз от центра */
.direl .match-slot:nth-child(2n-1)::after {
    top: 50%;

    border-right: 1px solid #000;
    border-top: 1px solid #000;
    border-radius: 0 5px;
}

/* вверх от центра */
.direl .match-slot:nth-child(2n)::after {
    bottom: 50%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-radius: 5px 0;
}

/* горизонталь к следующей колонке в месте стыка пары */
.direl .match-slot:nth-child(2n)::before {
    content: '';
    position: absolute;
    height: 0;
    width: 14px;
    right: -1px;
    top: 0;
    border-top: 1px solid #000;
    z-index: 3;
}

/* не рисуем линии на финальной колонке */
.direl .col:last-child .match-slot::before,
.direl .col:last-child .match-slot::after {
    content: none;
}

#delResult {
    margin-left: auto;
}

#changeResult .close {
    margin-left: 0;
}

.match .badge {
    height: 1.4rem;
    margin-left: auto;
}

.match b {
    margin-right: 0.2rem;
}

.direl .match li {
    align-items: center;
}

.direl .match .tirnom {
    align-self: center;
        line-height: 1;
    flex: 1 1 auto;
}

.der-seed-rank {
    color: #6c757d;
    font-size: 0.85em;
    font-weight: 600;
    margin-right: 0.15em;
}



.direl .match::after {
    content: attr(data-stage);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 55px;
    font-size: 1.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    user-select: none;
}

/* Переработанный блок прямого выбывания */
.direl {
    --match-height: 74px;
    --match-gap: 16px;
    overflow: visible;
}

.direl-headline {
    gap: 0.75rem;
    flex-wrap: wrap;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 6;
    background: #ffffff;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    box-shadow: 0 8px 5px -5px rgba(255, 255, 255, 0.95), 0 16px 20px -18px rgba(255, 255, 255, 0.9);
}

.direl-stage-nav {
    --direl-hint-width: 32px;
    --direl-nav-side-width: calc(var(--direl-hint-width) + 32px);
    display: grid;
    grid-template-columns: var(--direl-nav-side-width) minmax(0, 1fr) var(--direl-nav-side-width);
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: linear-gradient(180deg, #d1d7df 0%, #bcc4ce 100%);
    border: 1px solid #a8b2bd;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    z-index: 5;
}

.direl-stage-nav.is-collapsed {
    display: none;
}

.direl-nav-side {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    width: var(--direl-nav-side-width);
}

.direl-nav-side-prev {
    justify-content: flex-end;
}

.direl-nav-side-next {
    justify-content: flex-start;
}

.direl-nav-btn {
    width: 100%;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid #9da6b1;
    background: linear-gradient(180deg, #ffffff 0%, #e9edf2 100%);
    color: #1e2b38;
    transition: all 0.15s ease;
    box-shadow: 0 4px 10px rgba(26, 37, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.direl-nav-btn:hover {
    background: linear-gradient(180deg, #ffffff 0%, #dce2ea 100%);
    border-color: #8893a1;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26, 37, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.direl-nav-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(26, 37, 48, 0.2);
}

.direl-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.direl-stage-meta {
    text-align: center;
    min-width: 180px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
}

.direl-stage-current-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1f2d3d;
}

.direl-stage-visible {
    font-weight: 600;
    font-size: 0.84rem;
    color: #7f8f9b;
    line-height: 1.2;
}

.direl-stage-prev-hint,
.direl-stage-next-hint {
    font-size: 0.78rem;
    color: #324150;
    font-weight: 600;
    display: inline-block;
    flex: 0 0 var(--direl-hint-width);
    width: var(--direl-hint-width);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.direl-stage-prev-hint {
    text-align: center;
}

.direl-stage-next-hint {
    text-align: center;
}

.direl-stage-prev-hint.is-hidden,
.direl-stage-next-hint.is-hidden {
    visibility: hidden;
}

.direl-stage-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.direl-stage-track {
    margin-top: 1rem;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    --direl-visible: 4;
    gap: 0;
    align-items: stretch;
    height: var(--track-height, auto);
    transition: transform 0.35s ease, height 0.35s ease;
    will-change: transform, height;
}

.direl-stage-track.tabl-row {
    margin-left: 0;
    margin-right: 0;
}

.direl-stage-col {
    flex: 0 0 var(--direl-col-width, calc(100% / var(--direl-visible)));
    max-width: var(--direl-col-width, calc(100% / var(--direl-visible)));
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: opacity 0.2s ease;
}

.direl-stage-track.tabl-row>.direl-stage-col {
    padding-left: 0;
    padding-right: 0;
}

.direl-stage-col.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.direl-stage-header {
    margin-bottom: 0.75rem;
}

.direl-stage-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 14px;
    font-weight: 700;
    background: linear-gradient(120deg, #e7eef6 0%, #d8e3f0 100%);
    color: #1e2b38;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(30, 43, 56, 0.08);
}

.direl-stage-count {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.direl-matches {
    flex: 1;
    display: grid;
    grid-template-rows: repeat(var(--match-count, 1), 1fr);
    gap: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

.direl-matches .match-slot {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.direl-stage-col .match {
    margin: 0;
    /*border: 1px solid #d9dde3;*/
    border-radius: 10px;
    overflow: visible;
    /*background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
    height: var(--match-height);
    min-height: var(--match-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    width: 100%;
    margin-right: 25px;
}

.direl-stage-col .match li {
    padding: 0.55rem 0.8rem;
}

.direl-stage-col .match.match:has(.match-ref-floating) li:nth-child(2) {
    padding-bottom: 0.1rem;

}

.direl-stage-col .match.match:has(.match-ref-floating) li:nth-child(1) {
    padding-top: 0.1rem;

}

.direl-stage-col .match .badge {
    border-radius: 8px;
    min-width: 2.4rem;
    text-align: center;
}

.direl-stage-col .bout-info {
    right: 8px;
background: #d6dee7;
    border-color: #8699af;

}

/* Direl bracket match cells render as a 2-item list-group; round the 2nd item's bottom
   corners so the cell as a whole has rounded corners. Scope strictly so this doesn't
   bleed onto other list-groups in the app (e.g. team-relay modal lineup rosters). */
.direl-stage-col .match .list-group-item:nth-child(2),
.team-direl .match .list-group-item:nth-child(2) {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}


.poule .match::after {
    content: "\2192";
    position: absolute;
    top: 35%;
    right: 1px;
}

.poule .match:last-child:after {
    content: " ";
}

.card-body h5,
.match-filter button {
    display: inline;
    margin-right: 0.4rem;
}

.match-filter {
    margin-bottom: 0.5rem;
}

/*
.direl .match:nth-child(1)::before {
    content: '';
    border: 1px solid rgb(0, 241, 93);
    position: absolute;
    height: 0;
    width: 20px;
    left:0;
    top: 50%;

}


.direl .match li:nth-child(1)::after {
    content: '';
    border: 1px solid rgb(0, 241, 93);
    position: absolute;
    height: 0;
    width: 20px;
    right:-20px;
    top: 100%; 
} 
*/





.startlist-class td {
    text-align: left;
    border-right: 1px solid #dee2e6;

}

.direl .tirres1,
.direl .tirres2 {
    font-size: 1em;
    min-width: 2.6em;
}

.tir-class td:nth-child(2) {
    text-align: left;
    min-width: 160px;
}

.poule-class .progress {
    margin-bottom: 1rem;
}

.main {
    min-height: calc(100vh - 90px);
}

.online-list {
    max-width: 900px;
    margin: 2.5em auto;
    padding: 1.25rem 1.5rem 1.5rem;
    background: radial-gradient(circle at 85% 18%, rgba(93, 173, 226, 0.12), transparent 40%), radial-gradient(circle at 15% 12%, rgba(193, 55, 58, 0.08), transparent 25%), #f5f7fa;
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);
    text-align: left;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.online-list::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 75% 20%, rgba(93, 173, 226, 0.18), transparent 38%), radial-gradient(circle at 25% 30%, rgba(246, 55, 58, 0.22), transparent 20%);
    filter: blur(60px);
    opacity: 0.6;
    animation: onlineGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.online-list::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(193, 55, 58, 0.08) 25%, rgba(93, 173, 226, 0.08) 50%, rgba(255, 255, 255, 0) 75%, rgba(193, 55, 58, 0.08) 100%);
    background-size: 200% 200%;
    mix-blend-mode: screen;
    opacity: 0.5;
    animation: onlineSweep 7s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.online-list > * {
    position: relative;
    z-index: 1;
}

.online-list-outer {
    padding-left: 10px;
    padding-right: 10px;
}

.online-list h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f3347;
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.online-list .list-head {
    background: linear-gradient(135deg, #4f5a5d 0%, #667375 50%, #7b8a8b 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 14px;
    padding: 0.85rem 0.5rem;
    box-shadow: 0 12px 30px rgba(31, 51, 71, 0.35);
    margin-bottom: 0.8rem;
    flex-wrap: nowrap;
}

.online-list .list-head [class*="col-"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.online-list .list-head .col-6,
.online-list .list-head .col-7,
.online-list .list-head .col-3 {
    justify-content: flex-start;
}

.online-list .list-head .col-2.text-right,
.online-list .list-head .col-1.text-right {
    justify-content: flex-end;
}

.online-list .list-head .weapon-header-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: url('/images/weapons.svg') center/contain no-repeat;
    -webkit-mask: url('/images/weapons.svg') center/contain no-repeat;
    opacity: 0.9;
}

.online-list .list-head i {
    font-size: 1.05rem;
    opacity: 0.9;
}

.online-list .comp-row {
    background: #ffffff;
    color: #1f3347;
    border-radius: 14px;
    padding: 0.85rem 0.35rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.online-list .comp-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
    border-color: rgba(31, 51, 71, 0.24);
    background: radial-gradient(circle at 20% 20%, rgba(196, 60, 61, 0.06), transparent 35%), radial-gradient(circle at 80% 10%, rgba(93, 173, 226, 0.08), transparent 32%), #ffffff;
}

.online-list .comp-row::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 12%;
    width: 6px;
    height: 76%;
    border-radius: 12px;
    background: linear-gradient(1deg, #c43c3d, #e74c3c);
    opacity: 0;
    transition: all 0.18s ease;
}

.online-list .comp-row:hover::before {
    left: -2px;
    opacity: 1;
}

.online-list .comp-row:link,
.online-list .comp-row:visited {
    color: inherit;
    text-decoration: none;
}

.online-list .comp-name .comp-name-text {
    font-weight: 700;
    color: #1f3347;
}

.online-list .comp-name .comp-name-text:hover {
    color: #c43c3d;
}

.online-list .comp-place {
    color: #4b5563;
    font-weight: 500;
}

.online-list .comp-status {
    text-align: right;
}

.online-list .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.16rem 0.38rem;
    min-width: 38px;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    border-radius: 999px;
    background: #eef1f5;
    color: #2f3d4f;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.online-list .status-pill i {
    font-size: 0.9rem;
    line-height: 1;
}

.online-list .status-pill.status-new {
    background: #f1f3f5;
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.2);
}

.online-list .status-pill.status-poule {
    background: #fff8e1;
    color: #c27b08;
    border-color: rgba(194, 123, 8, 0.25);
}

.online-list .status-pill.status-pouleclass {
    background: #ffeede;
    color: #c45a08;
    border-color: rgba(196, 90, 8, 0.25);
}

.online-list .status-pill.status-direls {
    background: #fdeaea;
    color: #b12b2d;
    border-color: rgba(177, 43, 45, 0.25);
}

.online-list .status-pill.status-finish {
    background: #e9f7ef;
    color: #1b7942;
    border-color: rgba(27, 121, 66, 0.25);
}

.online-list .status-pill.status-unknown {
    background: #eef1f5;
    color: #2f3d4f;
    border-color: rgba(0, 0, 0, 0.08);
}

.online-list .weapon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #f0f3f7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px rgba(0, 0, 0, 0.05);
}

.online-list .weapon-icon-mask {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: var(--weapon-icon-url) center/contain no-repeat;
    -webkit-mask: var(--weapon-icon-url) center/contain no-repeat;
}

.online-list .status-row {
    color: #6c757d;
    font-weight: 500;
    padding-top: 0.5rem;
}

@media (max-width: 576px) {

    .online-list h1 {
        font-size: 1.4rem;
    }

    .online-list .comp-row {
        padding: 0.8rem 0.25rem;
    }

    .online-list .comp-row [class*="col-"] {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .online-list .comp-place {
        font-size: 0.95rem;
    }

    .online-list .comp-status {
        text-align: center;
    }

    .online-list .status-pill {
        min-width: 36px;
        padding: 0.14rem 0.34rem;
        font-size: 0.68rem;
    }
}

@media (max-width: 400px) {
    .online-list .list-head {
        padding: 0.65rem 0.35rem;
    }

    .online-list .list-head [class*="col-"] {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .online-list .list-head i {
        font-size: 0.95rem;
    }

    .online-list .list-head .weapon-header-icon {
        width: 16px;
        height: 16px;
    }


        .footer-menu .footer-donat {
        order: 2;
        width: auto;
        margin-right: auto;
        margin-left: 0;
        align-self: flex-start;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.05rem 0.5rem;
        text-align: right;
        padding-right: 14px;
    }

}

@keyframes onlineGlow {
    0% {
        transform: translate(-20%, -20%) scale(1);
        opacity: 0.55;
    }
    50% {
        transform: translate(3%, 2%) scale(2);
        opacity: 0.65;
    }
    100% {
        transform: translate(50%, 30%) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes onlineSweep {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 100%;
    }
}

.weapon-male {
    color: #5dade2;
}

.weapon-female {
    color: #f78fb3;
}

.weapon-mix {
}

.weapon-mix .weapon-icon-mask {
    background: linear-gradient(90deg, #f78fb3 0 50%, #5dade2 50% 100%);
}

#newComp {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    margin-top: 2em;
    margin-bottom: 1rem;
}

#logHolder {
    padding: 0;
}

#logHolder table {
    font-size: 0.7rem;
}

#logHolder table tr {
    border-bottom: 1px solid #dcdcdc;
}

#logHolder table td {
    padding: 3px;
}

#logHolder table td:first-child {
    background: #fff;
    color: #000;
}


#shareModal .form-check-input {
    width: 25px;
    height: 25px;
}

#shareModal .form-check-label {
    margin-bottom: 0;
    margin-left: 13px;
    margin-top: 5px;
}

#shareModal .form-check {
    height: 40px;
}


.navbar-brand {
    display: inline-block;

    margin-right: 0.2rem;
    font-size: 1.4rem;
    line-height: inherit;
    white-space: nowrap;
    font-weight: bold;
}


.beta-badge {
    color: #fff;

    font-size: 100%;

}


.datepicker-days td:first-child {
    background: unset;
    color: unset;
}

.datepicker td,
.datepicker th {

    width: 26px;
    height: 26px;

}




.text-page h1 {
    font-size: 3rem;
    font-weight: normal;
}

.text-page h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 1.7rem;
}

.text-page h3 {
    font-size: 1.2rem;
    margin-top: 1.7rem;
}

#sp-top {
    padding: 70px 0px;
}

#sp-top h1 {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 2.2rem;
    color: #18BC9C;

}

#sp-top p {
    font-size: 1rem;
    margin-top: 15px;
    color: #424242;
}

#sp-top .btn {
    padding: 8px 40px;
    font-weight: bold;
    font-size: 1.2rem;
}

.sp-features {
    padding: 70px 0px;
    background: #fff;
}

.single-features {
    display: flex;
    align-items: center !important;
}

.features-icon {
    margin-right: 20px;

}

.features-icon i {
    display: inline-block;
    border-radius: 60px;
    padding: 0.5em 0.6em;
    font-size: 33px;
    background: #18bc9c;
    color: #fff;
    width: 70px;
    height: 70px;
    text-align: center;

}

.main .navbar {
    box-shadow: 0px 1px 8px #b1b1b1;
}




.legal-text {
    text-align: right;
    font-size: 12px;
    line-height: 14px;
    color: #848484;
}

.legal-text a {
    font-weight: bold;
    color: #848484
}



#startform legend {

    margin-bottom: 0;
    font-size: 1.2rem;

    font-weight: 500;
}


.datepicker {
    padding: 0.375rem 0.75rem;
}


#sp-top {
    background-size: 400% auto;
    background-position: 100% 50%;
    background-image: linear-gradient(63deg, #f5f5f5 0%, #e0e0e0 25%, #f2f2f2 50%, #f5f5f5 75%, #e0e0e0 100%);
    animation: gradientMotion 60s infinite linear;

}


#pisteModal .modal-dialog {
    max-width: 90%;
    width: 90%
}


#pisteModal .section-title {
    cursor: default;
}

#pisteModal h4.section-title[data-target="#pisteCollapse"],
#pisteModal h4.section-title[data-target="#refereeCollapse"] {
    cursor: pointer;
}

#pisteModal .section-counter {
    font-weight: 600;
    margin-left: .5rem;
    color: #6c757d;
}


.piste-name {
    width: 85px;
}

.edit-piste:hover,
.rotate-piste:hover,
.delete-piste:hover {

    transition: none !important;
    box-shadow: none;
    transform: translateY(-50%);
}


.piste {
    width: 220px;
    height: 40px;
    background-color: #5c5c5c;
    color: #fff;
    display: flex;
    align-items: left;
    justify-content: center;
    position: absolute;
    margin-top: 0px;
    flex-direction: column;
    padding: 0 30px 0 10px;
    box-sizing: border-box;
    transform-origin: center;
}

.rotated-piste {
    height: 220px;
    width: 40px;
    padding: 10px 0 30px 0;

}


.rotated-piste .delete-piste,
.rotated-piste .rotate-piste,
.rotated-piste .edit-piste {

    top: auto;
    padding: 5px 2px;
    transform: none;

}

.delete-piste,
.rotate-piste,
.edit-piste {


    border: none;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 0.8em;
    position: absolute;
    top: 50%;
    height: 25px;
    width: 25px;

    transform: translateY(-50%);


    transition: none !important;
    box-shadow: none;
}

.edit-piste {
    right: 70px;
}

.rotate-piste {
    right: 40px;
}

.delete-piste {
    right: 10px;
}

.isactive-piste {
    position: absolute;
    right: 86px;
    top: 50%;
    background: #CA4445;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
}


.isactive-piste .custom-control-label::before,
.isactive-piste .custom-control-label::after {
    top: 4px;
    left: -20px;
}


#pistemap .piste.inactive {
    opacity: .55;
    filter: grayscale(30%);
    transition: opacity .15s ease;
}

#pistemap .piste.inactive .piste-name {
    text-decoration: line-through;
    opacity: .9;
}



.rotated-piste .edit-piste {
    right: 8px;
    bottom: 70px;
}

.rotated-piste .rotate-piste {
    right: 8px;
    bottom: 40px;
}

.rotated-piste .delete-piste {
    right: 8px;
    bottom: 10px;
}


.rotated-piste .piste-name {
    transform: rotate(90deg);
    top: 40px;
    position: absolute;
    left: -23px;
}


.rotated-piste .isactive-piste {
    right: -8px;
    top: 108px;

}




#pistemap {
    position: relative;
    width: 100%;
    height: 350px;
    border: 1px solid #868686;
    margin-top: 0px;
    padding: 0px;
    overflow: auto;
    background: #eee;
    margin-bottom: 15px;
}


.ref-inactive {
    background-color: #e7e7e7;
}


#addRefBtn {
    margin-bottom: 1rem;
}


.ref-row .custom-control.custom-checkbox .custom-control-label::before,
.ref-row .custom-control.custom-checkbox .custom-control-label::after {
    width: 1.5rem;
    height: 1.5rem;
    top: .05rem;
}


.ref-row .custom-control.custom-checkbox .custom-control-label {
    padding-left: 2.1rem;
    /* чуть больше, чем ширина коробочки */
    line-height: 1.5rem;
    /* чтобы кликабельная зона соответствовала высоте */
}


.ref-row .custom-control-input:checked~.custom-control-label::after {
    background-size: 85% 85%;
}

.ref-row .custom-control {
    margin-right: 4px;
}

.ref-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    z-index: 1050;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 .25rem .25rem;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

.ref-search-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: .9rem;
}

.ref-search-item:hover,
.ref-search-item.active {
    background-color: #007bff;
    color: #fff;
}

.ref-search-item:hover .text-muted,
.ref-search-item.active .text-muted {
    color: rgba(255,255,255,.7) !important;
}

.ref-row {
    display: flex;
    align-items: center;
    position: relative;
}

.ref-row .ref-name-wrap {
    width: 200px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.ref-row .ref-name-wrap .ref-name {
    width: 100%;
    padding: .25rem .5rem;
    font-size: .9rem;
    height: auto;
}

.ref-row .ref-role-wrap {
    width: 110px;
    flex-shrink: 0;
    margin-left: 8px;
}

.ref-row .ref-role-wrap:empty {
    display: none;
}

.ref-row .ref-role-select {
    width: 100%;
    padding: .2rem .4rem;
    font-size: .82rem;
    height: auto;
}

.ref-row .ref-role-label {
    display: inline-block;
    font-size: .82rem;
    padding: .2rem .5rem;
    white-space: nowrap;
}

.ref-row .ref-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 8px;
}

.ref-name-text {
    display: block;
    padding: .375rem 0;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-name-text.ref-inactive {
    color: #999;
    text-decoration: line-through;
}

a.ref-zen-badge,
span.ref-zen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    font-size: .9rem;
    text-decoration: none;
    border-radius: 4px;
}

a.ref-zen-badge {
    cursor: pointer;
}

a.ref-zen-badge:hover {
    background: rgba(40,167,69,.1);
}

a.ref-zen-badge.linked {
    color: #28a745;
}

span.ref-zen-badge.linked {
    color: #343a40;
    cursor: default;
    opacity: .6;
}

span.ref-zen-badge:not(.linked) {
    color: #6c757d;
}

.direl .match.ref-no-edit {
    cursor: default;
    opacity: .6;
}

#boutsToDistribute {
    padding: 1rem;
    margin-bottom: 1rem;
}

#boutsToDistribute .custom-control.custom-checkbox .custom-control-label::before,
#boutsToDistribute .custom-control.custom-checkbox .custom-control-label::after {
    width: 1.25rem;
    height: 1.25rem;
    top: .1rem;
}

#boutsToDistribute .custom-control.custom-checkbox .custom-control-label {
    padding-left: 10px;
    margin: 0;
    width: 75px;
    text-transform: uppercase;
    font-weight: 700;
}


#boutsToDistribute .custom-control.mr-3 {
    margin-right: .5rem;
}


#boutsToDistribute .custom-control.custom-checkbox .custom-control-label:hover::before {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, .15);
}

#distributionControls .dist-time-group .form-control.poule-info-hour,
#distributionControls .dist-time-group .form-control.poule-info-minute {
    width: 3.8rem;
    flex: 0 0 3.8rem;
    /* важно: отключаем растягивание в input-group */
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
}


#distributionDurations .form-control {
    width: 4.2rem;
    flex: 0 0 4.2rem;
    /* важно для .input-group в bootstrap */
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
}

.time-input {
    width: 140px;
}

#distributionDurations .time-input {
    width: 8.4rem;
    flex: 0 0 8.4rem;
}

#distributionDurations .time-input .form-control {
    width: 3.8rem;
    flex: 0 0 3.8rem;
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
}

/* Управление дорожками: не переносить контролы распределения */
#distributionControls .distribution-controls-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

#distributionControls .distribution-controls-simple .ctrl-block {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

#distributionControls .distribution-controls-simple .ctrl-block:first-child {
    margin-right: 40px;
}

#distributionControls .distribution-controls-simple .ctrl-block label.d-block {
    margin-bottom: 0 !important;
}

#distributionControls .publish-toggle {
    margin-top: 20px;
}

#distributionControls .dist-time-group {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: auto !important;
}

#distributionControls .dist-time-group .input-group-prepend,
#distributionControls .dist-time-group .input-group-append {
    flex: 0 0 auto;
}

#distributionControls .dist-time-group .input-group-prepend .btn,
#distributionControls .dist-time-group .input-group-append .btn {
    min-width: 34px;
}

#distributionControls .dist-time-group .form-control.poule-info-hour,
#distributionControls .dist-time-group .form-control.poule-info-minute {
    flex: 0 0 3.8rem;
    min-width: 3.8rem;
    width: 3.8rem;
}

#distributionControls .dist-time-group .form-control.dur-5,
#distributionControls .dist-time-group .form-control.dur-15,
#distributionControls .dist-time-group .form-control.dur-45 {
    flex: 0 0 50px;
    min-width: 50px;
    width: 50px;
}

#distributionControls .dist-time-group .input-group-text.time-separator {
    flex: 0 0 auto;
}


#distributionSummary {
    border: 1px solid #e0e0e0;

    border-radius: .5rem;
    background: #fff;
}

#distributionSummary h6 {
    margin: 0 0 .5rem;
    font-weight: 600;
}

#distributionSummary strong {
    font-weight: 700;
}

.bout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.chip {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: 3px;
    background: #e9ecef;
    margin: .125rem .25rem;
    font-size: .9rem;
    text-transform: uppercase;
    cursor: pointer;
}


.bout-chip.chip-ready {
    background: #d1ecf1;
    border: 1px solid #b8d8e0;
    color: #0c5460;
}


.bout-chip.chip-ready:hover,
.bout-chip.chip-ready:focus {
    background: #c5e4ea;
    text-decoration: none;
}

/* Per-bout selection — chip is now a <label> with a small checkbox.
   Selected chips show a clear primary-coloured outline + light tint. */
.bout-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    margin-bottom: 0;
}
.bout-chip .bout-toggle {
    margin: 0;
    cursor: pointer;
}
.bout-chip:has(.bout-toggle:checked) {
    background: #cfe2ff;
    border: 1px solid #6ea8fe;
    color: #052c65;
}
.bout-chip.chip-ready:has(.bout-toggle:checked) {
    background: #b6dbe2;
    border-color: #2c7a8a;
    color: #052c65;
}






/* ===== График боёв — базовая обёртка ===== */
.schedule-wrap {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: .5rem;
    background: #fff;
}

/* Липкий таймлайн со шкалой часов */
.timeline {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 3;
    border-bottom: 1px solid #e9ecef;
}

.time-scale {
    position: relative;
    height: 48px;
}

/* Отдельные деления часов (вставляются скриптом) */
.time-scale .hour {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    padding-left: .25rem;
    font-weight: 600;
}

/* Список дорожек */
.tracks {
    position: relative;
}

.track-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f0f0;
}

.track-label {
    flex: 0 0 140px;
    /* ширина колонки имен дорожек */
    padding: .5rem .75rem;
    border-right: 1px solid #e9ecef;
    background: #fcfcfc;
    font-weight: 600;
    overflow: hidden;
}

.track-lane {
    position: relative;
    flex: 0 0 auto;
    min-width: calc(var(--hour) * 12);
    /* минимум на 12 часов, дальше увеличивает JS */
    height: 64px;
    border-bottom: 1px solid #e9e9e9;
    /* сетка 15 мин и 1 час через CSS-переменные --quarter и --hour */
}

.track-lane::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(to right,
            rgba(0, 0, 0, .08) 0,
            rgba(0, 0, 0, .08) 1px,
            transparent 1px,
            transparent var(--quarter)),
        repeating-linear-gradient(to right,
            rgba(0, 0, 0, .12) 0,
            rgba(0, 0, 0, .12) 1px,
            transparent 1px,
            transparent var(--hour));
    background-repeat: repeat-x;
    pointer-events: none;
}

/* Карточка боя (если рисуешь кликабельные блоки на дорожке) */
.fight {
    position: absolute;
    top: 8px;
    height: 48px;
    padding: .1rem .25rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #d1ecf1;
    cursor: move;
    overflow: hidden;
    line-height: 10px;
}

.fight .lbl {
    display: block;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    overflow: hidden;
}

.fight .meta {
    display: block;
    font-size: 10px;
    font-weight: 600;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
}

.fight-finished {
    background: #d4edda;
    border-color: #b2d8be;
}

.fight-overlap {
    border: 2px solid #dc3545;
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.6);
}

#timeline .time-scale {
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

#tracks {
    position: relative;
}

.time-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dc3545;
    pointer-events: none;
    z-index: 20;
    overflow: visible;
}

.time-marker::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #dc3545;
    border-bottom: 0;
}


        .poule-table .prenomnom {
        max-width: 18em;
        }


/* Адаптив: ужимаем немного высоту/метки на узких экранах */
@media (max-width: 576px) {
    .track-label {
        flex-basis: 110px;
    }

    .track-lane {
        height: 56px;
    }

    .fight {
        height: 44px;
    }
}

/* график боёв------------------------ */


.time-separator {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: bold;

}


@keyframes gradientMotion {
    0% {
        background-position-x: 100%;
    }

    100% {
        background-position-x: 0;
    }
}

/* Team relay modal — substitution pick mode visuals.
   When the judge clicks «Замена», that button gets `.active` and pulses with
   a primary-blue halo; meanwhile every eligible ↻ button in the bouts table
   (`.trm-sub-pick`) shares the same animation so it's clear they are the
   click targets. The hint banner above the bouts table reinforces the
   neccessary scroll-down action. */
@keyframes trmSubPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

.trm-sub-btn.active,
#teamRelayModal.trm-sub-pick-mode .trm-sub-pick {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    animation: trmSubPulse 1.4s ease-out infinite;
}
.trm-sub-btn.active:hover,
#teamRelayModal.trm-sub-pick-mode .trm-sub-pick:hover {
    background-color: #0069d9;
    color: #fff;
    border-color: #0062cc;
}

/* Undo button next to «Обратная замена»: subtle warning tint; appears only
   when a forward sub is in effect and no finished bout has the new fencer
   playing yet. The shared `.trm-sub-undo` class is wired in protocol.js. */
.trm-sub-undo {
    line-height: 1;
}



@media (min-width: 576px) {
    .modal-dialog {
        max-width: 576px;
        margin: 1.75rem auto;
    }




}

@media (max-width: 1200px) {}

@media (min-width: 768px) and (max-width: 1199px) {
    .direl-stage-track {
        --direl-visible: 3;
    }
}


@media (max-width: 992px) {
    .direl-stage-col .match {
        border: none;
        background: none;
        box-shadow: none;
    }

    .direl .match:has(.bout-info) {
        height: 90px;
    }


    .direl .match:has(.bout-info) li:nth-child(1) {
        padding-bottom: 0.4rem;
        height: 42px;
    }

    .direl .match:has(.bout-info) li:nth-child(2) {
        padding-top: 0.4rem;
        height: 42px;
    }

    .direl-headline {
        align-items: flex-start;
    }

    .direl-stage-nav {
        width: 100%;
    }

    .direl-stage-meta {
        min-width: 0;
    }

    .nav-link {
        padding: 0.5rem 0.9rem;

    }

    .footer-menu .btn-support,
    .footer-menu .btn-donate {
        width: 150px;
        max-width: 150px;
        justify-content: center;
        text-align: center;
    }

        .poule-table .prenomnom {
        max-width: 12em;
        }

}

@media (max-width: 768px) {
    .direl {
        --match-height: 64px;
    }

    .direl-stage-track {
        --direl-visible: 2;
    }

    .direl-stage-nav {
        column-gap: 0.35rem;
        --direl-hint-width: 70px;
    }

    .direl-stage-meta {
        text-align: center;
    }

    .direl-stage-col .match {
        border-radius: 8px;
        margin-right: 2px;
    }

    .direl-stage-col .match li {
        padding: 0.45rem 0.65rem;
    }

    .direl-stage-col .match .badge {
        min-width: 2.1rem;
        font-size: 0.9rem;
    }

    .direl .col:nth-child(3n+2) .match:nth-child(2n-1) li:nth-child(1)::after {
        height: calc(100% + var(--match-gap, 1rem));

    }

    .direl .col:nth-child(3n+2) .match:nth-child(2n) li:nth-child(1)::after {
        height: calc(100% + var(--match-gap, 1rem));
    }



    .direl .col:nth-child(3) .match:nth-child(2n-1) li:nth-child(1)::after {
        height: calc(100% + var(--match-gap, 1rem));
    }

    .direl .col:nth-child(3) .match:nth-child(2n) li:nth-child(1)::after {
        height: calc(100% + var(--match-gap, 1rem));
    }



    .direl .col:nth-child(3n+4) .match li:nth-child(2n)::before {
        width: 22px;
    }

    .direl .col:nth-child(2n+3) .match li:nth-child(2n)::before {
        width: 0;
    }


    .direl .col:nth-child(2n+2) .match:nth-child(2n) li:nth-child(1)::after {
        height: 300%;
    }


    .direl .col:nth-child(2n+2) .match:nth-child(2n-1) li:nth-child(1)::after {
        height: 300%;
    }


    .direl .match-slot::after {
        width: 6px;
        right: 4px;
    }

    .direl .match-slot:nth-child(2n)::before {
        width: 4px;
        right: 0px;
    }

    .direl-matches .match-slot {
        padding-right: 8px;
    }


    .direl ul li,
    .match li {
        min-height: 2rem;
    }

    .nav-link {
        padding: 0.7rem 0.4rem;
        font-size: 0.9rem;
    }



}

@media (max-width: 576px) {
    html, body {
        overflow-x: hidden;
    }

    :root {
        --layout-header-height: 96px;
        --layout-footer-height: 300px;
    }

    .online-list .complist-link a{
width: 24px;
        height: 24px;
        font-size: 12px;
        padding: 2px;
}

        .footer-menu .btn-support,
    .footer-menu .btn-donate {
        width: 140px;
        max-width: 140px;
        justify-content: center;
        text-align: center;
    }

    .direl {
        --match-height: 58px;
    }


    .direl-stage-nav {
        border-radius: 14px;
        --direl-hint-width: 60px;
    }

    .direl-stage-meta {
        width: 100%;
    }

    .direl-stage-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .direl-nav-btn {
        width: 100%;
        height: 32px;
        padding: 0 0.35rem;
        gap: 0.25rem;
    }

    .direl-stage-col .match li {
        padding: 0.35rem 0.5rem;
        font-size: 0.78rem;
    }

    .direl-stage-col .match .badge {
        min-width: 1.9rem;
        font-size: 0.78rem;
        line-height: 1rem;
    }

    #changeResult #tir2resbtn,
    #changeResult #tir1resbtn {
        display: table;
    }

    .match {
        line-height: 1.1;
        position: relative;


    }

    .direl .match-slot::after {
        width: 6px;
        right: 4px;
    }

    .direl .match-slot:nth-child(2n)::before {
        width: 6px;
        right: -2px;
    }

    .direl-matches .match-slot {
        padding-right: 8px;
    }


    .bout-info {
        padding: 2px;
        line-height: 1;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
        width: 85px;
        max-width: 85px;
        min-width: 85px;
    }

    .match-ref-floating {
        right: 90px;
        left: 3px;
        font-size: 0.68rem;
        line-height: 1.1;
    }


    .direl .col {
        padding: 4rem 5px 0 5px;
        margin-bottom: 2rem;
    }

    .direl .match:nth-child(2n-1) li:nth-child(1)::after {
        right: -6px;
        width: 6px;
    }

    .direl .match:nth-child(2n) li:nth-child(1)::after {
        width: 6px;
        right: -6px;
    }

    .direl .col:nth-child(n+2) .match li:nth-child(2n)::before {
        width: 7px;
        left: -7px;
    }

    .direl ul li {
        padding: 0.3rem 0.3rem;
    }

    .table-success {
        background-color: #18BC9C !important;
    }

    .table-danger {
        background-color: #E74C3C !important;
    }

    .poule .match:after {
        content: " ";
    }

    .match {
        font-size: 13px;
        line-height: 12px;
    }

    .match b {

        line-height: 12px;
        font-size: 13px;
    }

    .tab-directEl {
        padding-left: 5px;
        padding-right: 5px;
    }

    .poule-table tr {
        height: 2rem;
    }


    .poule-table td,
    .poule-table th {
        padding: 0.4rem;
        min-width: 2rem;
        font-size: 0.8rem;
        line-height: 0.7rem;
    }

    .poule-table .remove-athlete {
        font-size: 0.5rem;
        line-height: 0.5rem;
    }

    .poule-table td:nth-child(2) {
        width: 6em;
    }

    .poule-table .prenomnom {
        max-width: 9em;
    }



    .card-body {
        padding: 0.5rem;
        background: linear-gradient(180deg, #ffffff 0%, #fafafa 60%, #f2f2f2 100%);
    }

    .main .container-fluid {
        padding-right: 5px;
        padding-left: 5px;
    }

    .main .page-title.container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }

    .online-list {
        padding: 1rem;
        margin: 1.5em auto;
    }


    .footer-menu {
        padding-right: 15px;
        padding-left: 15px;
    }



    .poule-class-table td,
    .poule-class-table th {
        padding: 0.4rem;
    }

    .tabl-row {
        margin-right: -10px;
        margin-left: -10px;
    }

    .direl-stage-col .match li {
        padding: 0.2rem 0.3rem;
    }

    .result-table {
        table-layout: fixed;
        width: 100%;
    }

    .result-table.table th,
    .result-table.table td {
        padding: 0.35rem 0.5rem;
    }





    .nav-link {


        padding: 0.7rem 0.4rem;
        font-size: 0.8rem;
        max-width: 91px;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;
        text-align: center;
        line-height: 1;
    }

    .footer-menu .nav-link {


        padding: 0.7rem 0.4rem;
        font-size: 1.1rem;
        max-width: unset;



        text-align: center;
        line-height: 1;
    }


    .tab-content {
        min-height: calc(100vh - var(--layout-header-height) - var(--layout-footer-height));
    }





}

@media (max-width: 400px) {
    .poule-table .prenomnom {
        max-width: 8em;
        line-height: 0.7rem;
    }


    .main .container-fluid {
        padding-right: 2px;
        padding-left: 2px;
    }

    .main .page-title.container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }

    .tabl-row {
        margin-right: -10px;
        margin-left: -10px;
    }


    .poule-class-table td,
    .poule-class-table th {
        padding: 0.4rem;
    }




    .nav-link {
        padding: 0.5rem 0.35rem;
        font-size: 0.8rem;
    }


    .footer-menu .nav-link {


        padding: 0.7rem 0.4rem;
        font-size: 1rem;
    }

    .footer-menu.container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }

    .page-title .page-title-actions {
        position: absolute;
        right: 6px;
        gap: 0;
    }

    .page-title-actions button,
    .page-title-actions .btn-link {
        height: 30px;
        width: 28px;
        padding: 3px;
        font-size: 1rem;
    }

    /* Mobile: zen-auth avatar (default 32px) doesn't fit inside the 28px
       page-title-actions button — it visually spilled onto the search icon.
       Shrink to match the button's inner box. */
    .page-title-actions .zen-avatar,
    .page-title-actions .zen-initials {
        width: 22px;
        height: 22px;
    }
    .page-title-actions .zen-initials {
        font-size: 0.65rem;
    }


    .page-title h1 {
        font-size: 1rem;

        display: inline-block;
        width: 84%;

    }


    .page-title #compLocation {

        margin-left: 0;

    }

    .nav-link {
        padding: 0.5rem 0.3rem;
        font-size: 0.7rem;
        max-width: 73px;

    }

            .online-list {
        padding: 15px;
        margin: 1.5em auto;
    }


}

@media (max-width: 340px) {
    .nav-link {
        padding: 0.5rem 0.3rem;
        font-size: 0.7rem;
        max-width: 73px;
    }

    .main .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        padding-left: 5px;
        padding-right: 5px;
    }

    .main .page-title.container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .card-body {
        padding: 0.6rem;
    }

    .direl .card-body {
        padding: 1rem;
    }

    .tirnom {
        word-break: break-all;
    }

    .direl ul {
        font-size: 0.8rem;
    }

    .direl ul li,
    .match li {
        min-height: 1.5rem;
    }

    #mathes .match {
        margin-bottom: 0.8rem;
    }

}


.screen-item .custom-control-input:checked~.custom-control-label::before {
    border-color: #18BC9C;
    background-color: #18BC9C;
}

.startlist-table .sl-prenomnom {
    min-width: 11em;
    /* Константинов Константин помещается */
    max-width: 18em;
}

/* Edit mode: separate name columns. Without min-widths they collapse to a few
   characters on narrow screens because of the many sibling columns; the table
   already lives inside .table-responsive so a horizontal scroll appears as needed. */
.startlist-table .sl-lastname  { min-width: 7em; }
.startlist-table .sl-firstname { min-width: 6em; }
.startlist-table .sl-middlename { min-width: 7.5em; }
.startlist-table .sl-weapon-hand-cell { min-width: 6em; }

.startlist-table .sl-region {
    min-width: 6em;
    /* Регион */
    max-width: 8em;
}

.startlist-table .sl-category {
    min-width: 8em;
    /* Категория */
    max-width: 10em;
}

.startlist-table .sl-birthdate {
    min-width: 7em;
    /* "рождения" */
    max-width: 10em;
    /* 12.12.2020 */
}

.startlist-table .sl-sporttitle {
    min-width: 6em;
    /* Разряд */
    max-width: 9em;
}

.startlist-table .sl-coach {
    min-width: 8em;
    /* Галиахметов Р.М. */
    max-width: 14em;
}

.startlist-table .sl-org {
    min-width: 9em;
    /* ПК ГАРДЕМАРИНЫ */
    max-width: 18em;
    /* РДОО ПК ГАРДЕМАРИНЫ */
}

#syncStatusBar .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

#syncStatusBar {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e0e0e0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 8px 0 0 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 3px 6px;
    font-size: 11px;
}

/* History Timeline Styles */
.timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.timeline-item {
    position: relative;
    padding-bottom: 20px;
    padding-left: 50px;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -10px;
    width: 2px;
    background: #dee2e6;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-marker.snapshot {
    border-color: #17a2b8;
    background: #e7f7fa;
}

.timeline-marker i {
    font-size: 14px;
    color: #6c757d;
}

.timeline-marker.snapshot i {
    color: #17a2b8;
}

.timeline-content {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.timeline-item.current .timeline-content {
    border-color: #28a745;
    background: #f0fff4;
}

.timeline-item.current .timeline-marker {
    border-color: #28a745;
    background: #28a745;
}

.timeline-item.current .timeline-marker i {
    color: #fff;
}

.timeline-header {
    margin-bottom: 8px;
    font-size: 15px;
}

.timeline-body {
    margin-bottom: 10px;
}

.timeline-body .event-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.timeline-footer {
    padding-top: 8px;
    border-top: 1px solid #f1f1f1;
}

.timeline-container {
    padding: 10px 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-item {
        padding-left: 40px;
    }
    
    .timeline-marker {
        width: 28px;
        height: 28px;
    }
    
    .timeline-marker i {
        font-size: 12px;
    }
}

/* Компактная версия timeline */
.timeline-item {
    padding-bottom: 12px;
}

.timeline-content {
    padding: 8px 12px;
}

.timeline-header {
    margin-bottom: 4px;
    font-size: 14px;
}

.timeline-body {
    margin-bottom: 6px;
}

.timeline-body .event-name {
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 14px;
}

.timeline-body .event-details {
    font-size: 12px;
    margin-top: 2px;
}

.timeline-footer {
    padding-top: 6px;
    border-top: 1px solid #f1f1f1;
    margin-top: 4px;
}

.timeline-footer .btn-sm {
    padding: 2px 8px;
    font-size: 12px;
}


/* Actions menu dropdown */
#actionsMenuBtn.dropdown-toggle::after {
    display: none;
}

.page-title-actions .btn-link {
    color: #18BC9C;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.page-title-actions .btn-link:hover {
    color: #149a80;
    transform: scale(1.1);
}

.page-title-actions .dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    min-width: 180px;
}

.page-title-actions .dropdown-item {
    padding: 0.6rem 1rem;
    color: #2c3e50;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.page-title-actions .dropdown-item i {
    color: #18BC9C;
    width: 20px;
    text-align: center;
}

.page-title-actions .dropdown-item:hover,
.page-title-actions .dropdown-item:focus {
    background: linear-gradient(90deg, rgba(24, 188, 156, 0.1) 0%, rgba(24, 188, 156, 0.05) 100%);
    color: #18BC9C;
    border-left-color: #18BC9C;
}

.page-title-actions .dropdown-item:hover i,
.page-title-actions .dropdown-item:focus i {
    transform: scale(1.1);
}

.page-title-actions .dropdown-divider {
    margin: 0.4rem 0;
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Search component styles */
.search-container {
    margin-right: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.25rem;
    max-width: 280px;
}

.search-input-wrapper {
    position: relative;
}

.search-container #searchInput {
    width: 200px;
    border-radius: 20px;
    padding-left: 12px;
    padding-right: 30px;
    border: 1px solid #ddd;
    transition: width 0.3s ease, border-color 0.2s ease;
}

.search-container #searchInput:focus {
    width: 260px;
    border-color: #18BC9C;
    box-shadow: 0 0 0 0.1rem rgba(24, 188, 156, 0.15);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
}

.search-results.show {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8f9fa;
}

.search-result-item .search-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.search-badge.badge-athlete {
    background: #e3f2fd;
    color: #1976d2;
}

.search-badge.badge-region {
    background: #fff3e0;
    color: #e65100;
}

.search-badge.badge-club {
    background: #e8f5e9;
    color: #388e3c;
}

.search-badge.badge-referee {
    background: #fce4ec;
    color: #c2185b;
}

.search-badge.badge-coach {
    background: #f3e5f5;
    color: #7b1fa2;
}

.search-result-item .search-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.search-result-item .search-text mark {
    background: #fff59d;
    padding: 0;
    margin: 0;
    border-radius: 2px;
}

.search-no-results {
    padding: 12px;
    text-align: center;
    color: #888;
    font-size: 0.85rem;
}

/* Active search filters */
.search-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0 0 0;
}

.search-active-filters:empty {
    display: none;
}

.search-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.search-filter-tag.filter-athlete {
    background: #e3f2fd;
    color: #1976d2;
}

 .search-filter-tag .filter-text {
    max-width: 110px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
}

.search-filter-tag.filter-region {
    background: #fff3e0;
    color: #e65100;
}

.search-filter-tag.filter-club {
    background: #e8f5e9;
    color: #388e3c;
}

.search-filter-tag.filter-referee {
    background: #fce4ec;
    color: #c2185b;
}

.search-filter-tag.filter-coach {
    background: #f3e5f5;
    color: #7b1fa2;
}

.search-filter-tag .filter-icon {
    font-size: 0.7rem;
}

.search-filter-tag .filter-close {
    cursor: pointer;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.search-filter-tag .filter-close:hover {
    opacity: 1;
}

/* Search highlight on page - by type */
.search-highlight {
    padding: 0;
    border-radius: 3px;
    outline-offset: 0;
    position: static !important;
    right: auto !important;
    top: auto !important;
}

.search-highlight.highlight-athlete {
    background: #e3f2fd;
    outline: 2px solid #1976d2;
}

.search-highlight.highlight-region {
    background: #fff3e0;
    outline: 2px solid #e65100;
}

.search-highlight.highlight-club {
    background: #e8f5e9;
    outline: 2px solid #388e3c;
}

.search-highlight.highlight-referee {
    background: #fce4ec;
    outline: 2px solid #c2185b;
}

.search-highlight.highlight-coach {
    background: #f3e5f5;
    outline: 2px solid #7b1fa2;
}

.search-highlight-flash {
    background: #ffeb3b !important;
    outline: 2px solid #ffeb3b !important;
    transition: background 0.3s, outline-color 0.3s;
}

.search-highlight:not(.search-highlight-flash) {
    transition: background 0.3s, outline-color 0.3s;
}

@media (max-width: 576px) {
    .search-container #searchInput {
        width: 135px;
    }
    .search-container #searchInput:focus {
        width: 135px;
    }

        .search-container {
        max-width: 135px;
    }

    .search-results {
            min-width: 180px;
    }

    .search-result-item .search-text {
        max-width: 120px;
    }

}

/* =====================================================
   Quick Entry Modal (Быстрый ввод пулек)
   ===================================================== */
#quickEntryModal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

#quickEntryModal .modal-header .close {
    color: #fff;
    opacity: 0.8;
}

#quickEntryModal .modal-header .close:hover {
    opacity: 1;
}

#quickEntryModal .modal-title {
    display: flex;
    align-items: center;
}

#quickEntryModal #quickEntryPrevGroup,
#quickEntryModal #quickEntryNextGroup {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

#quickEntryModal #quickEntryPrevGroup:hover:not(:disabled),
#quickEntryModal #quickEntryNextGroup:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
}

#quickEntryModal #quickEntryPrevGroup:disabled,
#quickEntryModal #quickEntryNextGroup:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quick-entry-instructions {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border-left: 3px solid #667eea;
}

.quick-entry-table {
    margin-bottom: 0;
}

.quick-entry-table thead th {
    background: linear-gradient(180deg, #e2e2e2 0%, #d2d2d2 100%);
}

.quick-entry-table th,
.quick-entry-table td {
    vertical-align: middle;
    text-align: center;
    padding: 0.35rem;
}

.quick-entry-table th:first-child {
    background: linear-gradient(180deg, #e2e2e2 0%, #d2d2d2 100%);
    color: inherit;
}

.quick-entry-table td:first-child {
    background: #fff;
    color: inherit;
}

.quick-entry-table .qe-num {
    width: 30px;
    font-weight: 600;
    background: linear-gradient(180deg, #e2e2e2 0%, #d2d2d2 100%);
}

.quick-entry-table .qe-name {
    text-align: left;
    font-size: 0.85rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-entry-table .qe-diag {
    background: #e9ecef;
    color: #6c757d;
    font-weight: 600;
}

/* Заблокированная клетка удалённого/дисквалифицированного спортсмена («A»). */
.quick-entry-table .qe-absent {
    background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 5px, #e9ecef 5px, #e9ecef 10px);
    color: #adb5bd;
    font-weight: 600;
    text-align: center;
    cursor: not-allowed;
}

.quick-entry-table .qe-cell {
    padding: 0;
    width: 42px;
    min-width: 42px;
}

.quick-entry-table .qe-input {
    width: 100%;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    transition: background 0.15s;
}

.quick-entry-table .qe-input:focus {
    outline: none;
    background: #e3f2fd;
    box-shadow: inset 0 0 0 2px #2196f3;
}

.quick-entry-table .qe-cell.qe-error {
    background: #ffebee;
}

.quick-entry-table .qe-cell.qe-error .qe-input {
    color: #c62828;
}

.quick-entry-table .qe-cell.qe-error .qe-input:focus {
    background: #ffcdd2;
    box-shadow: inset 0 0 0 2px #ef5350;
}

.quick-entry-table .qe-cell.qe-error.qe-victory {
    background: #ffebee;
}

.quick-entry-table .qe-cell.qe-error.qe-victory .qe-input {
    color: #c62828;
    font-weight: 700;
}

.quick-entry-table .qe-cell.qe-error.qe-victory .qe-input:focus {
    background: #ffcdd2;
    box-shadow: inset 0 0 0 2px #ef5350;
}

/* V победы - зелёный */
.quick-entry-table .qe-cell.qe-victory {
    background: #e8f5e9;
}

.quick-entry-table .qe-cell.qe-victory .qe-input {
    color: #2e7d32;
    font-weight: 700;
}

.quick-entry-table .qe-cell.qe-victory .qe-input:focus {
    background: #c8e6c9;
    box-shadow: inset 0 0 0 2px #4caf50;
}

#quickEntryErrors .alert {
    margin-bottom: 0;
}

#quickEntryErrors ul {
    padding-left: 1.25rem;
}

#quickEntryErrors li {
    margin-bottom: 0.5rem;
}

#quickEntryErrors li:last-child {
    margin-bottom: 0;
}

#quickEntryStatus {
    font-size: 0.875rem;
}

#quickEntrySave:disabled {
    opacity: 0.5;
}

/* Mobile optimization */
@media (max-width: 768px) {
    #quickEntryModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .quick-entry-table .qe-name {
        max-width: 80px;
        font-size: 0.75rem;
    }

    .quick-entry-table .qe-cell {
        width: 32px;
        min-width: 32px;
    }

    .quick-entry-table .qe-input {
        height: 32px;
        font-size: 0.9rem;
    }

    #quickEntryModal .modal-header {
        padding: 0.75rem;
    }

    #quickEntryModal .modal-title {
        font-size: 0.9rem;
    }
}

/* =====================================================
   Number Entry (Ввод по номерам)
   ===================================================== */

.ne-bout-display {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: border-color 0.3s, background-color 0.3s;
}

.ne-bout-display.ne-success {
    border-color: #28a745;
    background-color: #d4edda;
}

.ne-bout-display.ne-error {
    border-color: #dc3545;
    background-color: #f8d7da;
}

.ne-bout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ne-fencer {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
}

.ne-fencer-left {
    text-align: left;
}

.ne-fencer-right {
    text-align: right;
}

.ne-fencer-num {
    color: #6c757d;
    font-weight: 700;
}

.ne-score-display {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 15px;
}

.ne-score {
    font-size: 1.8rem;
    font-weight: 700;
    min-width: 50px;
    color: #343a40;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 2px 8px;
    background: #d8dadd;
}

#neLeftScore {
    text-align: center;
}

#neRightScore {
    text-align: center;
}

.ne-score-sep {
    font-size: 1.8rem;
    font-weight: 700;
    color: #6c757d;
}

.ne-error-msg {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.ne-selectors {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
}

@media (min-width: 576px) {
    .ne-selectors {
        gap: 40px;
    }
}

.ne-selector-col {
    flex: 1;
}

.ne-selector-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.ne-number-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ne-number-btn {
    width: calc((100% - 4 * 5px) / 5);
    min-width: 34px;
    aspect-ratio: 1 / 1;
    font-size: 1.1rem;
    font-weight: 700;
    border: 2px solid #adb5bd;
    background: #fff;
    color: #495057;
    border-radius: 6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.ne-number-btn:hover {
    border-color: #18BC9C;
    color: #18BC9C;
    background: #e8f8f5;
}

.ne-number-btn.active {
    background: #18BC9C;
    border-color: #18BC9C;
    color: #fff;
}

.ne-score-panels {
    display: flex;
    gap: 20px;
}

.ne-score-panel {
    flex: 1;
}

.ne-score-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.ne-score-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ne-score-btn {
    width: calc((100% - 5 * 5px) / 6);
    min-width: 30px;
    aspect-ratio: 1 / 1;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.ne-score-btn.active {
    background: #18BC9C;
    border-color: #18BC9C;
    color: #fff;
}

.ne-score-btn.ne-existing {
    background: #e2e6ea;
    border-color: #6c757d;
    color: #343a40;
    box-shadow: inset 0 0 0 2px #6c757d;
}

.ne-section-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.ne-kb-focus {
    outline: 3px solid #18BC9C;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Mobile — keep 2-column layout, just shrink sizes */
@media (max-width: 768px) {
    .ne-fencer {
        font-size: 0.9rem;
    }

    .ne-score {
        font-size: 1.4rem;
                min-width: 45px;
    }

    .ne-score-sep {
        font-size: 1.4rem;
    }

    .ne-score-display {
        margin: 0 8px;
    }

    .ne-selectors {
        gap: 30px;
    }

    .ne-score-panels {
        gap: 10px;
    }

    .ne-number-btn {
        font-size: 0.95rem;
    }

    .ne-score-btn {
        font-size: 1.1rem;
        padding: 2px;
    }
}


@media (max-width: 576px) {

    .ne-selectors {
        gap: 15px;
    }

    .ne-number-grid {
        gap: 3px;
    }

    .ne-score-panels {
        gap: 30px;
    }

    .ne-score-btn {
        width: calc((100% - 2 * 5px) / 3);
        font-size: 1.2rem;
    }
}


@media (max-width: 430px) { 
#numberEntryModal .modal-body {
    padding-left: 5px;
    padding-right: 5px;
}

    .ne-selectors {
        gap: 10px;
    }

    .ne-number-btn {
        max-width: 30px;
    }

        .ne-number-grid {
        gap: 1px;
    }

 }


 @media (max-width: 390px) {

 }

/* ZenFencing Auth */
.zen-auth-container {
    display: flex;
    align-items: center;
}

.zen-profile-btn {
    padding: 2px;
    line-height: 1;
}

.zen-profile-btn::after {
    display: none;
}

.zen-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.zen-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #18BC9C;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.zen-login-btn {
    color: #18BC9C;
    font-size: 1.1rem;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
}

.zen-login-btn:hover {
    color: #149a80;
}

/* Multi-round practice: history-round poules render as plain read-only.
   Inputs blocked at pointer level so accidental clicks don't trigger
   edit handlers; admin-only controls are hidden outright. */
.poule-readonly {
    opacity: 0.9;
}
.poule-readonly .pmatch.s,
.poule-readonly .match.s,
.poule-readonly .tirres1,
.poule-readonly .tirres2 {
    pointer-events: none;
}
.poule-readonly .add-athlete,
.poule-readonly #editPouleInfo,
.poule-readonly #quickEntryBtn,
.poule-readonly #numberEntryBtn,
.poule-readonly .remove-athlete,
.poule-readonly .restore-athlete {
    display: none !important;
}
.poule-readonly .prenomnom[contenteditable="true"] {
    pointer-events: none;
}

/* Phase 1: next-round configurator card under the cutoff slider. */
/* Piste-manager bout list: widen the stage-label column so suite labels like
   "Места 17-32" / "1/16 финала" fit on one line instead of wrapping. */
.bout-stage-row > .custom-control {
    min-width: 160px;
    flex-shrink: 0;
}
.bout-stage-row > .custom-control > .custom-control-label {
    white-space: nowrap;
}

.next-round-panel {
    background: #f8f9fa;
}
.next-round-panel h6 {
    font-weight: 600;
}

/* DE-R: match locked because downstream chain has been decided.
   Click handler blocks editing; visual hint = dim + no-hover. */
.direl-der .match.der-locked {
    opacity: 0.7;
    cursor: not-allowed;
}
.direl-der .match.der-locked .list-group-item {
    background-color: #eef0f2 !important;
}

/* DE-R: feed badges next to each match — clickable hints showing where the
   winner/loser of this bout heads next. Absolutely positioned in the right
   gutter of match-slot (which match-slot's `.match` carves out via its 25px
   margin-right), z-index above the bracket connector pseudo-elements (z-index 3).
   The result is a slight visual overlap onto the match's right edge — same
   placement as the pre-stage T32 badges. */
.match-slot {
    position: relative;
}
.match-feeds {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    pointer-events: none;
    z-index: 5;
}
.match-feed {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    padding: 1px 2px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #d9dde3;
    color: #495057;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    min-width: 44px;
}
.match-feed i {
    font-size: 0.6rem;
}
.match-feed:hover {
    background: #18BC9C;
    color: #fff;
    border-color: #18BC9C;
    text-decoration: none;
}
.match-feed-winner i {
    color: #2c8c5f;
}
.match-feed-winner:hover i,
.match-feed-loser:hover i {
    color: #fff;
}
.match-feed-loser i {
    color: #c44545;
}
.direl-stage-highlight {
    box-shadow: 0 0 0 3px rgba(24, 188, 156, 0.45);
    transition: box-shadow 0.25s ease;
}

/* ===========================================================================
   Bout protocol modal (#changeResult) — score entry for poule & DE.
   Mobile-first; the @media block tightens spacing on wider screens.
   Keeps the existing data-carrier classes (.tirn1/.tirn2, #tir1res/#tir2res,
   #tir1resbtn/#tir2resbtn) — these styles only restyle the wrapper.
   =========================================================================== */
.bout-protocol-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.bout-protocol-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    min-width: 0;
}
.bout-round-badge,
.bout-matchkey-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.32em 0.6em;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.bout-round-badge {
    background: #eef1f4;
    color: #495057;
}
.bout-matchkey-chip {
    background: #212529;
    color: #fff;
}
/* Hide chips/badges when JS leaves them empty (e.g. poule has no matchkey). */
.bout-round-badge:empty,
.bout-matchkey-chip:empty,
.bout-seed-badge:empty {
    display: none;
}

.bout-protocol-body {
    padding: 14px 16px 18px;
}

/* 2-column bout layout (motif from «Ввод по номерам»): names + central score on
   top, two score-button columns below. Fencer 1 (called first) → RIGHT column,
   fencer 2 → LEFT. */
/* Fencers in matching framed cards — equal height even if one name wraps to
   two lines (align-items: stretch); seed on the outer edge, name toward centre. */
.bout-fencers {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}
.bout-fencer-frame {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    background: #fbfcfd;
    padding: 9px 11px;
}
.bff-left {
    justify-content: flex-start;
    text-align: left;
}
.bff-right {
    justify-content: flex-end;
    text-align: right;
}
.bout-fencer-frame .bout-seed-badge {
    align-self: center;
}
/* Score on its own row, framed boxes (gives the full names more width). */
.bout-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.bout-score-sep {
    font-size: 1.6rem;
    font-weight: 700;
    color: #adb5bd;
}
/* Two button columns with generous breathing room so 0–15 don't blend. */
.bout-cols {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.bout-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Collapsible cards / medical area — hidden by default (sensitive, rare). */
.bout-cards-toggle-wrap {
    text-align: center;
    margin-top: 10px;
}
.bout-cards-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed #ced4da;
    background: #fff;
    color: #6c757d;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.bout-cards-toggle-btn:hover {
    background: #f1f3f5;
    color: #343a40;
}
/* Mini pictograms on the toggle — same shapes as the bracket markers. */
.bct-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.bct-icons .bout-cell-card {
    margin: 0;
}
.bct-caret {
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.bout-cards-toggle-btn.active .bct-caret {
    transform: rotate(180deg);
}
.bout-cards-area {
    display: flex;
    gap: 30px;
    margin-top: 12px;
}
.bout-cards-col {
    flex: 1 1 0;
    min-width: 0;
}
.bout-cards-col .bout-card-slots {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
.bout-seed-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    height: 1.9em;
    padding: 0 0.35em;
    border-radius: 6px;
    background: #6c757d;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}
.bf-name {
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.1;
    /* Полное ФИО — переносим на 2 строки, без обрезки многоточием. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.bout-score-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    height: 3rem;
    padding: 0 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 10px;
    background: #e9ecef;
    color: #343a40;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}
/* compareResults() toggles .badge-danger on the winner's score badge — only
   once BOTH scores are entered. Until then both stay neutral grey. */
.bout-score-badge.badge-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Bout meta row: assigned piste / start time / referee. Each item hides
   (.d-none toggled by JS) when its value is empty. */
.bout-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #6c757d;
}
.bout-meta-row:empty {
    display: none;
}
.bout-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.bout-meta-item i {
    color: #adb5bd;
}
.bout-meta-item .bm-val {
    color: #495057;
    font-weight: 600;
}

/* Score buttons as a responsive grid of large touch targets. Overrides the
   bootstrap .btn-group flex/negative-margin/border-radius behaviour. */
.bout-score-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    width: 100%;
}
.bout-score-grid > .btn {
    margin: 0 !important;
    min-height: 46px;
    border-radius: 9px !important;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bout-score-grid > .btn.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

@media (min-width: 576px) {
    .bout-protocol-body {
        padding: 16px 20px 20px;
    }
    .bf-name {
        font-size: 1.15rem;
    }
    .bout-score-badge {
        font-size: 2rem;
    }
    .bout-score-grid {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 7px;
    }
    .bout-score-grid > .btn {
        min-height: 42px;
    }
    .bout-cols,
    .bout-cards-area {
        gap: 48px;
    }
}

/* Mobile — keep the 2 columns, just shrink so everything fits comfortably. */
@media (max-width: 575px) {
    .bout-protocol-body {
        padding: 12px 10px 14px;
    }
    .bout-fencers {
        gap: 8px;
        margin-bottom: 10px;
    }
    .bout-fencer-frame {
        padding: 7px 8px;
        gap: 6px;
    }
    .bout-fencer-frame .bf-name {
        font-size: 0.92rem;
    }
    .bout-seed-badge {
        min-width: 1.6em;
        height: 1.6em;
        font-size: 0.72rem;
    }
    .bout-score-badge {
        min-width: 3.4rem;
        height: 3.1rem;
        font-size: 1.9rem;
        padding: 0 0.4rem;
    }
    .bout-score-sep {
        font-size: 1.5rem;
    }
    .bout-cols,
    .bout-cards-area {
        gap: 20px;
    }
    .bout-score-grid {
        grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
        gap: 5px;
    }
    .bout-score-grid > .btn {
        min-height: 40px;
        font-size: 1rem;
    }
}

/* Individual bout cards (Phase 2) — picker, toggle, mini-chips inside the
   #changeResult modal. Reuses the team card chip visuals (.trm-card-chip*). */
.bout-cards-toggle {
    flex: 0 0 auto;
    border: 1px solid #ced4da;
    background: #fff;
    color: #6c757d;
    border-radius: 8px;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}
.bout-cards-toggle:hover {
    background: #f1f3f5;
    color: #343a40;
}
.bf-cards-mini {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.bf-cards-mini:empty {
    display: none;
}
/* Small filled chips shown next to the fencer name. */
.bf-cards-mini .trm-card-chip-filled {
    width: 13px;
    height: 16px;
    min-width: 13px;
    padding: 0;
    margin: 0;
    font-size: 9px;
    line-height: 16px;
    border-width: 1px;
    border-radius: 2px;
    text-align: center;
}
/* The expandable picker row under the score grid. */
.bout-card-slots {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e3e7eb;
}
.bout-card-slots .trm-card-slots {
    gap: 6px 10px;
}
/* Larger, touch-friendly chips in the picker (override the compact base). */
.bout-card-slots .trm-card-chip {
    min-width: 2.4em;
    height: 2.2em;
    font-size: 0.95rem;
    border-radius: 5px;
}

/* «Мед. снятие» button — sits inline in the per-fencer card row (Phase 3a). */
.bout-medical-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 5px;
    padding: 0 0.6em;
    height: 2.2em;
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
    border-radius: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
.bout-medical-btn:hover {
    background: #dc3545;
    color: #fff;
}
/* Выбранное мед. снятие — красный фон. */
.bout-medical-btn.bout-medical-btn-active {
    background: #dc3545;
    color: #fff;
}
/* Снятие уже у соперника — нельзя сделать второе. */
.bout-medical-btn:disabled,
.bout-medical-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #fff;
    color: #dc3545;
}

/* Black / P-black card marker on a bracket cell, left of the score (Phase 3b). */
.bout-cell-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 16px;
    min-width: 13px;
    margin: 0 5px 0 0;
    background: #212529;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 2px;
    vertical-align: middle;
    flex: 0 0 auto;
}
/* Мед. снятие (DNF) — красный крестик вместо чёрного квадрата. */
.bout-cell-card.bout-cell-med {
    background: #dc3545;
    font-size: 12px;
    font-weight: 800;
}

/* ===== Brand logo lockup (icon + "Протокол" + scoreboard box) ===== */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/css/fonts/Rubik-ExtraBold-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/css/fonts/Rubik-ExtraBold-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/css/fonts/Rubik-ExtraBold-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/css/fonts/Rubik-ExtraBold-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark:hover,
.brand-mark:focus {
    text-decoration: none;
}

.brand-mark__icon {
    display: block;
    height: 1.95em;
    width: auto;
}

.brand-mark__text {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: 1em;
    letter-spacing: -0.01em;
    color: #2C3E50;
}

/* Red "scoreboard" box = a Rubik exclamation mark laid on its side:
   a long bar (the stem) + a square (the dot), same thickness. Box height
   matches the cap height of the "Протокол" letters. */
.brand-mark__box {
    display: inline-flex;
    align-items: center;
    gap: 0.12em;
    background: #E74C3C;
    border-radius: 0.12em;
    height: 0.54em;
    padding: 0 0.14em;
    align-self: center;
    transform: translateY(0.08em);
}

.brand-mark__box i {
    display: block;
    height: 0.25em;
    background: #eceff1;
    border-radius: 0.07em;
}

.brand-mark__box i:first-child {
    width: 0.25em;
}

.brand-mark__box i:last-child {
    width: 0.6em;
}

/* Footer variant: smaller, white wordmark on the grey footer bar */
.brand-mark--footer {
    font-size: 1.2rem;
}

.brand-mark--footer .brand-mark__text {
    color: #ffffff;
}