/* EG63 admin theme overrides, layered on top of Tabler's core CSS. */

html {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* Palette matches eg63.net's public site (assets/css/style.css): logo blue
   #00b4f8, deep navy surfaces, gold lucky accent. */
:root {
	--tblr-primary: #00b4f8;
	--tblr-primary-rgb: 0, 180, 248;
	--tblr-primary-fg: #fff;
	--eg63-gold: #f5b301;
}

/* Sidebar: eg63.net's own deep navy surface color, rather than the logo's
   full brightness (which washes out the logo itself and reads as too intense
   filling an entire tall sidebar). Active items pick up the site's gold
   accent. Text/hover colors already come from Tabler's dark navbar theme and
   adapt to any background. */
.navbar-vertical {
	--tblr-navbar-bg: #05426b;
	--tblr-navbar-active-bg: var(--eg63-gold);
	--tblr-navbar-active-color: #05426b;
	--tblr-navbar-hover-color: #fff;
}

/* Legacy inline widths from the previous theme's tables/forms still rely on the
   browser default table layout; keep card tables from overflowing narrow screens. */
.table-responsive {
	width: 100%;
}

/* Bootstrap 4 utility aliases. Tabler ships Bootstrap 5, which renamed these
   (mr/ml -> me/ms, left/right -> start/end); the view templates still use the
   old names in hundreds of places, so alias them instead of rewriting every
   occurrence. Values match Bootstrap's own spacing scale. */
.mr-0 { margin-right: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.ml-1 { margin-left: .25rem !important; }
.pr-1 { padding-right: .25rem !important; }
.pl-1 { padding-left: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.ml-2 { margin-left: .5rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pl-2 { padding-left: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.ml-3 { margin-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.ml-5 { margin-left: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.rounded-left { border-top-left-radius: var(--tblr-border-radius) !important; border-bottom-left-radius: var(--tblr-border-radius) !important; }
.rounded-right { border-top-right-radius: var(--tblr-border-radius) !important; border-bottom-right-radius: var(--tblr-border-radius) !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.font-weight-normal { font-weight: 400 !important; }
.no-gutters { --tblr-gutter-x: 0; --tblr-gutter-y: 0; }

/* Bootstrap 4 custom form controls -> Bootstrap 5 form-check, so old checkbox/
   radio markup carried over from the previous theme still renders styled. */
.custom-control { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem; }
.custom-control-inline { display: inline-block; margin-right: 1rem; }
.custom-control-input { width: 1em; height: 1em; margin-left: -1.5em; vertical-align: top; background-color: var(--tblr-body-bg); background-repeat: no-repeat; background-position: center; background-size: contain; border: var(--tblr-border-width) solid var(--tblr-border-color); appearance: none; }
.custom-checkbox .custom-control-input { border-radius: .25em; }
.custom-checkbox .custom-control-input:checked { background-color: var(--tblr-primary); border-color: var(--tblr-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); }
.custom-control-label { margin-bottom: 0; }

/* News/announcement ticker (news.php), shown at the top of every page-header.
   The icon sits outside the scrolling viewport on purpose: overflow:hidden only
   clips at .news-ticker's own edges, so without a dedicated inner viewport the
   translated track can slide underneath the icon during the animation instead
   of stopping at the icon's edge. */
.news-ticker {
	display: flex;
	align-items: center;
	gap: .625rem;
	background: rgba(var(--tblr-primary-rgb), .07);
	border: 1px solid rgba(var(--tblr-primary-rgb), .18);
	border-radius: var(--tblr-border-radius, 4px);
	padding: .5rem .875rem;
	margin-bottom: 1rem;
}

.news-ticker-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--tblr-primary);
	font-size: .9375rem;
}

.news-ticker-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.news-ticker-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	white-space: nowrap;
	animation: news-ticker-scroll 16s linear infinite;
}

.news-ticker:hover .news-ticker-track {
	animation-play-state: paused;
}

.news-ticker-item {
	flex: 0 0 auto;
	padding-inline-end: 4rem;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--tblr-body-color);
}

@keyframes news-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-100% - 4rem)); }
}

@media (prefers-reduced-motion: reduce) {
	.news-ticker-track {
		animation: none;
	}
}