/* Shared between frontend and backend (common\assets\BaseCssAsset) -- rules
   that were hand-copied identically into both apps' own site.css, plus the
   :root custom properties and the status-badge colors (ModelUI::El()'s
   'badge-status' -> ModelDB::getStatusRange()'s 's-*' classes), which the
   backend never actually had, so those badges rendered with no color at all
   in the admin panel. Edit here once instead of in both site.css files. */

:root {
	--default: #3a3a3a;
	--default-light: #ccc;
	--primary: DodgerBlue;
	--primary-light: #CCE5FF;
	--light: #f5f5f5;
	--error: #dc3545;
}

html,
body {
	height: 100%;
}

.wrap {
	min-height: 100%;
	height: auto;
	margin: 0 auto -60px;
	padding: 0 0 60px;
}

.wrap > .container {
	padding: 70px 15px 20px;
}

.jumbotron {
	text-align: center;
	background-color: transparent;
}

.jumbotron .btn {
	font-size: 21px;
	padding: 14px 24px;
}

.not-set {
	color: #c55;
	font-style: italic;
}

/* Auto-generated initials avatar -- see ModelUI::Avatar(). */
.user-avatar {
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-weight: bold;
	vertical-align: middle;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	padding-left: 5px;
}

a.asc:after {
	content: "\e151";
}

a.desc:after {
	content: "\e152";
}

.sort-numerical a.asc:after {
	content: "\e153";
}

.sort-numerical a.desc:after {
	content: "\e154";
}

.sort-ordinal a.asc:after {
	content: "\e155";
}

.sort-ordinal a.desc:after {
	content: "\e156";
}

.grid-view td {
	white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
	min-width: 50px;
}

.hint-block {
	display: block;
	margin-top: 5px;
	color: #999;
}

.error-summary {
	color: #a94442;
	background: #fdf7f7;
	border-left: 3px solid #eed3d7;
	padding: 10px 20px;
	margin: 0 0 15px 0;
}

.coin-container {
	width:100%;

	position:relative;
	z-index:1;

	float:left;

	border:1px solid #CCC;
	background-color:#FFF;
	border-radius:5px;
}

.coin-container:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.coin-container-tab-reverse,
.coin-container-tab {
	position:absolute;
	z-index:0;
	left:50%;
	bottom:0;
	margin-left:-10%;
	margin-bottom:-10%;

	background-color:#FFF;
	/* Create the circle */
	width:20%;
	height:20%;
	border:1px solid #CCC;
	border-radius: 50%;
	/* Halve the circle */
	border-bottom-color: transparent;
	border-left-color: transparent;
	/* Rotate the circle */
}

.coin-container-tab-reverse {
	opacity:0.5;
}

.coin-container .top {
	top:0;
	margin-top:-10%;
	transform: rotate(-45deg);
}

.coin-container .bottom {
	bottom:0;
	margin-bottom:-10%;
	transform: rotate(135deg);
}

.coin-container-img {
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:center center;
	width:80%;
	height:80%;
	left:10%;
	top:10%;
	position:absolute;
	z-index:1;

	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
}

/*****************************************
CHANGE EXTENSIONS/PLUGINS DEFAULTS
******************************************/
.select2-container--krajee-bs3 .select2-results__option--highlighted[aria-selected] {
	background-color:var(--primary) !important;
}
.select2-results__option[aria-selected="true"] {
	background-color:#e3e3e3 !important;
}

/* Status badges -- ModelUI::El(['type' => 'badge-status'], ...) builds
   "badge badge-default s-<name>"; matched by suffix so it works regardless
   of what other classes (if any) precede it. */
[class$="s-active"] {
	background-color:#28a745 !important;
}
[class$="s-inactive"] {
	background-color:#343a40 !important;
}
[class$="s-deleted"] {
	background-color:var(--error) !important;
}
[class$="s-pending"] {
	color:black;
	background-color:#ffc107 !important;
}
[class$="s-expired"] {
	background-color:#6c757d !important;
}

/* Kartik GridView's pager (.kv-panel-pager, a Bootstrap <ul class="pagination">
   of page-number links) never wraps to a second line -- on a narrow mobile
   viewport a grid with many pages (9+) makes that one row wider than the
   viewport, and since nothing here constrains it, the overflow propagates
   all the way up to <body>, dragging the WHOLE admin page into horizontal
   scroll instead of just the pager itself (found live 2026-09-02, X3 mobile
   QA, confirmed via document.body.scrollWidth on backend/coin at 378px).
   Scoping the scroll to the pager alone keeps the rest of the page (sidebar,
   grid rows, everything already correctly stacked for mobile) from moving. */
@media (max-width: 767px) {
	.kv-panel-pager {
		overflow-x: auto;
	}
	.kv-panel-pager .pagination {
		flex-wrap: nowrap;
		margin-bottom: 0;
	}

	/* On a grid with many pages the pager still lists up to ~10 page-number
	   buttons (yii\widgets\LinkPager's maxButtonCount) -- the overflow-x:auto
	   above stops that from breaking the page layout, but scrolling through
	   10 tiny numbered buttons on a phone is still awkward (2026-09 QA
	   follow-up). Collapse to prev/current/next only on mobile; the "A exibir
	   X-Y de Z itens" summary above the grid already gives total-page context,
	   so nothing is lost besides the ability to jump straight to an arbitrary
	   page number. */
	.kv-panel-pager .pagination > li {
		display: none !important;
	}
	.kv-panel-pager .pagination > li.prev,
	.kv-panel-pager .pagination > li.next,
	.kv-panel-pager .pagination > li.active {
		display: inline-block !important;
	}
}