:root {
	--bs-btn-active-color: #ff0000 !important;

  --bs-link-color-rgb: 8, 155, 171;
  --bs-link-hover-color-rgb: 5, 108, 119;

  --bs-primary-bg-subtle: #EFF1F7;
  --bs-primary-border-subtle: #dcdcdc; /* 929bb5; */

      --bs-border-radius: 10px;

      --bs-success: #28a745;
      --bs-success-rgb: 40, 167, 69;

			--bs-danger: #dc3545;
          --bs-danger-rgb: 220, 53, 70;

	--bs-link-color: #2DAAB8;
	--bs-link-hover-color: #2DAAB8;
}

.progress {
	--bs-progress-bar-bg: #089bab;
}

body {
	padding-top: 120px;
	padding-bottom: 20px;

/*	background-color: #f4f4f4;*/
	background-color: #EFF1F7;
	font-family: "Rajdhani", sans-serif;
}

a {
	text-decoration: none;
	font-weight: 600;
}
a:hover {
	text-decoration: underline;
}
a.btn:hover {
	text-decoration: none;
}

.btn-toggle-mobile {
   color: #929bb5 !important;
   border-color: transparent !important; 
}

.btn-toggle-mobile:hover, .btn-toggle-mobile:active {
	border-color: transparent !important; 
}


#mainNav {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-family: "Rajdhani", sans-serif;
	font-size: 20px;
	font-weight: 600;
	background-color: #ffffff !important;

	border-bottom: 10px solid #EFF1F7;
}

#mainNav a {
	color: #929bb5;
}

#mainNav a.active {
	color: #2DAAB8;
	text-decoration: underline;
}

#mainNav a:hover {
	text-decoration: underline;
}

.popup {
	display: flex;
	justify-content: center;
}
.popup > .card {
	width: 30rem;
}

tr.deleted td,
tr.deleted a,
tr.deleted svg {
	color: #9ca3af !important;
}

.action {
	padding-bottom: 20px;
	text-align: right;
}

td.actions a {
	padding-right: 10px;
}

td.actions a:last-child {
	padding-right: 0;
}

body.login {
	height: 100%;
	display: flex;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.login > div {
	margin: 0 auto;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

#game_comments, #deck_comments {
	height: 100px;
}

.table td.number, .table th.number {
	text-align: center;
} 

@media (min-width: 992px) {
	.navbar-expand-lg .btn-toggle-mobile {
	    display: none;
	}
}
@media (min-width: 992px) {
	body {
		padding-top: 130px;
	}
	#mainNav {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		transition: padding-top 0.3s, padding-bottom 0.3s;
	}
	#mainNav .navbar-brand {
		font-size: 1.75em;
		transition: font-size 0.3s;
	}
}

@media screen and (max-width: 500px) {
	body {
		padding-top: 80px;
	}

	table.table {
		border: 0;
		background-color: inherit !important;
	}

	table.table caption {
		font-size: 1.3em;
	}

	table.table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
  
	table.table tr {
		border: 1px solid #cccccc;
		display: block;
		margin-bottom: 20px;
	}
	table.table tr:last-child {
		margin-bottom: 0;
	}

	table.table td {
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #ddd;
		display: block;
		text-align: right !important;
	}
  
	table.table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
	}
  
	table.table td:last-child {
		border-bottom: 0;
	}
}


.form-surrounded {
	display: flex;
	align-items: center;
	height: calc(100% - 1rem);
}

.form-surrounded > label {
	white-space: nowrap;
	margin-bottom: 0;
}

.form-surrounded > label:first-child {
	margin-right: 20px;
}
.form-surrounded > label:last-child {
	margin-left: 20px;
}


