/* TA Admin — Bootstrap 5 custom styles
 * Supplement to Bootstrap defaults for the EasyRecord admin section.
 */

/* -------------------------------------------------------
   Flash messages
   Temporary (fixed-position, auto-fades after 5 s): msg-good, msg-info
   Persistent (inline):  msg-bad, msg-warning, msg-good-persist, msg-info-persist
------------------------------------------------------- */

/* --- Shared base for temporary messages --- */
.msg-good,
.msg-info {
	position: fixed;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1055;
	min-width: 280px;
	max-width: 90vw;
	padding: .75rem 1.25rem;
	border-radius: .375rem;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	/* 4 s visible, then 1 s fade-out */
	animation: erMsgFadeOut 2s ease-in 2s forwards;
}

.msg-good {
	background-color: #d1e7dd;
	border: 1px solid #badbcc;
	color: #0a3622;
}

.msg-info {
	background-color: #cff4fc;
	border: 1px solid #b6effb;
	color: #055160;
}

@keyframes erMsgFadeOut {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden;  }
}

/* --- Shared base for persistent messages --- */
.msg-bad,
.msg-warning,
.msg-good-persist,
.msg-info-persist {
	position: relative;
	padding: .75rem 2.5rem .75rem 1rem;
	margin-bottom: 1rem;
	border-radius: .375rem;
}

.close-btn {
	position: absolute;
	top: .4rem;
	right: .4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	border-radius: .25rem;
	opacity: .6;
	transition: opacity .15s, background-color .15s;
}

.close-btn:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, .1);
}

.msg-bad {
	background-color: #f8d7da;
	border: 1px solid #f5c2c7;
	color: #58151c;
}

.msg-warning {
	background-color: #fff3cd;
	border: 1px solid #ffecb5;
	color: #664d03;
}

.msg-good-persist {
	background-color: #d1e7dd;
	border: 1px solid #badbcc;
	color: #0a3622;
}

.msg-info-persist {
	background-color: #cff4fc;
	border: 1px solid #b6effb;
	color: #055160;
}

/* -------------------------------------------------------
   Utility classes carried over from JQM era
------------------------------------------------------- */
.hideInSmall {
	display: none;
}

@media (min-width: 576px) {
	.hideInSmall {
		display: inline;
	}
}

.nobr {
	white-space: nowrap;
}

.role-text {
	font-size: .8rem;
	opacity: .85;
}

/* -------------------------------------------------------
   Offcanvas sidebar menu
------------------------------------------------------- */
#adminSideMenu ul {
	padding: 0;
	margin: 0;
}

#adminSideMenu ul li {
	list-style: none;
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

#adminSideMenu ul li a {
	display: block;
	padding: .5rem 1rem;
	color: var(--bs-body-color);
	text-decoration: none;
}

#adminSideMenu ul li a:hover {
	background-color: var(--bs-tertiary-bg);
}

/* -------------------------------------------------------
   DataTables inside Bootstrap
------------------------------------------------------- */
table.dataTable {
	border-collapse: collapse;
}

/* -------------------------------------------------------
   Table column width helpers (carried over from style.css)
------------------------------------------------------- */
.col-class   { width: 10ch; }
.col-event   { width: 10ch; }
.col-sb      { width: 10ch; }
.col-pb      { width: 10ch; }
.col-payment { width: 10ch; }
.col-late    { width: 15ch; }
.col-except  { width: 14ch; }
.col-reserve { width: 10ch; }
.col-absent  { width: 11ch; }
.col-comment { width: 20%; }
.col-remove  { width: 4ch; }

/* -------------------------------------------------------
   Finnkampen team row colours (competition-specific)
------------------------------------------------------- */
tr.finnkampen-team-Sweden td {
	background-color: #fecc00 !important;
	text-shadow: 1px 1px 2px rgba(128, 96, 0, 0.5) !important;
}

tr.finnkampen-team-Finland td {
	background-color: #002f6c !important;
	color: white !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
}

tr.finnkampen-team-Sweden td a,
tr.finnkampen-team-Finland td a {
	text-shadow: none !important;
}

/* -------------------------------------------------------
   Disabled buttons — more visually distinct than Bootstrap default
------------------------------------------------------- */
.btn:disabled,
.btn[disabled] {
	cursor: not-allowed;
}

/* -------------------------------------------------------
   Larger checkboxes in table cells — truly centered
------------------------------------------------------- */

/* Make the td itself a flex container so we can center in both axes */
td:has(> .form-check) {
	display: table-cell; /* keep table layout */
	vertical-align: middle;
	text-align: center;
	padding: 0 !important;
}

td .form-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;   /* kill Bootstrap's padding-left: 1.5em */
	margin: 0;
	line-height: 1;
}

td .form-check-input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 !important;    /* kill Bootstrap's top margin */
	cursor: pointer;
	flex-shrink: 0;
	position: static !important; /* Bootstrap sets position for padding-left layout */
	float: none !important;
}

/* Check-in checkbox — larger and more visible */
.chbCalled {
	width: 1.6rem !important;
	height: 1.6rem !important;
	border: 2px solid #666 !important;
	cursor: pointer;
}

/* Large standalone checkbox variant */
.form-check-lg {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .3rem .65rem .3rem .45rem;
	border: 1px solid var(--bs-border-color);
	border-radius: .375rem;
}

.form-check-lg .form-check-input {
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.form-check-lg .form-check-label {
	font-size: 1rem;
	cursor: pointer;
}

/* -------------------------------------------------------
   Inputs / selects in tables — inset shadow for depth
------------------------------------------------------- */
.table .form-control,
.table .form-select {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .10), inset 0 1px 2px rgba(0, 0, 0, .06);
	border-color: #b8cac8;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.table .form-control:focus,
.table .form-select:focus {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08), 0 0 0 .2rem rgba(15, 118, 110, .25);
	border-color: #0f766e;
}

