/* Global UI controls: font size + (optional) dashboard card reorder. */

/* Font scaling: applied by JS (sets html font-size in px). */

#ccgUiControls {
	max-width: 980px;
}

/* Dash móvil: fija los controles cerca del menú inferior.
   - Si la página es corta, quedan pegados abajo.
   - Si hay scroll, se mantienen visibles.
   - Se evita tapar contenido con padding-bottom vía --ccg-ui-controls-height. */
body.dashm-page #ccgUiControls{
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: min(980px, calc(100% - 1.25rem));
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 1031;
	margin: 0 !important;
	background: var(--app-surface);
	border: 1px solid var(--app-border);
	border-radius: 16px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	line-height: 1.2;

	/* Neutraliza escalado por rem (Bootstrap) dentro de la barra */
	--bs-body-font-size: 14px;
	--bs-body-line-height: 1.2;
	--bs-btn-font-size: 14px;
	--bs-btn-line-height: 1.1;
	--bs-btn-padding-y: 4px;
	--bs-btn-padding-x: 10px;
	--bs-btn-border-radius: 10px;
	--bs-btn-border-radius-sm: 10px;
}

body.dashm-page #ccgUiControls .d-flex.align-items-center.justify-content-between{
	/* 3 slots: left (font), middle (theme), right (reorder) */
	gap: 8px !important;
}

body.dashm-page #ccgUiControlsRight{
	justify-content: flex-end;
}

body.dashm-page #ccgUiControls .btn,
body.dashm-page #ccgUiControls .btn-group,
body.dashm-page #ccgUiControls #ccgUiControlsRight{
	font-size: 14px;
}

body.dashm-page #ccgUiControls .btn-group-sm > .btn,
body.dashm-page #ccgUiControls .btn-sm{
	padding: 4px 10px;
	line-height: 1.1;
}

body.dashm-page #ccgUiControls .gap-2{
	gap: 8px !important;
}

@supports not (width: min(1px, 2px)){
	body.dashm-page #ccgUiControls{ width: calc(100% - 1.25rem); }
}

/* Dashboard reorder mode */
.ccg-reorder-mode .quick-cards .quick-card {
	position: relative;
}

.ccg-reorder-tools {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: flex;
	gap: .25rem;
	z-index: 5;
}

/* Keep buttons compact inside cards */
.ccg-reorder-tools .btn {
	padding: .125rem .375rem;
	line-height: 1.1;
}