.card.stat-box {
	border: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.card.stat-box h4.card-title {
	font-family: "Rajdhani", sans-serif;
	font-size: 45px;
	font-weight: 600;
	color: #2E4765 !important;
	line-height: 1;
}
.card.stat-box p.card-text {
	font-family: "Rajdhani", sans-serif;
	font-size: 19px;
    font-weight: 500;
    color: #B2B5C0;
    line-height: 1;
}
.card.stat-box div.card-body {
	display: flex;
	padding: 43px 30px;
}
.card.stat-box div.card-icon svg {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    text-align: right;
}
.card.stat-box div.card-content {
	margin-left: 30px;
}

.box {
	padding: 30px;
    background-color: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.box .box-title {
	border-bottom: 1px solid rgb(239, 239, 239);
}
.box h3 {
    font-family: Rajdhani, sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: rgb(46, 71, 101);
    line-height: 1.2;
}

select {
	font-family: "Rajdhani", sans-serif;
    font-size: 17px !important;
    font-weight: 600 !important;
}

.btn.btn-secondary {
	background-color: #2DAAB8;
	border-color: #2DAAB8;
	color: #ffffff !important;
}

.btn.btn-secondary:hover {
    background-color: #fff;
    border: 1px solid #929bb5;
    color: #2DAAB8 !important;
}

.custom-select {
  background-color: #f8fafc; /* very light gray-blue */
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
}
.custom-select:focus {
  border-color: #089bab;  /* your teal accent */
  box-shadow: 0 0 0 0.2rem rgba(8, 155, 171, 0.25);
}

.progress-bar-container h4 {
	font-size: 20px;
	line-height: 1;
	margin-bottom: 5px;
}

.btn-outline-info {
    border-color: #2DAAB8 !important;
    color: #2DAAB8 !important;
}

/* 2. Ce qui se passe quand la checkbox est cochée */
.btn-check:checked + .btn-outline-info {
    background-color: #2DAAB8 !important;
    border-color: #2DAAB8 !important;
    color: #ffffff !important; /* L'icône devient blanche */
}

/* 3. Optionnel : Enlever l'effet de gris au survol pour garder ton bleu */
.btn-outline-info:hover {
    background-color: rgba(45, 170, 184, 0.1);
    color: #2DAAB8;
    border-color: #2DAAB8;
}

/* Player Block */

.player-block > .card {
	background-color: #ffffff;
}

.player-block .player-deck-id {
	display: none;
}
.player-block.player-deck .player-deck-id {
	display: block;
}

.player-block.player-deck .player-commander-name {
	display: none;
}

.player-block.player-user > .card {
	background-color: #2daab85a;
}

.player-block .deck-cards {
	display: none;
}
.player-block .player-badge {
	display: none;
}
.player-block.player-user .player-badge {
	display: flex;
}
.player-block.player-user .player-name {
	display: none;
}

.player-block.player-deck .deck-cards {
	display: block;
}

.player-block:not(.player-deck) .player-settings {
	margin-bottom: 0 !important;
}

.user-select-toggle:hover svg {
    transform: scale(1.2);
    transition: all 0.2s;
}
.user-select-toggle .icon-close {
	display: none;
}

.player-user .user-select-toggle .icon-select {
	display: none;
}	
.player-user .user-select-toggle .icon-close {
	display: block;
}

.deck-select-toggle:hover svg {
    transform: scale(1.2);
    transition: all 0.2s;
}
.deck-select-toggle .icon-close {
	display: none;
}

.player-deck .deck-select-toggle .icon-select {
	display: none !important;
}	
.player-deck .deck-select-toggle .icon-close {
	display: block;
}

.selected-user-badge {
    height: 58px; /* Même hauteur qu'un input form-floating de Bootstrap */
    background-color: #2DAAB8;
    color: white;
    border-radius: 0.375rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.date-range-stats {
	text-align: right;
	font-size: 14px;
	color: #929bb5;
	font-weight: 600;
}

.accordion-button:focus {
	box-shadow: none;
}

.player-user-stats {
	background-color: #d1e7dd !important;
	border-color: #a3cfbb !important;
}