/* Base styles */
body {
    background-color: #E7EFF7;
    padding-bottom: 80px; /* Добавляем отступ снизу равный высоте футера */
    min-height: 100vh;
    position: relative;
}

/* Header styles */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar .h4 {
    color: #6c757d;
    font-weight: 500;
    font-size: calc(0.8rem + .50vw);
    white-space: normal; /* Позволяем перенос текста на новую строку */
}

/* Footer styles */
.footer-icon {
    color: #85D0FA;
    transition: color 0.2s ease;
}

.nav-link:hover .footer-icon {
    color: #5BB8F0;
}

/* Адаптивный отступ для футера */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px; /* Меньший отступ для мобильных устройств */
    }
}

/* Card and list group styles */
.card, .list-group {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Tournament card styles */
.tournament-info {
    background-color: rgba(248, 249, 250, 0.8) !important;
    backdrop-filter: blur(10px);
}

/* Settings menu styles */
.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.list-group-item:hover:not(.active) {
    background-color: var(--bs-light);
}

:root {
    --bs-primary: #85D0FA;
    --bs-primary-dark: #5BB8F0;
    --bs-primary-rgb: 133, 208, 250;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

@media (min-width: 1000px) {
    .navbar-toggler {
        display: none;
    }
}

.navbar-toggler {
    height: 50px;
    font-size: 1.2rem;
    justify-content: flex-start; /* Выравниваем по левому краю */
    display: flex;
    align-items: center;
    width: 100%;
}

.active-menu-text {
    display: flex;
    align-items: center;
}

.active-menu-text i {
    font-size: 1.5rem; /* Увеличиваем размер пиктограммы */
    margin-right: 0.5rem; /* Добавляем отступ справа */
}

.player-name-short {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Установите максимальную ширину по вашему усмотрению */
}

.player-score label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* Установите максимальную ширину по вашему усмотрению */
}

.player-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.score-container {
    display: flex;
    gap: 5px;
}

.score-container input {
    width: 50px;
    padding: 10px;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.status-dot-green {
    background-color: #9CF73F;
}
.status-dot-red {
    background-color: #dc3545; /* Bootstrap red */
}

.tournament-name-adaptive {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* по умолчанию для самых маленьких экранов */
}

/* 375px - iPhone SE */
@media (min-width: 375px) {
    .tournament-name-adaptive {
        max-width: 225px;
    }
}

@media (min-width: 400px) {
    .tournament-name-adaptive {
        max-width: 250px;
    }
}

@media (min-width: 425px) {
    .tournament-name-adaptive {
        max-width: 275px;
    }
}

@media (min-width: 450px) {
    .tournament-name-adaptive {
        max-width: 300px;
    }
}

@media (min-width: 500px) {
    .tournament-name-adaptive {
        max-width: 350px;
    }
}

@media (min-width: 600px) {
    .tournament-name-adaptive {
        max-width: 360px;
    }
    .score-container input {
        width: 40px;
        padding: 8px;
    }
}

@media (min-width: 700px) {
    .tournament-name-adaptive {
        max-width: 370px;
    }
}

@media (min-width: 800px) {
    .tournament-name-adaptive {
        max-width: 380px;
    }
}

@media (min-width: 1000px) {
    .tournament-name-adaptive {
        max-width: 450px;
    }
}

@media (min-width: 1200px) {
    .tournament-name-adaptive {
        max-width: 600px;
    }
}

@media (min-width: 1400px) {
    .tournament-name-adaptive {
        max-width: 700px;
    }
}

@media (min-width: 1700px) {
    .tournament-name-adaptive {
        max-width: 900px;
    }
}