/* -------------------------------------------------------
   Table visual enhancements
------------------------------------------------------- */

/* Thead: teal background, white text — applies everywhere */
.table > thead > tr > th {
	background-color: var(--bs-primary-bg-subtle) !important;
}

/* Wrappable thead — cell content drives column width instead of header text */
.table > thead.thead-wrap > tr > th {
	white-space: normal;
}

/* Info icon button inside teal thead should be white */
.table > thead .btn-link {
	color: rgba(255, 255, 255, .85) !important;
}


/* -------------------------------------------------------
   International participant search results
------------------------------------------------------- */
#participantlist .list-group-item-action:hover {
	background-color: rgba(19, 189, 230, .14);
	border-left: 3px solid #0f766e;
	padding-left: calc(1rem - 3px); /* compensate for border width */
}

#participantlist .list-group-item {
	transition: background-color .1s ease, border-left .1s ease;
	cursor: pointer;
}

/* -------------------------------------------------------
   Misc
------------------------------------------------------- */
td img {
	vertical-align: middle;
}

input.readonly-input {
	background-color: #dedede96;
}

.resultPoints .badge {
	font-size: 100%;
}

.table-check-in tbody tr.entry-reserve td,
.table-check-in tbody th {
	background-color: orange;
	text-shadow: none;
}

/* -------------------------------------------------------
   Check-in online status icon — sized to match btn-sm
------------------------------------------------------- */
.icon-checkin-online,
.icon-checkin-online.svg-inline--fa {
	font-size: 1.3rem;
	height: 1.3rem;
	vertical-align: middle;
}

/* -------------------------------------------------------
   Overview — division of heats should be completed warning
------------------------------------------------------- */
.divisionOfHeatsShouldBeCompleted td {
	background-color: #fde68a !important; /* amber, consistent with "under review" palette */
}

/* -------------------------------------------------------
   Overview — round status colour-coding (td-roundStatus)
------------------------------------------------------- */
/* 15: Preliminary division of heats */
.tr-round-status-15 .td-roundStatus {
	background-color: #fef9c3 !important;
}

/* 20: Division of heats done — no extra colour, already visible */

/* 25: Round in progress */
.tr-round-status-25 .td-roundStatus {
	background-color: #dcfce7 !important;
	color: #166534;
	font-weight: 500;
}

/* 30: Preliminary results */
.tr-round-status-30 .td-roundStatus {
	background-color: #fef3c7 !important;
	color: #92400e;
	font-weight: 500;
}

/* 35: Results under review */
.tr-round-status-35 .td-roundStatus {
	background-color: #fcd34d !important;
	color: #78350f;
	font-weight: 600;
}

/* 40: Round completed */
.tr-round-status-40 .td-roundStatus {
	background-color: #0f766e !important;
	color: #fff;
	font-weight: 600;
}

.cloud-upload-success {
	color: #fff;
}

/* -------------------------------------------------------
   Record indicator cell
------------------------------------------------------- */
.td-new-record {
	background: gold !important;
	text-shadow: none;
}

/* -------------------------------------------------------
   Heat / round status banners
------------------------------------------------------- */
.heatDone,
.roundDone {
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	background-color: #e3f7fc;
	border: 1px solid #8ed9f6;
	color: #555;
	border-radius: .5rem;
	padding: .4rem .75rem;
	margin-bottom: .75rem;
}

.heatWarning {
	text-align: center;
	background-color: bisque;
	border: 1px solid #8ed9f6;
	color: #555;
	border-radius: .5rem;
	padding: .4rem .75rem;
	margin-bottom: .75rem;
}

/* -------------------------------------------------------
   EIC simplified table — clickable / unclickable cells
------------------------------------------------------- */
#tableEICSimplified td,
#tableEICSimplified th {
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}

.td-unclickable {
	background-color: #e9ecef !important;
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 4px,
		rgba(0, 0, 0, .07) 4px,
		rgba(0, 0, 0, .07) 8px
	);
	cursor: not-allowed;
}

.td-clickable {
	cursor: pointer;
}

.td-clickable.active {
	background-color: rgba(19, 189, 230, .22) !important;
}

.td-clickable:hover {
	background-color: rgba(19, 189, 230, .42) !important;
	transition: background-color .1s ease;
}

/* -------------------------------------------------------
   Settings page — tab strip + content frame
------------------------------------------------------- */
#settings-tabs {
	background-color: var(--bs-tertiary-bg);
	padding: .5rem .5rem 0;
	border: 1px solid var(--bs-border-color);
	border-bottom: none;
	border-radius: .375rem .375rem 0 0;
	margin-bottom: 0 !important;
	flex-wrap: wrap;
}

#settings-tabs .nav-link {
	color: var(--bs-body-color);
	opacity: .7;
}

#settings-tabs .nav-link:hover:not(.active) {
	background-color: var(--bs-secondary-bg);
	opacity: 1;
}

#settings-tabs .nav-link.active {
	opacity: 1;
	font-weight: 600;
}

#settings-content {
	border: 1px solid var(--bs-border-color);
	border-radius: 0 0 .375rem .375rem;
	padding: 1.25rem;
}

/* -------------------------------------------------------
   Checkboxes styled as buttons — for various toggle options
------------------------------------------------------- */
.btn-check:checked+.btn::before {
    content: '\2611' ' ';
}

.btn-check+.btn::before {
    content: '\2610' ' ';
}